当前位置: 首页 > Web前端 > CSS

总结各种0.5px的线条

时间:2023-03-31 12:27:22 CSS

在PC端看起来还不错,但是在手机端就很难看,0.5px的分割线会有一种细腻的感觉。使用常见的写法border:solid0.5pxred;iPhone可以正常显示,Android下几乎所有浏览器都会将0.5识别为0,即无边框状态。原理是为需要加边框的元素插入一个伪类。使用绝对定位,然后给伪类加上1px的边框,最后缩放0.5倍。transform的缩放和旋转默认是根据元素的中心点进行操作的。outline元素的大小为缩放0.5前的红框元素。缩放后,位置在红框的中心。为了保持在左上角,我们需要在缩放前做。左:-50%;顶部:-50%位移。0.5px边框HELLOWORLD

副作用当使用伪类的绝对定位实现边框时,我们在firstclass和first-div类上的点击事件会失效,因为伪类此时的class是绝对定位的,长宽等于父类元素的长宽,脱离了文档流,覆盖在父类之上。伪类类不是真正的DOM元素,没有js点击事件解决方案,然后写一个绝对定位元素,覆盖父元素,层级优先级要高HELLOWORLD
0.5px圆角边框??HELLOWORLD0.5px左侧线HELLOWORLD0.5px左右线HELLOWORLD0.5px底部线HELLOWORLD