Open lulujianglab opened 6 years ago
开发过移动端的应该都遇到过css里边写的1px实际上看着比1px粗,由于devicePixelRatio的存在,移动端永远无法使用border属性实现一个统一的1px细线。详细原因可以参考大漠的文章,也可以参考博客
1px细线的处理方法有多种,下面主要介绍现在主流的方法
为什么说是主流方法呢?
可以参考现在比较受欢迎的移动端ui样式库,比如微信的WeUI button
的1px border
如蚂蚁金服的(Ant Design Mobile组件库)[https://mobile.ant.design/components/button-cn/]
上面的图片如果看不清晰,我们可以具体分析下WeUI的实现原理
weui-btn:after { content: " "; width: 200%; height: 200%; position: absolute; top: 0; left: 0; border: 1px solid rgba(0, 0, 0, 0.2); -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-transform-origin: 0 0; transform-origin: 0 0; box-sizing: border-box; border-radius: 10px; }
我们可以看到通过伪元素构建的基本原理,是先将它的长宽放大到2倍, 边框宽度设置为1px, 再以transform缩放到50%,同时,元素本身使用position:relative相对定位,伪元素使用position:absolute绝对定位
position:relative
position:absolute
前言
开发过移动端的应该都遇到过css里边写的1px实际上看着比1px粗,由于devicePixelRatio的存在,移动端永远无法使用border属性实现一个统一的1px细线。详细原因可以参考大漠的文章,也可以参考博客
1px细线的处理方法有多种,下面主要介绍现在主流的方法
伪元素:after
为什么说是主流方法呢?
可以参考现在比较受欢迎的移动端ui样式库,比如微信的WeUI button
如蚂蚁金服的(Ant Design Mobile组件库)[https://mobile.ant.design/components/button-cn/]
上面的图片如果看不清晰,我们可以具体分析下WeUI的实现原理
我们可以看到通过伪元素构建的基本原理,是先将它的长宽放大到2倍, 边框宽度设置为1px, 再以transform缩放到50%,同时,元素本身使用
position:relative
相对定位,伪元素使用position:absolute
绝对定位