码迷,mamicode.com
首页 > 其他好文 > 详细

1px的border

时间:2015-01-16 20:39:55      阅读:164      评论:0      收藏:0      [点我收藏+]

标签:

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

标签:

原文地址:http://www.cnblogs.com/frostbelt/p/4229543.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!