注：測試瀏覽器版本號——chrome 75.0.3770.80；opera 60.0.3255.109；firefox 67.0；ie 11。
對于普通的邊框漸變，其作用于圓角邊框漸變時會覆蓋掉圓角的效果，這不是我們預期的，所以我們需要尋找其他的方法解決這個需求。


當盒子同時設置圓角（radius）和漸變時，圓角失效，因此不能用這種方式來實現圓角邊框顏色漸變。但我們可以使用下面三個方法實現

1 使用背景重疊

在此之前我們先來看看三個跟背景有關的屬性background-origin,background-clip,background-size。

background-origin表示的是背景起始位置，其三個值如下，依次是

border-box 從邊框開始；
padding-box(默認) 從內邊距開始；
content-box 從內容開始。

background-origin: border-box | padding-box(默認) | content-box

background-clip表示的是背景填充位置，其四個值如下，依次是

border-box(默認) 填充至邊框；
padding-box 填充至內邊距；
content-box 填充之內容；
text 作為字體前景色。

background-clip: border-box(默認) | padding-box | content-box | text

background-size表示的是背景尺寸，其五個值如下，依次是

contain 將圖像擴大至適應最短的邊，剩余部分默認重復圖像
cover 將圖像擴大至適應最長的邊，圖像可能顯示不完整
length 兩個值依次設置圖像寬和高，未設置則為auto
percentage 兩個百分比依次設置圖像寬和高，未設置則為auto
auto 默認設置

background-size: contain | cover | <length> | <percentage> | auto(默認)

以下面代碼為例

div {
 width: 900px;
 height: 300px;
 margin: 10px;
 padding: 30px;
 border:50px solid transparent;
 background-origin:border-box;
 background-clip: content-box,padding-box, border-box;
 background-size: contain,50px 50px,cover;
 background-image:url("css.jpg"),linear-gradient(yellow, green),url("css.jpg");
}

效果如圖


由上面的例子我們可以看出：

1、background-image可以多次添加圖片或者漸變，需要用","隔開按照添加順序依次由上往下層疊，簡單來講就是誰先聲明，誰層級高。
2、background-origin,background-clip,background-size同樣可以設置多個值，用","隔開，每個值對應的是background-image的值。

有了上述的知識，我們現在可以實現我們的需求了，其主要原理是利用背景重疊，第一個背景設置范圍為padding和content，第二個背景設置范圍為border，padding和content，那么第二個背景只有border顯示，其中padding和content被第一個背景覆蓋。

話不多說，上代碼
div {
 width: 900px;
 height: 300px;
 margin: 10px;
 padding: 30px;
 border-radius: 50px; /*設置圓角*/
 border:50px solid transparent; /*設置邊框顏色透明，確保背景漸變色顯示*/
 background-origin:border-box; /*從邊框開始背景圖*/
 background-clip: padding-box, border-box; /*設置第一個背景和第二個背景的范圍*/
 background-size: cover;
 /*由于背景圖像不能設置純色，所以可以使用下面的方式設置純色*/
 background-image:linear-gradient(#fff, #fff),linear-gradient(yellow, green); 
}

效果如圖



2 使用偽元素

讓我們先來看代碼

div {
 width: 900px;
 height: 300px;
 margin: 10px;
 padding: 30px;
 border-radius: 50px; /*設置圓角*/
 border:50px solid transparent; /*設置邊框顏色透明，確保背景漸變色顯示*/
 background-clip: padding-box; /*確保此北京范圍為內邊距內*/
 background: #fff;
}
div::after {
 position: absolute;
 /*以div的content為基準往外擴border的寬度*/
 top: -50px; 
 bottom: -50px; 
 left: -50px;
 right: -50px;
 border-radius: 50px;
 /*設置偽元素背景漸變色*/
 background-image: linear-gradient(yellow, green);
 content: '';
 /*利用層疊將div部分背景置頂*/
 z-index: -1; 
}

效果如下圖，與方法1中效果相同

3 使用遮罩

使用遮罩，顧名思義就是在div外面加一層div，其大小正好比里面的div大border的寬度，通過外面div的背景漸變來模擬圓角邊框漸變。

具體代碼如下：

/*內部div樣式*/
.inside {
 width: 960px;
 height: 360px;
 margin: 10px;
 padding: 0px;
 border-radius: 50px; /*設置圓角*/
 border:50px solid transparent; /*設置邊框顏色透明，確保背景漸變色顯示*/
 background-origin:border-box; /*從邊框開始背景圖*/
 background-image: linear-gradient(yellow, green);
}
/*外部div樣式*/
.outside {
 background: #fff;
 width: calc(100% - 60px);
 height: calc(100% - 60px);
 padding: 30px;
}

效果如下圖，與方法1中效果相同


注意

在實驗過程中有以下幾點需要注意：

1、屬性background-origin,background-clip,background-size針對于background-image生效，如果使用background進行漸變色的設置可能會出現不符預期的效果。
2、邊框外側有圓角而內部無圓角是因為邊框寬度設置比較大，圓角又設置的比較小。有興趣的可以自己實驗一下