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