0.5px的线如何实现

晓林love

已于 2022-01-19 11:06:01 修改

阅读量1k

点赞数

文章标签： css3 css html

于 2022-01-19 11:04:00 首次发布

本文链接：https://blog.csdn.net/u012963112/article/details/122576349

版权

问题

hr.half-px {
height: 0.5px;
}

不同设备，不同浏览器差异较大

解决

.hr.scale-half {
height: 1px;
transform: scaleY(0.5);
transform-origin: 50% 100%; /*为了防止线模糊*/
}

更好的解决: svg

.hr.svg {
background: none;
height: 1px;
background: url("data:image/svg+xml;utf-8,<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>");
}

其中: 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>

使用svg的line元素画线，stroke表示描边颜色，默认描边宽度stroke-width=“1”，由于svg的描边等属性的1px是物理像素的1px，相当于高清屏的0.5px，另外还可以使用svg的rect等元素进行绘制。

但是在firefox挂了

解决: 把svg转为base64

.hr.svg {
background: url("data:image/svg+xml;utf-8,<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>");
background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzFweCc+PGxpbmUgeDE9JzAnIHkxPScwJyB4Mj0nMTAwJScgeTI9JzAnIHN0cm9rZT0nIzAwMCc+PC9saW5lPjwvc3ZnPg==");
}