純 CSS 製作圓角漸層邊框

之前遇到過漸層邊框的需求，當時是產一張圖片，利用 border-image-slice 處理。這次改版再次研究，找到了不用圖片、可以保留透明背景的作法。

TL;DR

1
2
3
4
5
6
7

div {
  border-image: linear-gradient(red, yellow) 30; // border 寬度要和這裡一致
  mask: linear-gradient(black, black);
  border-width: 30px;
  border-radius: 16px;
  border-style: solid;
}

範例效果

div#example { width: 200px; height: 80px; border-image: linear-gradient(red, yellow) 30; border-width: 30px; mask: linear-gradient(black, black); border-radius: 16px; border-style: solid; }

原理

簡單而言，具體要處理的問題是：border-image 和 border-radius 衝突的問題。解決方法就是用 mask，把超出圓角的部分遮住。因為 mask 受到 border-radius 的控制，從而達成我們的目的。