前客戶提的新需求中有文字漸變效果加文字描邊效果，之前只用過單一的，但是組合起來就爆掉了，各種嘗試找出了一種完美解決方案。

第一步，實現文字漸變

這里要用一種 CSS3新出的 屬性： background-clip: text

background-clip 的定義：規定背景的繪制區域；簡而言之，background-clip 就是規定background-color/background-image 背景（色/圖）在盒模型里的作用范圍...

那么使用了 background-clip: text 這個屬性的意思是，以區塊內的文字作為裁剪區域向外裁剪，文字的背景即為區塊的背景，文字之外的區域都將被裁剪掉。

知道了這個特性之后，我們把背景設為圖片背景或者漸變背景之后在只用這個屬性就可以得到一個背景文字效果或者漸變文字效果！

eg :

背景圖

background-clip: text 轉背景文字效果:

漸變效果：

實現了 漸變文字之后我們就該實現文字外邊框了：

第二步，實現文字描邊

-webkit-text-stroke

CSS屬性為文本字符指定了寬 和 顏色 . 它是-webkit-text-stroke-width 和-webkit-text-stroke-color 屬性的縮寫。

• text-stroke-width： 設置或檢索對象中的文字的描邊厚度。
• text-stroke-color：設置或檢索對象中的文字的描邊顏色。

雖然-webkit-text-stroke是webkit內核瀏覽器的私有屬性，但是FireFox也支持這個樣式，唯獨IE瀏覽器不支持。所以在移動端是可以放心使用這個屬性的。

如圖所示，-webkit-text-stroke的第一個字段設置描邊的寬度，第二個設置描邊的顏色。

實現漸變文字描邊

兩種屬性配合使用便可。

ps: text-shadow, border 是無法做到漸變的同時進行描邊的。。。

：測試瀏覽器版本號——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. 邊框外側有圓角而內部無圓角是因為邊框寬度設置比較大，圓角又設置的比較小。有興趣的可以自己實驗一下

擊右上方紅色按鈕關注“web秀”，讓你真正秀起來

前言

好雨知時節，當春乃發生。 隨風潛入夜，潤物細無聲。

春節已經過去，新的一年剛剛開始，小伙伴們，今年你的目標是什么？定個小目標，掙它一個億？分享一下我的目標，是讓大家的web前端能力，更上一層樓。

下面進入主題，看下圖：

這個動畫效果，如果讓你來做，你會選擇什么方式？相信很多小伙伴都會用gif圖片。其實用css實現也很簡單。

如果文章中有不懂的知識點，請點擊文章最下方，推薦文章哦

動畫解析

很明顯這個動畫效果，是上中下結構，所以我們分3部分實現。

1、云：由多個圓拼接而成，并且有上下浮動的動畫效果

2、雨滴：多個，從上而下的動畫效果

3、陰影：橢圓，縮放動畫效果

下面我們按步驟實現

云

用box-shadow制作多個圓，完成拼接，行程完整的云朵。animation，添加動畫，上下浮動。

語法：box-shadow: h-shadow v-shadow blur spread color inset;

注：box-shadow，向框內添加一個或多個陰影。該屬性是由逗號分隔的陰影列表，每個陰影由 2-4 個長度值、可選的顏色值以及可選的 inset 關鍵詞來規定。省略長度的值是 0。

相關推薦CSS3 box-shadow實現背景動畫

.rainy {
 position: absolute;
 top: 30%;
 left: 50%;
}
.rainy:before {
 content: "";
 color: #333;
 position: absolute;
 height: 50px;
 width: 50px;
 top: 30px;
 left: -40px;
 background: #CCC;
 transform: translate(-50%, -50%);
 border-radius: 50%;
 box-shadow: #CCC 65px -15px 0 -5px, 
 #CCC 25px -25px, 
 #CCC 30px 10px, 
 #CCC 60px 15px 0 -10px, 
 #CCC 85px 5px 0 -5px;
 animation: cloudy 5s ease-in-out infinite;
}
@keyframes cloudy {
 50% {
 transform: translate(-50%, -70%);
 }
 100% {
 transform: translate(-50%, -50%);
 }
}

雨滴

雨滴和云一樣，都是用box-shadow來實現，但是雨滴的實現要復雜的多，雨滴數量多，每個雨滴位置的改變。

