如何画一条0.5px的线

方法一、移动端，采用meta viewport的方式

<meta name="viewport" 
      content="width=device-width, 
      initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>

这样子就能缩放到原来的0.5倍，如果是1px那么就会变成0.5px。

方法二、采用 transform: scale()的方式

transform: scale(0.5,0.5);

方法三、使用boxshadow

<style>
.boxshadow {
      
      
    height: 1px;
    background: none;
    box-shadow: 0 0.5px 0 #000;
}
</style>
<p>box-shadow: 0 0.5px 0 #000</p>

<div class="boxshadow"></div>

设置box-shadow的第二个参数为0.5px，表示阴影垂直方向的偏移为0.5px。

方法四、使用background-image结合SVG的方式
使用svg的line元素画线，stroke表示描边颜色，默认描边宽度stroke-width=“1”，由于svg的描边等属性的1px是物理像素的1px，相当于高清屏的0.5px，

这样在Chrome在能很好的显示，但在firefox挂了，究其原因是因为firefox的background-image如果是svg的话只支持命名的颜色，如"black"、"red"等，如果把上面代码的svg里面的#000改成black的话就可以显示出来，但是这样就很不灵活了。因此，只能把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>");
    //使用base64来使得支持firefox
    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzFweCc+PGxpbmUgeDE9JzAnIHkxPScwJyB4Mj0nMTAwJScgeTI9JzAnIHN0cm9rZT0nIzAwMCc+PC9saW5lPjwvc3ZnPg==");
}

参考地址：https://zhuanlan.zhihu.com/p/34908005

如何画一条0.5px的线

猜你喜欢