10個(gè)demo示例學(xué)會(huì)CSS3radial-gradient徑向漸變

一、語(yǔ)法細(xì)節(jié)記不住怎么辦？
實(shí)際開(kāi)發(fā)的時(shí)候，當(dāng)要使用radial-gradient徑向漸變的時(shí)候，腦中會(huì)有大概的語(yǔ)法，但是細(xì)節(jié)卻記不住，于是想快捷找個(gè)案例看看具體怎么用，然后直接套一下。通常一番搜索，會(huì)發(fā)現(xiàn)雖然是個(gè)簡(jiǎn)單需求，但是正好滿足這個(gè)需求的頁(yè)面卻不好找，亂糟糟的。

從策劃到設(shè)計(jì)制作，每一步都追求做到細(xì)膩，制作可持續(xù)發(fā)展的企業(yè)網(wǎng)站。為客戶提供成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、網(wǎng)站策劃、網(wǎng)頁(yè)設(shè)計(jì)、國(guó)際域名空間、網(wǎng)站空間、網(wǎng)絡(luò)營(yíng)銷、VI設(shè)計(jì)、 網(wǎng)站改版、漏洞修補(bǔ)等服務(wù)。為客戶提供更好的一站式互聯(lián)網(wǎng)解決方案,以客戶的口碑塑造優(yōu)易品牌,攜手廣大客戶,共同發(fā)展進(jìn)步。

下次遇到這種場(chǎng)景，直接來(lái)本站搜“徑向漸變”，或者直接搜索“漸變”，就有專門展示radial-gradient徑向漸變基本語(yǔ)法使用案例的文章。文章共展示了10例常見(jiàn)使用案例，相信一定可以覆蓋你的使用場(chǎng)景的。

首先，假設(shè)我們使用同一段HTML作為示意：

<div class="radial-gradient"></div>

二、示例1：最基礎(chǔ)最簡(jiǎn)單使用

CSS如下：

.radial-gradient {
    width: 400px; height: 200px;
    background: radial-gradient(yellow, red);
}

最終效果如下圖：

可見(jiàn)，對(duì)于徑向漸變，在不指定漸變類型以及位置的情況下，其漸變距離和位置是由容器的尺寸決定的。

例如本例之中，容器的寬高比是2:1，最終漸變呈現(xiàn)出來(lái)的形狀也是一個(gè)2:1的橢圓形，并且漸變顏色自動(dòng)終止與容器的邊緣。

原理示意如下：

三、示例2：簡(jiǎn)單的圓形漸變
CSS代碼如下：

.radial-gradient {
    width: 400px; height: 200px;
    background: radial-gradient(circle, yellow, red);
}

其漸變范圍（漸變結(jié)束線）示意如下圖，會(huì)發(fā)現(xiàn)既不是按照寬度來(lái)的，也不是按照高度來(lái)的，是按照最遠(yuǎn)邊角距離作為漸變結(jié)束線的：

其漸變范圍（漸變結(jié)束線）示意如下圖，會(huì)發(fā)現(xiàn)既不是按照寬度來(lái)的，也不是按照高度來(lái)的，是按照最遠(yuǎn)邊角距離作為漸變結(jié)束線的：

要證明上面結(jié)論比較簡(jiǎn)單，我們可以計(jì)算下對(duì)角線一半長(zhǎng)度，為：Math.sqrt(200 200 + 400 400) ≈ 223.6，于是，我們?cè)O(shè)置：

.radial-gradient {
    width: 400px; height: 200px;
    background: radial-gradient(223.6px circle, yellow, red);
}

會(huì)發(fā)現(xiàn)，最終效果和上面的效果截圖幾乎就是一模一樣的。而200px的半徑：

.radial-gradient {
    width: 400px; height: 200px;
    background: radial-gradient(200px circle, yellow, red);
}

取色就會(huì)發(fā)現(xiàn)邊緣顏色差異較大，說(shuō)明默認(rèn)不是按照最短邊來(lái)渲染的。

四、示例3：指定漸變起始點(diǎn)位置
起始點(diǎn)位置可以通過(guò)at來(lái)指定，例如：

.radial-gradient {
    width: 400px; height: 200px;
    background: radial-gradient(circle at 50px 50px, yellow, red);
}

效果如下圖所示：

