由于在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真实像素