首页 > 代码库 > 1px的border

1px的border

2024-11-06 20:42:39   204人阅读

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);    }}

如有更方便的办法，多谢赐教！

1px的border


联系
我们