retina屏幕1像素边框问题

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

 

转载于:https://www.cnblogs.com/fe-cherrydlh/p/8991942.html