在写移动端的时候,很多安卓手机上border为0.5px看起来甚至比1px的大小还粗,最近遇到以后,想到一个解决办法。
代码如下:
type-border {
position: relative;
}
.type-border:before {
position: absolute;
top: 0;
left: 0;
border: 1px solid #206cfe;
content: "";
transform: scale(0.5);
-webkit-transform: scale(0.5);
transform-origin: 0 0;
-webkit-transform-origin: 0 0;
width: 200%;
height: 200%;
border-radius: 16rpx;
}
原理利用的是 transform 缩放功能,将 1px 缩放一半,同时利用定位,将伪元素覆盖整个 div 元素,从而达到伪元素与本身元素的合并效果。