在移动端1像素的线是很丑的,而border-width设置为0.5px会被自动转成1px;
border-width只能为自然数;类似的属性也不可以设置0.5;
可以用伪元素+缩放来实现;
box{
position:relative; //先给元素设置定位,除了static都可以
}
.box1::before{
content: ''; //追加一个空
position: absolute; //设置定位
top: 0; //如果不设置可能会出现偏移
left: 0;
border: 1px solid #000; //设置边框
width: 200%; //设置为插入元素的两倍宽高
height: 200%;
transform-origin: 0 0; //设置元素的基点为0 0
transform: scale(0.5,0.5); //宽高缩小一半
box-sizing: border-box; //设置盒模型 这一步必须要有,否则边框不会随着一起缩放
}
大概思路:想元素放大2倍但是1像素的边框仍是1像素,然后再缩放时,边框随着一起缩放一半,就形成0.5像素边框
网友评论