在retain屏下实现真实1px边框

由于在CSS中只能设置CSS像素，而Ratain屏幕下1CSS像素=2真实像素，所以设计稿中给出的1px边框总是变成2px,而2px的双色边框只能变成4px，没有真实还原设计稿，如图：

今天在看响应式设计的文章时发现一个解决方案，用渐变来实现真实的1px，即在ratain屏下，设置渐变背景50%处渐变，背景高度1px,这样实际将1CSS像素拆分成两个单元，就可以为单个像素设置颜色了

实际效果

2真实像素双色边框

1真实像素单色边框

 

代码中要使用media-query来判定是否使用渐变方案

@media only screen and(-webkit-min-device-pixel-ratio:1.5) ,
only screen and (min-device-pixel-ratio:1.5){
    .rank li{
        background-image:linear-gradient(180deg, #dbc497, #dbc497 50%, #f3e2b7 50%);
        background-size: 100% 1px;
        background-repeat: no-repeat;
        background-position: bottom;
    }
}

不过这种方案比较局限的地方是不改变html的情况下只可以实现单侧边框，如需要多侧边框则需要增加dom复杂度

PS:后来发现，这种方法只有在IOS7下有效。IOS6及以下仍显示2真实像素