移動端半像素邊框實現思路

要實現半像素邊框，可能咱們首先想到的是 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/半像素邊框實現思路