美文网首页
画一条0.5px的线

画一条0.5px的线

作者: 你喜欢吃青椒吗_c744 | 来源:发表于2019-08-06 17:01 被阅读0次

    众所周知,普通屏幕上,一个物理像素等于一个CSS像素。一像素又是物理像素最小的单位。所以在CSS中,只能写出1px,而不能写出0.5px之类的。因为浏览器无法识别低于1px以下的。

    0.5px相当于高清屏物理像素的1px。这样的目的是在高清屏上看起来会更细一点,效果会更好一点,例如更细的分隔线。

    • transform: scaleY()
      height: 1px;
      transform: scaleY(0.5);
    
    • border-image
      首先需要自己制作一个0.5像素的线条作为线条背景图片;
     border-image: url('pic.png') 2 1 1 1 stretch; 
    

    再对图片进行切割,切割成0.5px。

    • meta viewport(只针对于移动端)
    //1px像素线条 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0"> 
    
    //0.5像素线条 <meta name="viewport" content="width=device-width,initial-scale=0.5,user-scalable=0">
    
    

    相关文章

      网友评论

          本文标题:画一条0.5px的线

          本文链接:https://www.haomeiwen.com/subject/xaswdctx.html