画一条0.5px的线

众所周知,普通屏幕上,一个物理像素等于一个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">

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容