如果希望漸變是和容器保持一致比例的橢圓，則circle可以缺省，也就是直接radial-gradient(at 50px 50px, yellow, red)也是可以的。

50px 50px我們也可以使用百分比值代替，例如：

.radial-gradient {
    width: 400px; height: 200px;
    background: radial-gradient(circle at 12.5% 25%, yellow, red);
}

效果是一模一樣的。

五、示例4：指定漸變終止點(diǎn)位置
radial-gradient徑向漸變支持4個(gè)關(guān)鍵字可以指定漸變終止點(diǎn)位置，見(jiàn)下表：

根據(jù)上面的示意效果可以看出默認(rèn)值是farthest-corner。

現(xiàn)在，我們對(duì)CSS進(jìn)行調(diào)整，如下：

.radial-gradient {
    width: 400px; height: 200px;
    background: radial-gradient(closest-side circle at 50px 50px, yellow, red);
}

也就是圓形漸變終止于最短邊，結(jié)果效果如下圖：

六、示例5：指定漸變顏色斷點(diǎn)
如果指定多個(gè)顏色，但未指定具體斷點(diǎn)的位置，則這些顏色會(huì)均勻分配0%~100%的漸變區(qū)域，例如，下面4色漸變：

.radial-gradient {
    width: 200px; height: 200px;
    border: 1px solid silver;
    background: radial-gradient(closest-side circle, yellow, orange, red, white);
}

結(jié)果如下圖所示：

但從肉眼視覺(jué)我們是看不出是不是均勻分配漸變區(qū)域，但是我們可以通過(guò)其他方式驗(yàn)證我們的觀點(diǎn)，如下指定顏色斷點(diǎn)位置的CSS：

.radial-gradient2 {
    width: 200px; height: 200px;
    border: 1px solid gray;
    background: radial-gradient(closest-side circle, yellow, orange 33.33%, red 66.666%, white);
}

由于漸變顏色默認(rèn)第一個(gè)顏色位置是0%，最后一個(gè)顏色位置是100%，因此上面yellow和white的斷點(diǎn)位置可以缺省。

然后發(fā)現(xiàn)效果和上面的是一致的：

按下第一個(gè)圈圈漸變，會(huì)讓后面的圈圈瞬間覆蓋在上面。如果兩個(gè)漸變顏色有差異，此時(shí)肉眼可以感覺(jué)到明顯變化；但是實(shí)際操作下來(lái)，就好像后面漸變突然消失一般，這就說(shuō)明上下兩個(gè)漸變實(shí)際上效果是一致的。

七、示例6：橢圓類型的徑向漸變
對(duì)于圓形界面，我們只需要指定一個(gè)半徑就可以了，但是對(duì)于橢圓類型的徑向漸變，我們需要同時(shí)指定橫軸和縱軸的長(zhǎng)度，例如：

.radial-gradient {
    width: 200px; height: 200px;
    background: radial-gradient(50px 100px ellipse, transparent 40px, yellow 41px, red);
}

50px 100px ellipse中第一個(gè)數(shù)值50px表示橫軸半徑，100px表示縱軸半徑，于是這段語(yǔ)句表示繪制一個(gè)長(zhǎng)度100px高度200px的橢圓。

效果如下圖：

需要注意的是，在上面示意CSS代碼中，透明到黃色分界那里有一個(gè)1px的偏差過(guò)渡，也就是transparent 40px, yellow 41px中yellow是41px，而不是設(shè)置的40px，原因在于在Chrome下，如果顏色直接0偏差過(guò)渡，會(huì)有比較嚴(yán)重的鋸齒，類似下圖這樣（背景色設(shè)為#333）：

通過(guò)有1像素或者半像素的過(guò)渡緩沖可以有效避免鋸齒的出現(xiàn)。

八、示例7：可累加的徑向漸變背景圖
我們可以把多個(gè)徑向漸變累加在一起實(shí)現(xiàn)某些效果，例如下面CSS：

.radial-gradient {
    width: 200px; height: 200px;
    background: radial-gradient(50px 100px ellipse, transparent 40px, yellow 41px, red 49px, transparent 50px),
                radial-gradient(30px circle, red, red 29px, transparent 30px);
}

實(shí)現(xiàn)了“邪王真眼”效果：

