关于移动端web 1px边框解决方案

最新推荐文章于 2021-10-22 16:33:05 发布

WongRu1

最新推荐文章于 2021-10-22 16:33:05 发布

阅读量618

点赞数

分类专栏： css 文章标签： css 边框

本文链接：https://blog.csdn.net/WongRu1/article/details/79281049

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

之前项目用到dcloud开发webapp，遇到一个显示问题，现在年底了，抽个时间给分享出来。

很多的安卓手机也是高分辨率的屏幕，有些1px边框的按钮和列表会显得特别粗

这里我们可以通过伪类进行缩放来解决问题。

html：
<div class="tab">
    <span>最近问题</span>
    <span>热门问题</span>
    <span>精彩回答</span>
</div>


css：

.tab{
    height: 0.49rem;
    line-height: 0.49rem;
    position: relative;
    background: #ffffff;
    display: -webkit-flex;
    display: flex;          
}   
.tab:after {
    width: 100%;
    content: '';
    display: block;
    height: 1px;
    left: 0;
    background: #e9e9e9;
    position: absolute; 
    bottom: 0;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
}

此代码可显示同 border-bottom:1px solid #e9e9e9;
如需上边框择将 css代码 after 中 bottm：0，改为top：0 即可

同理，左右边框

.tab:after {
    height: 100%;
    content: '';
    display: block;
    width: 1px;
    left: 0;//左边框 left0，修改为right：0即为有边框
    background: #e9e9e9;
    position: absolute; 
    top: 0;
    -webkit-transform: scaleX(.5);
    transform: scaleX(.5);
}

如果直接是边框的话

.tab:after {
    position: absolute;
    content: '';
    display: block;
    height: 200%;
    width: 200%;
    //border-radius: 0.1rem;  //也可以加圆角
    -webkit-transform: scale(0.5, 0.5);
    transform: scale(0.5, 0.5);
    top: -1px;
    left: 0;
    -webkit-transform-origin: top left;
    transform-origin: top left;                 
}