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

之前《CSS之漸變效果的實現》中有講到邊框顏色漸變，但是只有講最普通的邊框漸變，其作用于圓角邊框漸變時會覆蓋掉圓角的效果，這不是我們預期的，所以我們需要尋找其他的方法解決這個需求。

當盒子同時設置圓角（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. 邊框外側有圓角而內部無圓角是因為邊框寬度設置比較大，圓角又設置的比較小。有興趣的可以自己實驗一下

用技巧會讓人變的越來越懶，沒錯，我就是想讓你變懶。

下面是我收集的CSS高級技巧，希望你懶出境界。

黑白圖像

這段代碼會讓你的彩色照片顯示為黑白照片，是不是很酷？

img{
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}

效果圖：

頁面頂部陰影

下面這個簡單的 CSS3 代碼片段可以給網頁加上漂亮的頂部陰影效果：

body:before {
 content: "";
 position: fixed;
 top: -10px;
 left: 0;
 width: 100%;
 height: 10px;
 -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
 -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
 box-shadow: 0px 0px 10px rgba(0,0,0,.8);
 z-index: 100;
}

效果圖：

給 body 添加行高

你不需要分別添加 line-height 到每個p,h標記等。只要添加到 body 即可：

body {

line-height: 1;

}

這樣文本元素就可以很容易地從 body 繼承。

CSS3 線性漸變

為了創建一個線性漸變，你必須至少定義兩種顏色結點。顏色結點即你想要呈現平穩過渡的顏色。同時，你也可以設置一個起點和一個方向（或一個角度）。

#grad {
 background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
 background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
 background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
 background: linear-gradient(red, blue); /* 標準的語法 */
}

效果圖：

突然發現紅到藍也太丑了點，換一個好看一點的，紅到綠:

字體陰影

h1
{	text-shadow: 5px 5px 5px #FF0000;
}

CSS3 過渡

div
{
	width:100px;
	height:100px;
	background:red;
	transition:width 2s;
	-webkit-transition:width 2s; /* Safari */
}
div:hover
{
	width:300px;
}

效果如圖：

今天的代碼寫得我老闊疼，雖然CSS還有很多很多高級用法，但精力有限，因此今天的分享就到這里啦，需要詳細代碼可留言或私信我哦~