css中是这样写的:
div{
border-bottom: 1px solid #dfe5e4;
}
但在手机上,像素比不为 1 ,由于 webview 的灰度渲染, border 一般会显示为 2-3px
如何使手机上的 border 也显示为 1px ?
尝试了
div{
background: url(xxx.png) 0 bottom repeat-x;
background-size: auto 10px;
}
其中xxx.png为一张 1x20 的图片,仅有最下面的 1x1 为有色,其它部分透明。企图通过 background-size 压缩后显示出一条小于 1px 的线
和
div{
box-shadow: 0 1px 0 #dfe5e4;
}
div{
box-shadow: inset 0 1px 0 0 #dfe5e4;
}
都不好使
-----------------------------------------------------------------------------------------------------------------
最后的解决办法是:
div:after{
content: '';
display: block;
height: 1px;
background: #dfe5e4;
}
@media screen and (-webkit-min-device-pixel-ratio: 1.5){
div:after{
-webkit-transform:scaley(0.5);
}
}
如有更方便的办法,多谢赐教!