移动端半像素边框实现思路

要实现半像素边框，可能咱们首先想到的是 border-width:0.5px ,但并非全部手机浏览器都能识别border-width:0.5px ;

注：关于0.5px 并非说 css 的 border-width 值不支持0.5px，而是显示状态受屏幕分辨率的影响。ios8和winphone 8的设备对高清屏作了特殊处理，支持显示border-width:0.5px，android 几乎全部的机型不支持显示0.5px的边框。

储备知识点：须要先了解devicePixelRatio和border-image

• 设备像素比devicePixelRatio简单介绍
• CSS3 border-image详解、应用及jQuery插件

实现方法①： transform: scale(0.5) 实现

补充：scale和zoom区别

• zoom的缩放是相对于左上角的；而scale默认是居中缩放，能够经过transform-origin修改基准点
• zoom的缩放改变了元素占据的空间大小（先布局后变换的，变换不会对布局产生影响）；而scale的缩放占据的原始尺寸不变，页面布局不会发生变化（它先缩放，后计算布局）
• 对文字的缩放规则不一致。zoom缩放依然受限于最小12像素中文大小限制；而scale就是纯粹的对图形进行比例控制，文字50%原来尺寸
• 兼容性问题。firefox下不支持zoom；scale针对IE9+

1.用height:1px的div，而后根据媒体查询设置transform:scaleY(0.5);

.box{
      height:1px;
      background:#000;
      transform: scaleY(0.5);
      -webkit-transform: scaleY(0.5);
      transform-origin:0 0;
      -webkit-transform-origin:0 0;
      overflow: hidden;
}

2.用::after和::befor,设置border-bottom:1px solid #000,而后在缩放-webkit-transform: scaleY(0.5);

.box::after{
      content:'';
      width:100%;
      display: inline-block;
      border-bottom:1px solid #000;
      transform: scaleY(0.5);
      -webkit-transform: scaleY(0.5);
}

3.用::after设置border：1px solid #000; width:200%; height:200%,而后再缩放scaleY(0.5); 优势能够实现圆角，比较好的用法，缺点是点击涉及层级问题。

@mixin border_half($color: $borderColor, $radius: 0){
  position: relative;
  &:after{
    content: '';
    width: 200%;
    height: 200%;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    border: 1px solid $color;
    border-radius: $radius;
    -webkit-transform: scale(0.5,0.5);
    transform: scale(0.5,0.5);
    transform-origin: top left;
    -webkit-transform-origin: top left;
  }
}

 

实现方法②： border-image 图片

 缺定：须要定制图片颜色，不能实现圆角，不灵活，可是不涉及层级的问题。

/*参考文章：https://github.com/AlloyTeam/Mars/blob/master/solutions/border-1px.md  */
    .box{
      border-width: 1px;
      border-style: solid;
      width: 200px;
      height: 100px;
      /* -webkit-border-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFAQMAAAC3obSmAAAABlBMVEUAAADu7u6BVFV4AAAAAXRSTlMAQObYZgAAAA5JREFUCNdj+MHQAYY/ABGyA4nEIg1TAAAAAElFTkSuQmCC) 2 stretch; */
      -webkit-border-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFAQMAAAHApoQwAAAABlBMVEX///8mJiZ40e/1AAAAAXRSTlMAQObYZgAAABlJREFUCB1jbmBuYD4AxA7MC4A0CHcwuwAARL4GLlsABegAAAAASUVORK5CYII=) 2 stretch;
    }

　　

源码地址：https://github.com/zuobaiquan/css3/tree/master/半像素边框实现思路