小于1PX的边能使页面变得更加精致,那么具体怎么做呢?
主要思路就是设置伪元素先放大再通过变换缩小。
代码如下
.border {
position: relative;
//如果有圆角
}
.border:before {
left: 0;
border-radius: 20px;//如果有圆角
content: '';
position: absolute;
200%;
height: 200%;
border: 1px solid #9A9A9A;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scale(0.5, 0.5);
-ms-transform: scale(0.5, 0.5);
-o-transform: scale(0.5, 0.5);
transform: scale(0.5, 0.5);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}