巧妙實現帶圓角的漸變邊框

如何實現下面這個漸變的邊框效果：

這個問題自己不難，實現的方法也有一些，主要是有一些細節須要注意。

border-image

border-image 是 CSS 規範 CSS Backgrounds and Borders Module Level 3 (最新一版的關於 background 和 border 的官方規範) 新增的一個屬性值。

顧名思義，咱們能夠給 border 元素添加 image，相似於 background-image，能夠是圖片也能夠是漸變，再也不侷限於純色。

使用 border-image 實現漸變邊框

有了 border-image 以後，實現漸變邊框變得很方便

不過多介紹 border-image 的語法，讀者須要自行了解一下。

實現以下：

<div class="border-image"></div>
複製代碼

.border-image {
    width: 200px;
    height: 100px;
    border-radius: 10px;
    border-image-source: linear-gradient(45deg, gold, deeppink);
    border-image-slice: 1;
    border-image-repeat: stretch;
}
複製代碼

上面關於 border-image 的三個屬性能夠簡寫爲 border-image: linear-gradient(45deg, gold, deeppink) 1;

獲得以下結果：

border-radius 失效

仔細看上面的 Demo，設置了 border-radius: 10px 可是實際表現沒有圓角。使用 border-image 最大的問題在於，設置的 border-radius 會失效。

咱們沒法獲得一個帶圓角的漸變邊框。緣由，查看官方規範 W3C 解釋以下：

A box's backgrounds, but not its border-image, are clipped to the appropriate curve (as determined by ‘background-clip’). Other effects that clip to the border or padding edge (such as ‘overflow’ other than ‘visible’) also must clip to the curve. The content of replaced elements is always trimmed to the content edge curve. Also, the area outside the curve of the border edge does not accept mouse events on behalf of the element.

爲此，咱們得另闢蹊徑或者稍加改進，獲得帶圓角的漸變邊框。

法一：background-image + 僞元素

第一種方法，咱們再也不使用 border-image ，而是使用 background-image + 僞元素 的方案，這也是在 border-image 規範沒有出現最經常使用的方法。

很是簡單，簡單的示意圖以下：

利用 background-image 實現一個漸變背景，再經過疊加一個白色背景使之造成一個漸變邊框。

CodePen Demo -- bg + overflow 實現漸變邊框

缺點

這個方案有兩個問題，第一個是多使用了兩個元素(固然在這裏是 ::before 和 ::after)，其次最致命的是，若是要求邊框內的背景是透明的，此方案便行不通了。

法二，使用 background-clip 實現

第二種方法，使用 background-clip: content-box 以及 background-clip: border-box 配合使用。

background-clip：background-clip 設置元素的背景（背景圖片或顏色）是否延伸到邊框下面。它的部分取值和 box-sizing 相似。其中，

• background-clip: border-box 表示設置的背景 background-image 將延伸至邊框
• background-clip: content-box 表示設置的背景 background-image 被裁剪至內容區（content box）外沿

這裏，咱們使用設置兩個 background-image，設置兩個 background-clip ，而且將 border 設置爲透明便可：

核心 CSS：

div {
    width: 200px;
    height: 100px;
    border: solid 10px transparent;
    border-radius: 10px;
    background-image: linear-gradient(#fee, #fee),
        linear-gradient(to right, green, gold);
    background-origin: border-box;
    background-clip: content-box, border-box;
}
複製代碼

由於用到了 background-clip: border-box，因此還須要 background-origin: border-box 使圖案完整顯示，能夠嘗試下關掉這個屬性，便可明白爲何須要這樣作。

CodePen Demo -- background-clip 實現漸變邊框

缺點

與第一種方法相似，若是要求邊框內的背景是透明的，此方案便行不通了。

法三：border-image + overflow: hidden

這個方法也很好理解，既然設置了 background-image 的元素的 border-radius 失效。那麼，咱們只須要給它加一個父容器，父容器設置 overflow: hidden + border-radius 便可：

<div class="border-image-overflow"></div>
複製代碼

.border-image-pesudo {
    position: relative;
    width: 200px;
    height: 100px;
    border-radius: 10px;
    overflow: hidden;
}

.border-image-pesudo::before {
    content: "";
    position: absolute;
    width: 200px;
    height: 100px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 10px solid;
    border-image: linear-gradient(45deg, gold, deeppink) 1;
} 
複製代碼

效果以下：

固然，這裏仍是多借助了一個元素實現。還有一種方法，能夠不使用多餘元素實現：

法四：border-image + clip-path

設置了 background-image 的元素的 border-radius 失效。可是在 CSS 中，還有其它方法能夠產生帶圓角的容器，那就是藉助 clip-path。

clip-path，一個很是有意思的 CSS 屬性。

clip-path CSS 屬性能夠建立一個只有元素的部分區域能夠顯示的剪切區域。區域內的部分顯示，區域外的隱藏。剪切區域是被引用內嵌的URL定義的路徑或者外部 SVG 的路徑。

簡而言之，這裏，咱們只須要在 border-image 的基礎上，再利用 clip-path 裁剪出一個帶圓角的矩形容器便可：

<div class="border-image-clip-path"></div>
複製代碼

.border-image-clip-path {
    position: relative;
    width: 200px;
    height: 100px;
    border: 10px solid;
    border-image: linear-gradient(45deg, gold, deeppink) 1;
    clip-path: inset(0 round 10px);
}
複製代碼

解釋一下：clip-path: inset(0 round 10px) 。

• clip-path: inset() 是矩形裁剪
• inset() 的用法有多種，在這裏 inset(0 round 10px) 能夠理解爲，實現一個父容器大小（徹底貼合，垂直水平居中於父容器）且 border-radius: 10px 的容器，將這個元素以外的全部東西裁剪掉（即不可見）。

很是完美，效果以下：

固然，還能夠利用 filter: hue-rotate()順手再加個漸變更畫：

你能夠在我 CSS-Inspiration 看到這個例子：

CSS-Inspiration -- 使用 clip-path 和 border-image 實現圓角漸變邊框

最後

好了，本文到此結束，但願對你有幫助 :)

更多精彩 CSS 技術文章彙總在個人 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏。

更多精彩有趣的 CSS 效果，歡迎來這裏看看 CSS 靈感 -- 在這裏找到寫 CSS 的靈感。

若是還有什麼疑問或者建議，能夠多多交流，原創文章，文筆有限，才疏學淺，文中如有不正之處，萬望告知。