注：測試瀏覽器版本號——chrome 75.0.3770.80；opera 60.0.3255.109；firefox 67.0；ie 11。

對于普通的邊框漸變，其作用于圓角邊框漸變時會覆蓋掉圓角的效果，這不是我們預(yù)期的，所以我們需要尋找其他的方法解決這個需求。

當(dāng)盒子同時設(shè)置圓角(radius)和漸變時，圓角失效，因此不能用這種方式來實現(xiàn)圓角邊框顏色漸變。但我們可以使用下面三個方法實現(xiàn)

1 使用背景重疊

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

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

border-box 從邊框開始；

padding-box(默認(rèn)) 從內(nèi)邊距開始；

content-box 從內(nèi)容開始。

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

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

border-box(默認(rèn)) 填充至邊框；

padding-box 填充至內(nèi)邊距；

content-box 填充之內(nèi)容；

text 作為字體前景色。

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

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

contain 將圖像擴(kuò)大至適應(yīng)最短的邊，剩余部分默認(rèn)重復(fù)圖像

cover 將圖像擴(kuò)大至適應(yīng)最長的邊，圖像可能顯示不完整

length 兩個值依次設(shè)置圖像寬和高，未設(shè)置則為auto

percentage 兩個百分比依次設(shè)置圖像寬和高，未設(shè)置則為auto

auto 默認(rèn)設(shè)置

background-size: contain | cover | | | auto(默認(rèn))

以下面代碼為例

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同樣可以設(shè)置多個值，用","隔開，每個值對應(yīng)的是background-image的值。

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

話不多說，上代碼

div {

width: 900px;

height: 300px;

margin: 10px;

padding: 30px;

border-radius: 50px; /*設(shè)置圓角*/

border:50px solid transparent; /*設(shè)置邊框顏色透明，確保背景漸變色顯示*/

background-origin:border-box; /*從邊框開始背景圖*/

background-clip: padding-box, border-box; /*設(shè)置第一個背景和第二個背景的范圍*/

background-size: cover;

/*由于背景圖像不能設(shè)置純色，所以可以使用下面的方式設(shè)置純色*/

background-image:linear-gradient(#fff, #fff),linear-gradient(yellow, green);

}

效果如圖

2 使用偽元素

讓我們先來看代碼

div {

width: 900px;

height: 300px;

margin: 10px;

padding: 30px;

border-radius: 50px; /*設(shè)置圓角*/

border:50px solid transparent; /*設(shè)置邊框顏色透明，確保背景漸變色顯示*/

background-clip: padding-box; /*確保此北京范圍為內(nèi)邊距內(nèi)*/

background: #fff;

}

div::after {

position: absolute;

/*以div的content為基準(zhǔn)往外擴(kuò)border的寬度*/

top: -50px;

bottom: -50px;

left: -50px;

right: -50px;

border-radius: 50px;

/*設(shè)置偽元素背景漸變色*/

background-image: linear-gradient(yellow, green);

content: '';

/*利用層疊將div部分背景置頂*/

z-index: -1;

}

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

3 使用遮罩

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

具體代碼如下：

/*內(nèi)部div樣式*/

.inside {

width: 960px;

height: 360px;

margin: 10px;

padding: 0px;

border-radius: 50px; /*設(shè)置圓角*/

border:50px solid transparent; /*設(shè)置邊框顏色透明，確保背景漸變色顯示*/

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進(jìn)行漸變色的設(shè)置可能會出現(xiàn)不符預(yù)期的效果。

2、邊框外側(cè)有圓角而內(nèi)部無圓角是因為邊框?qū)挾仍O(shè)置比較大，圓角又設(shè)置的比較小。有興趣的可以自己實驗一下

總結(jié)

以上是生活随笔為你收集整理的html圆角边框背景颜色,CSS之圆角边框渐变的实现的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。