這篇文章主要介紹了html設(shè)置背景徑向漸變的方法，具有一定借鑒價(jià)值，需要的朋友可以參考下。下面就和我一起來看看吧。

創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都做網(wǎng)站、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的墨竹工卡網(wǎng)站設(shè)計(jì)、移動媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

在html中，可以使用radial-gradient函數(shù)設(shè)置徑向漸變，只需要在元素background屬性里加入“background:radial-gradient(起始位置, 形狀,大小, 顏色,顏色,顏色)”即可。

徑向漸變：從一個(gè)點(diǎn)到四周的顏色的過渡變化。

徑向漸變?nèi)鐖D所示：

語法：（必須加瀏覽器前綴）

background: radial-gradient(center, shape, size, start-color, ..., last-color);

center：漸變起點(diǎn)的位置，可以為百分比，默認(rèn)是圖形的正中心。

shape：漸變的形狀，ellipse表示橢圓形，circle表示圓形。默認(rèn)為ellipse，如果元素形狀為正方形的元素，則ellipse和circle顯示一樣。

size:關(guān)于徑向漸變的大?。?/p>

closest-side 最近邊

farthest-side 最遠(yuǎn)邊

closest-corner 最近角

farthest-corner 最遠(yuǎn)角

實(shí)現(xiàn)代碼如下：

p{
            width:500px;
            height:300px;
            margin:40px auto;
            background:-webkit-radial-gradient(center,closest-corner,red,yellow,green);
        }

擴(kuò)展資料：

線性漸變:從一個(gè)方向到另一個(gè)方向到另一個(gè)方向的顏色的變化

標(biāo)準(zhǔn)模式的語法（不添加瀏覽器前綴）：

background:linear-gradient(direction,color-stop1,color-stop2)

說明：direction默認(rèn)值是to bottom，即從上往下

stop:顏色的分布位置，默認(rèn)均勻分布（平均分布）

兼容模式的語法（添加瀏覽器前綴）：

background:-webkit-linear-gradient(direction,color-stop1,color-stop2)

說明：direction值不能加to，該值表示顏色從該方向開始漸變，與上面相反

stop:顏色的分布位置，默認(rèn)均勻分布（平均分布）

漸變方向：前面實(shí)現(xiàn)了上下或左右漸變，接下來介紹對角線型漸變

1、to left \ to right \ to top（上下或左右漸變）

2、to left top \ to right bottom(對角線漸變)

3、漸變線角度的變化

例如：標(biāo)準(zhǔn)模式 ： 40deg 40度

兼容模式 ： 90 - 40deg

線性漸變：顏色的分布(顏色區(qū)域大小)：

linear-gradient(方向, 顏色1 20%，顏色2 30%，顏色3 )

到20%這個(gè)位置仍然是顏色1 出了20% 開始向顏色2漸變

代碼如下所示：　

div{
            width:500px;
            height:300px;
            margin:100px auto;
            background-image: -webkit-linear-gradient(left, red, yellow);
        }

以上就是html設(shè)置背景徑向漸變的方法的詳細(xì)內(nèi)容了，看完之后是否有所收獲呢？如果想了解更多相關(guān)內(nèi)容，歡迎來創(chuàng)新互聯(lián)行業(yè)資訊！

網(wǎng)頁名稱：html設(shè)置背景徑向漸變的方法
網(wǎng)頁鏈接：http://jinyejixie.com/article32/iisspc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、、網(wǎng)站建設(shè)、全網(wǎng)營銷推廣、企業(yè)建站、云服務(wù)器

廣告

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