1px邊框解決方案總結

devman發表於2018-05-12

1px問題產生的原因

從移動端的角度說個具體的場景，以iphone6為例。

iphone6的螢幕寬度為375px，設計師做的視覺稿一般是750px，也就是2x，這個時候設計師在視覺稿上畫了1px的邊框，於是你就寫了“border-width:1px”，so...1px邊框問題產生了。

對設計師來說它的1px是相對於750px的（物理畫素），對你來說你的1px是相對於375px的（css畫素）“實際上你應該是border-width:0.5px”。

具體方案

知道了問題產生的原因，辣麼就好弄解決方案啦，O(∩_∩)O。

用小數寫邊框

媒體查詢，加小數的寫法

.border { border: 1px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .border { border: 0.5px solid #999 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
    .border { border: 0.333333px solid #999 }
}
複製程式碼
  • 優點：方便噻
  • 缺點: 安卓與低版本IOS不適用, 這個或許是未來的標準寫法

tranform加偽類標籤

利用偽類標籤，更具父級定位，大小更具媒體查詢縮放實現效果（注意別忘記了“transform-origin: left top;”）

<span class="border-1px">1畫素邊框問題</span>
複製程式碼
// less
.border-1px{
  position: relative;
  &::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 200%;
    border:1px solid red;
    color: red;
    height: 200%;
    -webkit-transform-origin: left top;
    transform-origin: left top;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    pointer-events: none; /* 防止點選觸發 */
    box-sizing: border-box;
    @media screen and (min-device-pixel-ratio:3),(-webkit-min-device-pixel-ratio:3){
      width: 300%;
      height: 300%;
      -webkit-transform: scale(0.33);
      transform: scale(0.33);
    }
  }
}
複製程式碼

1px邊框解決方案總結

需要注意input button是沒有:before, :after偽元素的

  • 優點: 其實不止是圓角, 其他的邊框也可以這樣做出來
  • 缺點: 程式碼量也很大, 佔據了偽元素, 容易引起衝突

box-shadow

利用陰影來模擬邊框

.border-1px{
  box-shadow: 0px 0px 1px 0px red inset;
}
複製程式碼

2倍屏

1px邊框解決方案總結

3倍螢幕

1px邊框解決方案總結

border-image

弄出1px畫素邊框的實質是弄出0.5px這樣的邊框，所以我們可以利用類似於這樣的圖片，使得“border-image-slice”為2，那麼實際上邊框有一半是透明的，即可得到我們想要的“1px邊框”

1px邊框解決方案總結

<div class="test">
    1畫素邊框
</div>
複製程式碼
.test{
    border: 1px solid transparent;
    border-image: url('./border-1px.png') 2 repeat;
}
複製程式碼

1px邊框解決方案總結

  • 修改顏色麻煩, 需要替換圖片
  • 圓角需要特殊處理，並且邊緣會模糊

background

這方法基本不用（麻煩O(∩_∩)0），不過還是記錄一下

.background-image-1px {
background: url(../img/line.png) repeat-x left bottom;
-webkit-background-size: 100% 1px;
background-size: 100% 1px;
}
複製程式碼

總結

從相容性和靈活性來考慮，個人還是推薦tranform加偽類標籤的寫法，節約時間成本。

參考資料

相關文章