今天小編給大家分享一下css背景漸變屬性之徑向漸變效果怎么實(shí)現(xiàn)的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡(jiǎn)單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：國(guó)際域名空間、虛擬主機(jī)、營(yíng)銷軟件、網(wǎng)站建設(shè)、汕城網(wǎng)站維護(hù)、網(wǎng)站推廣。
徑向漸變可以理解為有了半徑值的漸變，即最終的效果不再是沿著一條直線軸進(jìn)行漸變。最終實(shí)現(xiàn)的效果是圓形或者橢圓形。如下圖所示，就是呈現(xiàn)的一個(gè)徑向漸變的效果。
徑向漸變通過使用background中的radial-gradient()方法來實(shí)現(xiàn)。它的語法結(jié)構(gòu)與linear-gradient即線性漸變差不多，也可以自定義設(shè)置方向值 顏色值，因?yàn)槭菑较?，所以它還可以設(shè)置半徑值來實(shí)現(xiàn)大小的變化
普通語法結(jié)構(gòu):
background:radial-gradient(red,yellow,pink) /*這個(gè)語法中，只在radial-gradient方法中添加了顏色值 所以其它的參數(shù)全部采取默認(rèn) 方向 采取的默認(rèn)值是中心的位置 （這里的方向不是指漸變的方向 而是圓心的位置） 形狀 采取的默認(rèn)值是ellipse(橢圓形) 這里只有兩個(gè)參數(shù) ellipse(橢圓形)和circle(圓形) 默認(rèn)ellipse 因?yàn)槭菑较驖u變 所以顏色的展示是從里到外 如上所示 表示圓心中間顯示的是紅色 然后往外拓展分別是黃色 粉色 */
如下圖所示，就是最終效果圖
自定義圓心位置的語法結(jié)構(gòu):
background: radial-gradient(at right bottom,red,yellow,pink) /*使用 at 來定義最終的圓心位置 at后面可以接代表方向的關(guān)鍵字 也可以使用百分值 默認(rèn)是先設(shè)置水平方向的位置 然后是垂直方向 這里就表示將圓心的位置定義在右下角 顏色從里到外依次為 red yellow pink */
最終效果圖如下所示
自定義形狀 圓心位置的徑向漸變的語法
background: radial-gradient(circle at 50% 50%, red,yellow,pink) /*這里表示的就是創(chuàng)建一個(gè)圓形 且該圓形的圓心位于水平方向50% 垂直方向50%的位置 即居中 顏色從里到外拓展依次為 red yellow pink */
最終效果圖如下
自定義徑向大小的徑向漸變效果
background: radial-gradient(150px 110px at 50% 50%,red,yellow,pink) /*這里表示定義了一個(gè)水平半徑為150px 垂直半徑為110px 圓心的位置在水平方向50% 垂直方向50% 即居中 顏色從里到外拓展依次為 red yellow pink */
最終效果圖如下
注意：在書寫的時(shí)候要注意顏色值之間使用逗號(hào)隔開，自定義形狀 自定義徑向大小和顏色值之間也使用逗號(hào)隔開，并且在使用漸變效果之前一定要先定義一個(gè)容器 定義該容器的寬 高度 這樣效果才會(huì)呈現(xiàn)出來
以上四種都是簡(jiǎn)單的徑向漸變效果，除了這種，還有更為復(fù)雜的重復(fù)徑向漸變效果。通過repeating-radial-gradient()方法實(shí)現(xiàn)
使用該方法實(shí)現(xiàn)重復(fù)的徑向漸變效果和上面的普通徑向漸變效果的語法差不多，只不過在原基礎(chǔ)上多了顏色的終止值的設(shè)置，即要設(shè)置指定元素在這個(gè)容器中占多大的空間
舉個(gè)例子:
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)建一個(gè)重復(fù)的徑向漸變 這個(gè)重復(fù)的徑向漸變的形狀是圓形 圓心的位置在水平方向50% 垂直方向50%的地方 設(shè)置了三種顏色 red yellow pink 這三種顏色所占空間都是10px 其中紅色為三種顏色中第一個(gè)呈現(xiàn)的顏色 黃色為第二呈現(xiàn) 粉色為第三呈現(xiàn) 因?yàn)樵O(shè)置了容器的大小 所以當(dāng)所有顏色值都使用完之后 仍然沒有填滿整個(gè)容器的話 就會(huì)自動(dòng)返回到第一個(gè)顏色值 以此循環(huán) 直到填滿整個(gè)容器 */
最終效果如下圖所示
容器的創(chuàng)建，默認(rèn)是矩形。但是可以使用border-radius方法創(chuàng)建圓形，以此充當(dāng)容器來存儲(chǔ)重復(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)建了一個(gè)圓形*/
最終效果圖如下
注意:要想實(shí)現(xiàn)重復(fù)的徑向漸變效果，一定要定義好容器的大小和形狀，還有顏色與顏色所占空間的大小也要根據(jù)實(shí)際情況去調(diào)整。顏色值的設(shè)置順序就是最終展示效果的最終設(shè)置，在定義中是從左到右，在最終呈現(xiàn)的效果中就是從里到外
徑向漸變(Radial gradients)由其中心點(diǎn)、邊緣形狀輪廓及位置、色值結(jié)束點(diǎn)（color stops）定義而成。
當(dāng)我們?yōu)橐粋€(gè)漸變?cè)O(shè)置多個(gè)顏色時(shí)，它們會(huì)平分這個(gè)100%的區(qū)域來漸變。當(dāng)然除了百分比，我們也可以使用具體的像素來設(shè)置這個(gè)大小。像素設(shè)置的大小指的是從漸變圓心向外延伸的距離。
語法：
background: radial-gradient( [ circle ||] [ at ]? ,| [ ellipse || [ | ]{2}] [ at ]? ,| [ [ circle | ellipse ] || ] [ at ]? ,| at , [ , ]+ )
position：如缺少，默認(rèn)為中心點(diǎn)。
shape：漸變的形狀。圓形或橢圓形。默認(rèn)值為橢圓。
size：漸變的尺寸大小。
color-stop：表示某個(gè)確定位置的固定色值。
extent-keyword：關(guān)鍵字用于描述邊緣輪廓的具體位置。以下為關(guān)鍵字常量：
以上就是“css背景漸變屬性之徑向漸變效果怎么實(shí)現(xiàn)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
重慶分公司
重慶分公司
