涉及点:after伪类、 border-sizing:border-box属性、 transform:scale(0.5)变形缩放属性;
- 单条边框
#border_1{
background-color: #e4e4ea;
position: relative;
}
#border_1:after{
content: '';
height: 1px;
width: 100%;
box-sizing: border-box;
-webkit-box-sizing:border-box;
background-color: red;
position:absolute;
top: 0;
left: 0;
transform: scale(1,0.5);
transform-origin: left top;
}
- 四边框
#border_4{
background-color: #e4e4ea;
border: none;
position: relative;
}
/*实现四边边线都是正常的0.5倍*/
#border_4:after{
content: '';
height: 200%;
width: 100%;
box-sizing: border-box;
-webkit-box-sizing:border-box;
transform: scale(1,0.5);
transform-origin: left top;
box-sizing: border-box;
border: 1px solid #000;
position: absolute;
left: 0;
top: 0;
}
- 移动设备js辅助判断
if(window.devicePixelRatio && devicePixelRatio >= 2){
//document.querySelector('div').className = 'border_1';
document.querySelector('div').className = 'border_4';
}
- 效果图(红色是正常的1px,黑色是处理后的;)