今天小編給大家分享一下css背景漸變屬性之徑向漸變效果怎么實現(xiàn)的相關(guān)知識點，內(nèi)容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：國際域名空間、虛擬主機、營銷軟件、網(wǎng)站建設(shè)、汕城網(wǎng)站維護、網(wǎng)站推廣。

徑向漸變可以理解為有了半徑值的漸變，即最終的效果不再是沿著一條直線軸進行漸變。最終實現(xiàn)的效果是圓形或者橢圓形。如下圖所示，就是呈現(xiàn)的一個徑向漸變的效果。

徑向漸變通過使用background中的radial-gradient()方法來實現(xiàn)。它的語法結(jié)構(gòu)與linear-gradient即線性漸變差不多，也可以自定義設(shè)置方向值 顏色值，因為是徑向，所以它還可以設(shè)置半徑值來實現(xiàn)大小的變化

普通語法結(jié)構(gòu):

background:radial-gradient(red,yellow,pink)

/*這個語法中，只在radial-gradient方法中添加了顏色值 所以其它的參數(shù)全部采取默認
方向 采取的默認值是中心的位置 （這里的方向不是指漸變的方向 而是圓心的位置）
形狀 采取的默認值是ellipse(橢圓形) 這里只有兩個參數(shù) ellipse(橢圓形)和circle(圓形) 默認ellipse
因為是徑向漸變 所以顏色的展示是從里到外 如上所示 表示圓心中間顯示的是紅色 然后往外拓展分別是黃色 粉色
*/

如下圖所示，就是最終效果圖

自定義圓心位置的語法結(jié)構(gòu):

background: radial-gradient(at right bottom,red,yellow,pink)

/*使用 at 來定義最終的圓心位置 at后面可以接代表方向的關(guān)鍵字 也可以使用百分值
默認是先設(shè)置水平方向的位置 然后是垂直方向 這里就表示將圓心的位置定義在右下角 
顏色從里到外依次為 red yellow pink
*/

最終效果圖如下所示

自定義形狀 圓心位置的徑向漸變的語法

background: radial-gradient(circle at 50% 50%, red,yellow,pink)
/*這里表示的就是創(chuàng)建一個圓形 且該圓形的圓心位于水平方向50% 垂直方向50%的位置 即居中
顏色從里到外拓展依次為 red yellow pink
*/

最終效果圖如下

自定義徑向大小的徑向漸變效果

background: radial-gradient(150px 110px at 50% 50%,red,yellow,pink)
/*這里表示定義了一個水平半徑為150px 垂直半徑為110px 圓心的位置在水平方向50% 垂直方向50% 即居中
顏色從里到外拓展依次為 red yellow pink
*/

最終效果圖如下

注意：在書寫的時候要注意顏色值之間使用逗號隔開，自定義形狀 自定義徑向大小和顏色值之間也使用逗號隔開，并且在使用漸變效果之前一定要先定義一個容器 定義該容器的寬 高度 這樣效果才會呈現(xiàn)出來

以上四種都是簡單的徑向漸變效果，除了這種，還有更為復(fù)雜的重復(fù)徑向漸變效果。通過repeating-radial-gradient()方法實現(xiàn)

使用該方法實現(xiàn)重復(fù)的徑向漸變效果和上面的普通徑向漸變效果的語法差不多，只不過在原基礎(chǔ)上多了顏色的終止值的設(shè)置，即要設(shè)置指定元素在這個容器中占多大的空間

舉個例子:

width: 300px;
height: 300px;
background: repeating-radial-gradient(circle at 50% 50%, red,red 10px,yellow 10px,yellow 20px,pink 20px,pink 30px);

/*該語法使用repeating-radial-gradient方法 表示創(chuàng)建一個重復(fù)的徑向漸變
這個重復(fù)的徑向漸變的形狀是圓形 圓心的位置在水平方向50% 垂直方向50%的地方 
設(shè)置了三種顏色 red yellow pink 
這三種顏色所占空間都是10px 其中紅色為三種顏色中第一個呈現(xiàn)的顏色 黃色為第二呈現(xiàn) 粉色為第三呈現(xiàn)
因為設(shè)置了容器的大小 所以當(dāng)所有顏色值都使用完之后 仍然沒有填滿整個容器的話 就會自動返回到第一個顏色值 以此循環(huán) 直到填滿整個容器
*/

最終效果如下圖所示

容器的創(chuàng)建，默認是矩形。但是可以使用border-radius方法創(chuàng)建圓形，以此充當(dāng)容器來存儲重復(fù)漸變的效果

width: 300px;
height: 300px;
border-radius: 50%;
background: repeating-radial-gradient(circle at 50% 50%,red, red 10px,yellow 10px, yellow 20px,pink 20px,pink 30px);

/*如上所示 在之前的基礎(chǔ)上定義了容器的形狀 使用border-radius的方法創(chuàng)建了一個圓形*/

最終效果圖如下

注意:要想實現(xiàn)重復(fù)的徑向漸變效果，一定要定義好容器的大小和形狀，還有顏色與顏色所占空間的大小也要根據(jù)實際情況去調(diào)整。顏色值的設(shè)置順序就是最終展示效果的最終設(shè)置，在定義中是從左到右，在最終呈現(xiàn)的效果中就是從里到外

徑向漸變(Radial gradients)由其中心點、邊緣形狀輪廓及位置、色值結(jié)束點（color stops）定義而成。

當(dāng)我們?yōu)橐粋€漸變設(shè)置多個顏色時，它們會平分這個100%的區(qū)域來漸變。當(dāng)然除了百分比，我們也可以使用具體的像素來設(shè)置這個大小。像素設(shè)置的大小指的是從漸變圓心向外延伸的距離。

語法：

background: radial-gradient( [ circle || <length> ] [ at <position> ]? ,| [ ellipse || [<length> | <percentage> ]{2}] [ at <position> ]? ,| [ [ circle | ellipse ] || <extent-keyword> ] [ at <position> ]? ,| at <position> ,<color-stop> [ , <color-stop> ]+ )

position：如缺少，默認為中心點。

shape：漸變的形狀。圓形或橢圓形。默認值為橢圓。

size：漸變的尺寸大小。

color-stop：表示某個確定位置的固定色值。<color>值加上可選的位置值。百分比值0%，或者長度值0，表示漸變中心點；百分比值100%表示漸變射線與邊緣形狀相交的點。 其間的百分比值線性對應(yīng)漸變射線上的點。

extent-keyword：關(guān)鍵字用于描述邊緣輪廓的具體位置。以下為關(guān)鍵字常量：

以上就是“css背景漸變屬性之徑向漸變效果怎么實現(xiàn)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站欄目：css背景漸變屬性之徑向漸變效果怎么實現(xiàn)
本文地址：http://jinyejixie.com/article22/pshdcc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、網(wǎng)站營銷、關(guān)鍵詞優(yōu)化、虛擬主機、域名注冊、企業(yè)網(wǎng)站制作

廣告

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