Web前端CSS實現(xiàn)帶圓角的漸變邊框的方法

CSS如何實現(xiàn)帶圓角的漸變邊框？下面本篇文章給大家介紹一下使用CSS巧妙實現(xiàn)帶圓角的漸變邊框的幾種方法。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有所幫助。

使用 border-image 實現(xiàn)漸變邊框

有了 border-image 之后，實現(xiàn)漸變邊框變得很方便

實現(xiàn)如下：

.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;

background-image + 偽元素

我們不再使用 border-image ，而是使用 background-image + 偽元素 的方案，這也是在border-image 規(guī)范沒有出現(xiàn)最常用的方法。

非常簡單，簡單的示意圖如下：

利用 background-image 實現(xiàn)一個漸變背景，再通過疊加一個白色背景使之形成一個漸變邊框。