Retina屏问世蛮长时间了,想必不少前端人员被“像素眼”设计师提到过这个问题,下面直接是我常用到的解决方案:
/*1像素边框处理*/
@media(-webkit-min-device-pixel-ratio:2) {
.box{
border: none;
background-size: 100% 1px;
background-repeat: no-repeat;
}
/*上下边框*/
.box-bd_top-bottom{
padding-top: 1px;
padding-bottom: 1px;
background-position: left top, left bottom;
background-image: linear-gradient(to top, transparent 50%, #dbdbdb 50%), linear-gradient(to bottom, transparent 50%, #dbdbdb 50%);
}
/*上边框*/
.box-bd_top {
padding-top: 1px;
background-position: left top;
background-image: linear-gradient(to top, transparent 50%, #dbdbdb 50%);
}
/*右边框*/
.box-bd_right{
background-size: 1px 100%;
padding-right: 1px;
background-position: right top;
background-image: linear-gradient(to right, transparent 50%, #ffffff 50%);
}
.sales-activity .col:nth-of-type(1)>p {
background-size: 1px 100%;
padding-right: 1px;
background-position: right top;
background-image: linear-gradient(to right, transparent 50%, #dbdbdb 50%);
}
/*下边框*/
.box-bd_bottom{
padding-bottom: 1px;
background-position: left bottom;
background-image: linear-gradient(to bottom, transparent 50%, #dbdbdb 50%);
}
/*四边框*/
.box{position:relative;padding:1px;border:none;}
.box:before{
content:"";position:absolute;top:0;left:0;width:200%;height:200%;border-radius: 8px;
border:1px solid #099FDE;
transform:scale(0.5);
transform-origin:0 0;
box-sizing:border-box;
border-radius: 4px;
}
}
四边框都有的话,用scale;一个或两个边框用渐变!
附上前辈总结的各种方法:https://www.cnblogs.com/surfaces/p/5158582.html