.rainy {
 position: absolute;
 width: 3px;
 height: 6px;
 top: 30%;
 left: 50%;
 animation: rainy_rain .7s infinite linear;
}
.rainy:before {
 ...
}
@keyframes cloudy {
 ...
}
@keyframes rainy_rain {
 0% {
 box-shadow: 
 rgba(0, 0, 0, 0) -10px 30px, 
 rgba(0, 0, 0, 0) 40px 40px, 
 rgba(0, 0, 0, .3) -50px 75px, 
 rgba(0, 0, 0, .3) 55px 50px, 
 rgba(0, 0, 0, .3) -18px 100px, 
 rgba(0, 0, 0, .3) 12px 95px, 
 rgba(0, 0, 0, .3) -31px 45px, 
 rgba(0, 0, 0, .3) 30px 35px;
 }
 25% {
 box-shadow:
 rgba(0, 0, 0, .3) -10px 45px,
 rgba(0, 0, 0, .3) 40px 60px,
 rgba(0, 0, 0, .3) -50px 90px,
 rgba(0, 0, 0, .3) 55px 65px,
 rgba(0, 0, 0, 0) -18px 120px,
 rgba(0, 0, 0, 0) 12px 120px,
 rgba(0, 0, 0, .3) -31px 70px,
 rgba(0, 0, 0, .3) 30px 60px;
 }
 26% {
 box-shadow:
 rgba(0, 0, 0, .3) -10px 45px,
 rgba(0, 0, 0, .3) 40px 60px,
 rgba(0, 0, 0, .3) -50px 90px,
 rgba(0, 0, 0, .3) 55px 65px,
 rgba(0, 0, 0, 0) -18px 40px,
 rgba(0, 0, 0, 0) 12px 20px,
 rgba(0, 0, 0, .3) -31px 70px,
 rgba(0, 0, 0, .3) 30px 60px;
 }
 50% {
 box-shadow:
 rgba(0, 0, 0, .3) -10px 70px,
 rgba(0, 0, 0, .3) 40px 80px,
 rgba(0, 0, 0, 0) -50px 100px,
 rgba(0, 0, 0, .3) 55px 80px,
 rgba(0, 0, 0, .3) -18px 60px,
 rgba(0, 0, 0, .3) 12px 45px,
 rgba(0, 0, 0, .3) -31px 95px,
 rgba(0, 0, 0, .3) 30px 85px;
 }
 51% {
 box-shadow:
 rgba(0, 0, 0, .3) -10px 70px,
 rgba(0, 0, 0, .3) 40px 80px,
 rgba(0, 0, 0, 0) -50px 45px,
 rgba(0, 0, 0, .3) 55px 80px,
 rgba(0, 0, 0, .3) -18px 60px,
 rgba(0, 0, 0, .3) 12px 45px,
 rgba(0, 0, 0, .3) -31px 95px,
 rgba(0, 0, 0, .3) 30px 85px;
 }
 75% {
 box-shadow:
 rgba(0, 0, 0, .3) -10px 95px,
 rgba(0, 0, 0, .3) 40px 100px,
 rgba(0, 0, 0, .3) -50px 60px,
 rgba(0, 0, 0, 0) 55px 95px,
 rgba(0, 0, 0, .3) -18px 80px,
 rgba(0, 0, 0, .3) 12px 70px,
 rgba(0, 0, 0, 0) -31px 120px,
 rgba(0, 0, 0, 0) 30px 110px;
 }
 76% {
 box-shadow:
 rgba(0, 0, 0, .3) -10px 95px,
 rgba(0, 0, 0, .3) 40px 100px,
 rgba(0, 0, 0, .3) -50px 60px,
 rgba(0, 0, 0, 0) 55px 35px,
 rgba(0, 0, 0, .3) -18px 80px,
 rgba(0, 0, 0, .3) 12px 70px,
 rgba(0, 0, 0, 0) -31px 25px,
 rgba(0, 0, 0, 0) 30px 15px;
 }
 100% {
 box-shadow:
 rgba(0, 0, 0, 0) -10px 120px,
 rgba(0, 0, 0, 0) 40px 120px,
 rgba(0, 0, 0, .3) -50px 75px,
 rgba(0, 0, 0, .3) 55px 50px,
 rgba(0, 0, 0, .3) -18px 100px,
 rgba(0, 0, 0, .3) 12px 95px, 
 rgba(0, 0, 0, .3) -31px 45px, 
 rgba(0, 0, 0, .3) 30px 35px;
 }
}

陰影

陰影實現是最簡單的啦，加上縮放，透明度改變就可以了，當然要和上面的云配合起來，云上，陰影變小，云下，陰影變大。

.rainy:after {
 content: "";
 position: absolute;
 top: 120px;
 left: 50%;
 height: 15px;
 width: 120px;
 background: rgba(0, 0, 0, .5);
 border-radius: 50%;
 transform: translate(-50%, -50%);
 animation: cloudy_shadow 5s ease-in-out infinite;
}
@keyframes cloudy_shadow {
 50% {
 transform: translate(-50%, -50%) scale(0.8);
 background: rgba(0, 0, 0, .2);
 }
 100% {
 transform: translate(-50%, -50%) scale(1);
 background: rgba(0, 0, 0, .5);
 }
}

演示地址：http://demo.javanx.cn/raindrop/index2.html

推薦文章

CSS3 box-shadow實現背景動畫

從淺到深的學習 CSS3陰影(box-shadow)

CSS3最容易混淆屬性transition transform animation translate

公告

喜歡小編的點擊關注，了解更多知識！

源碼地址和源文件下載請點擊下方“了解更多”