边框0.5px和解决1px的问题

·  阅读 628

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

<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>
复制代码
.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;
}
复制代码

把对应的class名写到需要添加边框的元素上。按需添加

h1 {
  position: relative;
}

h1:after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: 0;
  background: red;
  transform: scaleY(1);
  transform-origin: 0 0;
}

@media screen and (min-device-pixel-ratio: 2),
(-webkit-min-device-pixel-ratio: 2) {
  h1:after {
    transform: scaleY(0.5);
  }
}

复制代码
分类:
前端
标签:
分类:
前端
标签: