给个具体思路, 谢谢。
1px是有很多办法的,缩小0.5,伪类+transform我觉得是最方便的解决方案。不需要动态的脚本去计算什么的。
.hairlines li{ position: relative; border:none; } .hairlines li:after{ content: ''; position: absolute; left: 0; background: #000; width: 100%; height: 1px; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); -webkit-transform-origin: 0 0; transform-origin: 0 0; }
原理是把原先元素的 border 去掉,然后利用 :before 或者 :after 重做 border ,并 transform 的 scale 缩小一半,原先的元素相对定位,新做的 border 绝对定位
这个问题我也遇到过,你可以看看这篇文章,基本能解决问题移动端1px细线解决方案总结
border-radius: 5px; box-shadow: 0 0 1px 0 #a09e9e; 亲测~~
可以用css scale 属性
2px缩放0.5倍
在vux的源码中发现的解决方案, 用伪元素实现感觉是最好得方法, 因为对元素直接scale依然会占据空间,影响后续布局。
scale
.box { overflow: hidden; display: inline-block; width: 100px; height: 100px; } .box:before { z-index: -1; content:''; display: block; position: absolute; top: 0; left: 0; width: 200%; height: 200%; background: #eee; transform-origin: 0 0; transform: scale(.5,.5); border: 1px solid #000; border-radius: 10px; }
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
暂无简介
文章 0 评论 0
接受
发布评论
评论(6)
1px是有很多办法的,缩小0.5,伪类+transform我觉得是最方便的解决方案。
不需要动态的脚本去计算什么的。
原理是把原先元素的 border 去掉,然后利用 :before 或者 :after 重做 border ,并 transform 的 scale 缩小一半,原先的元素相对定位,新做的 border 绝对定位
这个问题我也遇到过,你可以看看这篇文章,基本能解决问题
移动端1px细线解决方案总结
可以用css scale 属性
2px缩放0.5倍
在vux的源码中发现的解决方案, 用伪元素实现感觉是最好得方法, 因为对元素直接
scale
依然会占据空间,影响后续布局。