最近設計師的風格發生突變，一句話概括就是，能用漸變的地方絕對不用純色。這不，就整出了一個漸變圓角邊框。這漸變好做，圓角好做，漸變圓角也沒問題，可是在加個邊框還是有點坑的。沒辦法，看看怎麼實現吧

border-image 缺陷不支援圓角

首先想到的是 border-image 的實現方式，用一個漸變作為 border-image：

border-image-source: linear-gradient(to right,#08fdd8,#F58549, red);

然而使用完 border-image 之後，border-radius 是無效的，達不到圓角的效果。

你可能想到了藉助 clip-path，但是 clip-path 只能切出外邊的圓角，見下圖：

background-image/background-clip

那麼難道就沒辦法了嗎？不，只要思想不滑坡，辦法總比困難多～，藉助上面標題中的兩位，我們可以完美實現這個效果。background-image 大家應該都不陌生，那麼 background-clip 又是個什麼東東呢？

眾所周知，盒模型中的三個 box：border-box,padding-box,content-box。當我們設定 background-image 時，預設是設定在 border-box 上的。但是藉助 background-clip 我們可以實現將 background-image覆蓋其他盒子，此外，他還支援多個盒子一起設定。這，這真的是太棒了。

於是，我們將content-box放一個白色漸變，在padding-box放一個好看的漸變，就得到如下效果：

巢狀和:after 偽類

那麼，還有別的方案嗎？最容易想到的是巢狀，外面的元素負責漸變，裡面的元素負責純色。偽類的實現原理也是一樣的。這裡就不詳細展開了，參看下面的demo：

animation

有時候，設計師還想在邊框上加一些動畫，雖然我還沒遇到，但是，有備無患嘛，下面是收集的一些例子：

https://codepen.io/luoyjx/pen/dWjxNP

https://codepen.io/akinzmn/pen/OeWoga

https://codepen.io/dominikcichon/pen/Gzw