怎麼實現移動端的邊框0.5px？

王铁柱6發表於2024-11-25

在移動端實現 0.5px 的邊框，由於螢幕畫素密度的限制，直接設定 border: 0.5px solid #000; 並不會生效。需要一些技巧來模擬這種效果：

以下幾種方法比較常用：

1. 使用 transform: scale() 縮放:

這是最常用的方法，原理是建立一個1px的邊框，然後將其縮放為0.5px。

.border-05 {
  position: relative;
}

.border-05::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200%; /* 寬度的兩倍 */
  height: 200%; /* 高度的兩倍 */
  border: 1px solid #000;
  transform-origin: top left; /* 從左上角縮放 */
  transform: scale(0.5);
  box-sizing: border-box; /* 包含邊框 */
}

/*  如果只需要某一邊有邊框，可以這樣：*/
.border-bottom-05::before {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    transform-origin: bottom left;
}
  • 優點：相容性好，實現簡單。
  • 缺點：在一些情況下，由於縮放可能會導致邊框顏色變淺，特別是在白色背景上。

2. 使用 linear-gradient() 線性漸變:

利用線性漸變建立一個偽邊框。

.border-05 {
  background-image: linear-gradient(to bottom, #000 0.5px, transparent 0.5px);
}

/*  如果只需要某一邊有邊框，可以調整漸變方向：*/
.border-bottom-05 {
    background-image: linear-gradient(to bottom, transparent calc(100% - 0.5px), #000 calc(100% - 0.5px), #000 100%);
}
  • 優點：顏色不會變淺，控制更精細。
  • 缺點：對於需要四條邊框的情況，程式碼會比較複雜。

3. 使用 SVG:

使用 SVG 可以精確地繪製 0.5px 的線條。

<svg width="100" height="100">
  <rect x="0" y="0" width="100" height="100" stroke="#000" stroke-width="0.5"/>
</svg>
  • 優點：精確度高。
  • 缺點：相對來說比較麻煩，需要額外引入 SVG。

4. 使用偽元素 + box-shadow:

利用 box-shadow 來模擬 0.5px 的邊框。

.border-05 {
  position: relative;
}

.border-05:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 0 0.5px #000; /* 內陰影模擬邊框 */
}
  • 優點：實現簡單，顏色不會變淺。
  • 缺點：只適用於內邊框。

選擇哪種方法取決於具體的需求和場景：

  • 對於簡單的單一邊框或只需要相容性，transform: scale() 是最方便的選擇。
  • 對於需要精確顏色和多邊框的情況，linear-gradient() 更好。
  • 對於需要更精細的控制或複雜圖形，SVG 是最佳選擇。
  • 如果只需要內邊框，box-shadow 也是一個不錯的選擇。

記住要根據實際情況進行調整和測試，選擇最適合你的方案。 尤其要注意高畫質屏下 transform: scale() 方法可能導致邊框模糊，可以嘗試配合 background-clip 使用。

相關文章