如何画一条0.5px的边

scale

height: 1px;
transform: scaleY(0.5);

我们发现Chrome/Safari都变虚了，只有Firefox比较完美看起来是实的而且还很细，效果和直接设置0.5px一样。所以通过transform: scale会导致Chrome变虚了，而粗细几乎没有变化。但是如果加上transform-origin: 50% 100%：

height: 1px;
transform: scaleY(0.5);
transform-origin: 50% 100%;

大家就都变实了，很完美

svg

<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1px'>
    <line x1='0' y1='0' x2='100%' y2='0' stroke='#000'></line>
</svg>

参考

• 怎么画一条0.5px的边（更新）