如何實(shí)現(xiàn)下面這個(gè)漸變的邊框效果：
這個(gè)問題本身不難，實(shí)現(xiàn)的方法也有一些滩字，主要是有一些細(xì)節(jié)需要注意咽安。
border-image
border-image 是 CSS 規(guī)范 CSS Backgrounds and Borders Module Level 3 (最新一版的關(guān)于 background 和 border 的官方規(guī)范) 新增的一個(gè)屬性值。
顧名思義闪幽，我們可以給 border 元素添加 image料皇，類似于 background-image谓松，可以是圖片也可以是漸變星压，不再局限于純色践剂。
使用 border-image 實(shí)現(xiàn)漸變邊框
有了 border-image 之后，實(shí)現(xiàn)漸變邊框變得很方便
不過多介紹 border-image 的語法娜膘，讀者需要自行了解一下逊脯。
實(shí)現(xiàn)如下：
<``div class="border-image"></``div``>
3
4
5
6
7
8
|
.border-image {
width``: ``200px``;
height``: ``100px``;
border-radius: ``10px``;
border-image-source: linear-gradient(``45``deg, gold, deeppink);
border-image-slice: ``1``;
border-image-repeat: stretch;
}
|
上面關(guān)于 border-image 的三個(gè)屬性可以簡寫為 border-image: linear-gradient(45deg, gold, deeppink) 1;
得到如下結(jié)果：
border-radius 失效
仔細(xì)看上面的 Demo，設(shè)置了 border-radius: 10px 但是實(shí)際表現(xiàn)沒有圓角竣贪。使用 border-image 最大的問題在于军洼，設(shè)置的 border-radius 會(huì)失效。
我們無法得到一個(gè)帶圓角的漸變邊框演怎。原因匕争，查看官方規(guī)范 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.
為此，我們得另辟蹊徑或者稍加改進(jìn)爷耀，得到帶圓角的漸變邊框甘桑。
法一：background-image + 偽元素
第一種方法，我們不再使用 border-image ，而是使用 background-image + 偽元素 的方案跑杭，這也是在 border-image 規(guī)范沒有出現(xiàn)最常用的方法铆帽。
非常簡單，簡單的示意圖如下：
利用 background-image 實(shí)現(xiàn)一個(gè)漸變背景德谅，再通過疊加一個(gè)白色背景使之形成一個(gè)漸變邊框爹橱。
CodePen Demo -- bg + overflow 實(shí)現(xiàn)漸變邊框
缺點(diǎn)
這個(gè)方案有兩個(gè)問題，第一個(gè)是多使用了兩個(gè)元素(當(dāng)然在這里是 ::before 和 ::after)窄做，其次最致命的是愧驱，如果要求邊框內(nèi)的背景是透明的，此方案便行不通了浸策。
法二冯键，使用 background-clip 實(shí)現(xiàn)
第二種方法，使用 background-clip: content-box 以及 background-clip: border-box 配合使用庸汗。
background-clip：background-clip 設(shè)置元素的背景（背景圖片或顏色）是否延伸到邊框下面惫确。它的部分取值和 box-sizing 類似。其中蚯舱，
-
background-clip: border-box表示設(shè)置的背景background-image將延伸至邊框 -
background-clip: content-box表示設(shè)置的背景background-image被裁剪至內(nèi)容區(qū)（content box）外沿
這里改化，我們使用設(shè)置兩個(gè) background-image，設(shè)置兩個(gè) background-clip 枉昏，并且將 border 設(shè)置為透明即可：
核心 CSS：
|
1
2
3
4
5
6
7
8
9
10
|
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;
}
|
因?yàn)橛玫搅?background-clip: border-box陈肛，所以還需要 background-origin: border-box 使圖案完整顯示，可以嘗試下關(guān)掉這個(gè)屬性兄裂，即可明白為什么需要這樣做句旱。
CodePen Demo -- background-clip 實(shí)現(xiàn)漸變邊框
缺點(diǎn)
與第一種方法類似，如果要求邊框內(nèi)的背景是透明的晰奖，此方案便行不通了谈撒。
法三：border-image + overflow: hidden
這個(gè)方法也很好理解，既然設(shè)置了 background-image 的元素的 border-radius 失效匾南。那么啃匿，我們只需要給它加一個(gè)父容器，父容器設(shè)置 overflow: hidden + border-radius 即可：
|
1
|
<``div class="border-image-overflow"></``div``>
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
.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(``45``deg, gold, deeppink) ``1``;
}
|
效果如下：
當(dāng)然蛆楞，這里還是多借助了一個(gè)元素實(shí)現(xiàn)溯乒。還有一種方法，可以不使用多余元素實(shí)現(xiàn)：
法四：border-image + clip-path
設(shè)置了 background-image 的元素的 border-radius 失效豹爹。但是在 CSS 中裆悄，還有其它方法可以產(chǎn)生帶圓角的容器，那就是借助 clip-path臂聋。
[clip-path](https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path)光稼，一個(gè)非常有意思的 CSS 屬性崖技。
clip-path CSS 屬性可以創(chuàng)建一個(gè)只有元素的部分區(qū)域可以顯示的剪切區(qū)域。區(qū)域內(nèi)的部分顯示钟哥，區(qū)域外的隱藏迎献。剪切區(qū)域是被引用內(nèi)嵌的URL定義的路徑或者外部 SVG 的路徑。
簡而言之腻贰，這里吁恍，我們只需要在 border-image 的基礎(chǔ)上，再利用 clip-path 裁剪出一個(gè)帶圓角的矩形容器即可：
|
1
|
<``div class="border-image-clip-path"></``div``>
|
|
1
2
3
4
5
6
7
8
|
.border-image-clip-path {
position``: ``relative``;
width``: ``200px``;
height``: ``100px``;
border``: ``10px solid``;
border-image: linear-gradient(``45``deg, gold, deeppink) ``1``;
clip-path: ``inset``(``0 round ``10px``);
}
|
解釋一下：clip-path: inset(0 round 10px) 播演。
- clip-path: inset() 是矩形裁剪
- inset() 的用法有多種冀瓦，在這里
inset(0 round 10px)可以理解為，實(shí)現(xiàn)一個(gè)父容器大行纯尽（完全貼合翼闽，垂直水平居中于父容器）且border-radius: 10px的容器，將這個(gè)元素之外的所有東西裁剪掉（即不可見）洲炊。
非常完美感局，效果如下：
當(dāng)然，還可以利用 filter: hue-rotate()順手再加個(gè)漸變動(dòng)畫：
你可以在我 CSS-Inspiration 看到這個(gè)例子：
CSS-Inspiration -- 使用 clip-path 和 border-image 實(shí)現(xiàn)圓角漸變邊框
最后
好了暂衡，本文到此結(jié)束询微，希望對(duì)你有幫助 :)
更多精彩 CSS 技術(shù)文章匯總在我的 Github -- iCSS ，持續(xù)更新狂巢，歡迎點(diǎn)個(gè) star 訂閱收藏撑毛。
更多精彩有趣的 CSS 效果，歡迎來這里看看 CSS 靈感 -- 在這里找到寫 CSS 的靈感唧领。
