如何实现border-width:0.5px;

程序员红卫技术 2022年11月12日

0 收藏 300 点赞 4,407 浏览 1070 个字

工作中遇到了一个产品需求，要求把列表分割线改成0.5px，直接写成border：0.5px solid #cccccc;是不符合规范的写法，会存在Android和IOS手机上的兼容问题，故，我们可以利用CSS3的transform特性，放缩边框宽度来实现这一效果。

HTML代码如下：

<ul class="mBasicBorder_box">
    <li class="mBasicBorder_scale_border">边框宽度0.5px</li>
    <li class="mBasicBorder_scale_border">边框宽度0.5px</li>
    <li class="mBasicBorder_scale_border">边框宽度0.5px</li>
    <li class="mBasicBorder_scale_border">边框宽度0.5px</li>
</ul>

CSS代码如下：

.mBasicBorder_box{
    padding:15px;
    max-width: 640px;
    margin: 0 auto;
}
.mBasicBorder_scale_border{
    width:100%;
    height:50px;
    line-height: 50px;
    position: relative;
}
.mBasicBorder_scale_border:after{
    content: '';
    height: 1px;  //控制边框宽度
    width: 200%;  //控制边框长度
    position: absolute;
    left: 0px;
    top: auto;
    right: auto;
    bottom: 0px;
    background-color: #eeeeee;
    border: 0px solid transparent;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    transform: scale(0.5);  //缩放宽度，达到0.5px的效果
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform-origin: top left;  //定义缩放基点
    -webkit-transform-origin: top left;
    -moz-transform-origin: top left;
    -ms-transform-origin: top left;
    -o-transform-origin: top left;
}