使用transform: scaleX 会造成几个相连的子元素看起来是分隔的？

Question

https://jsfiddle.net/cns53L7k/

<div style="width: 500px;background-color: black;height: 30px;transform: scaleX(0.5);position: relative;">
  <div style="left: 20px;width: 20px;height: 100%;position: absolute;top: 0;background-color: red;"></div>
  <div style="left: 40px;width: 1px;height: 100%;position: absolute;top: 0;background-color: red;"></div>
  <div style="left: 41px;width: 2px;height: 100%;position: absolute;top: 0;background-color: red;"></div>
  <div style="left: 43px;width: 2px;height: 100%;position: absolute;top: 0;background-color: red;"></div>
</div>

使用了transform: scaleX(0.5)在高清的屏幕下，相连的几个子元素div看起来会是有间隔的？

Answer 1

你 width:1px 的元素缩放之后肯定就不足1像素了。

参考一下这个问题里面的半像素渲染问题。

• css 定位 溢出隐藏 边框和内容之前出现 缝隙？ - SegmentFault 思否