九、示例8：漸變背景的尺寸控制
配合background-size的尺寸控制和背景重復(fù)特性，我們可以實(shí)現(xiàn)漸變式的復(fù)雜紋理效果：

.radial-gradient {
    width: 200px; height: 200px;
    background: radial-gradient(5px 10px ellipse, transparent 4px, yellow 5px, red 6px, transparent 7px),
                radial-gradient(3px circle, red, red 3px, transparent 4px);
    background-size: 25px;
}

于是就可以看到一大波寫輪眼：

通常我們使用徑向漸變構(gòu)建一些簡(jiǎn)單實(shí)用圖形的時(shí)候，background-size往往是關(guān)鍵屬性，例如，我們要實(shí)現(xiàn)個(gè)水波效果，可以這樣：

.radial-gradient {
    width: 200px; height: 100px;
    background: red;
    position: relative;
}
.radial-gradient:after {
    content: '';
    position: absolute;
    height: 10px;
    left:0 ; right: 0;
    bottom: -10px;
    background: radial-gradient(20px 15px ellipse at top, red 10px, transparent 11px);
    background-size: 20px 10px;
}

然后就有下圖所示的效果：

十、示例9：可重復(fù)的徑向漸變
如果想要實(shí)現(xiàn)可重復(fù)的徑向漸變，亦可以使用原生的repeating-radial-gradient()方法，特別適合實(shí)現(xiàn)從中心擴(kuò)散的光波效果。

然而，相比重復(fù)線性漸變r(jià)epeating-linear-gradient()方法，repeating-radial-gradient()的實(shí)際應(yīng)用場(chǎng)景實(shí)際上很有限。因?yàn)?，?shí)際開(kāi)發(fā)的時(shí)候，我們很少用到從中心擴(kuò)散的光波效果。

除了一些本身就是波紋類型效果，如水波，聲波或者唱片紋理：

如下CSS

.radial-gradient {
    position: relative;
    width: 262px; height: 262px;
    border-radius: 50%;
    background: linear-gradient(30deg, transparent 40%, rgba(42, 41, 40, .85) 40%) no-repeat 100% 0, linear-gradient(60deg, rgba(42, 41, 40, .85) 60%, transparent 60%) no-repeat 0 100%, repeating-radial-gradient(#2a2928, #2a2928 4px, #ada9a0 5px, #2a2928 6px);
    background-size: 50% 100%, 100% 50%, 100% 100%;
}
.radial-gradient:after {
    position: absolute;
    top: 50%; left: 50%;
    margin: -35px;
    border: solid 1px #d9a388;
    width: 68px; height: 68px;
    border-radius: 50%;
    box-shadow: 0 0 0 4px #da5b33, inset 0 0 0 27px #da5b33;
    background: #b5ac9a;
    content: '';
}

十一、示例10：作為border-image的徑向漸變
徑向漸變不僅可以作為background的背景圖，還可以作為border-image的邊框圖使用。

例如：

.radial-gradient {
    width: 100px; height: 100px;
    border: 50px solid;
    border-image: radial-gradient(circle, transparent 50px, yellow 51px, red) 50 stretch;
}

天然鏤空效果，只可惜border-image是無(wú)法和border-radius同時(shí)生效的，否則，border-image可就要牛炸天了。

結(jié)束語(yǔ)

這里推薦一下我的前端學(xué)習(xí)交流群：731771211 ，里面都是學(xué)習(xí)前端的，如果你想制作酷炫的網(wǎng)頁(yè)，想學(xué)習(xí)知識(shí)。自己整理了一份2019最全面前端學(xué)習(xí)資料，從最基礎(chǔ)的HTML+CSS+JS到移動(dòng)端HTML5到項(xiàng)目實(shí)戰(zhàn)的學(xué)習(xí)資料都有整理，送給每一位前端小伙伴，有想學(xué)習(xí)web前端的，或是轉(zhuǎn)行，或是大學(xué)生，還有工作中想提升自己能力的，正在學(xué)習(xí)的小伙伴歡迎加入學(xué)習(xí)。 

文章題目：10個(gè)demo示例學(xué)會(huì)CSS3radial-gradient徑向漸變
文章出自：http://muchs.cn/article36/gciosg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、網(wǎng)站營(yíng)銷、網(wǎng)頁(yè)設(shè)計(jì)公司、服務(wù)器托管、網(wǎng)站設(shè)計(jì)、

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)