一个 web 的渲染区别请教

Question

如图.

第一个蓝色的方块是200x80, 圆角80
第二个红色的方块是100x80, 圆角80
第三个黄色的方块是200x80, 圆角80, transform: scaleX(.5)

第二个和第三个方块有明显的区别, 主要的原因是什么呢?
第三个方块这样显示似乎有点道理, 但是想知道一个合理的解释.

Answer 1

scale 是伸缩的意思。

你把第一张 200*80 的截个图，用 PS 甚至 Windows 画图都行，横着往里缩小到一半你再瞅瞅。

---

这是原图：

这是横着缩小到 75% 时：

这是横着缩小到 50% 时：

Answer 2

scaleX通过设置 X 轴的值来定义缩放转换。
scaleX(<number>) 元素只在X轴（水平方向）缩放元素
number默认值是1，基点一样在元素的中心位置。可以通过transform-origin来改变基点

Answer 3

scale 会改变内部的相对像素值
scaleX(0.5) = width / 2, border-radius x 轴缩小 0.5