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