css中顏色漸變的實(shí)現(xiàn)方法有哪些

這篇文章將為大家詳細(xì)講解有關(guān)css中顏色漸變的實(shí)現(xiàn)方法有哪些，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)專注于企業(yè)營(yíng)銷型網(wǎng)站、網(wǎng)站重做改版、鼓樓網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5開發(fā)、商城建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)公司、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為鼓樓等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

??！注意IE9及之前的版本不支持漸變。Safari要加-webkit-的前綴，Opera要加-o-的前綴，F(xiàn)irefox要加-moz-的前綴！

一、Linear Gradients(線性漸變)-向下/向上/向左/向右/對(duì)角方向

1.向下代碼

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<title>漸變學(xué)習(xí)</title>
<style>
div{
    width:200px;
    height:200px;
    }
.gradient{
 background:-webkit-linear-gradient(#8A2BE2,#DC143C);/*for safari5.1-6.0*/
 background:-o-linear-gradient(#8A2BE2,#DC143C);/*Opera 11.1-12.0*/
 background:-moz-linear-gradient(#8A2BE2,#DC143C);/*firefox 3.6-15*/
 background:linear-gradient(#8A2BE2,#DC143C);/*標(biāo)準(zhǔn)語法，必須放在最后*/
    }
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>

運(yùn)行效果：

css中顏色漸變的實(shí)現(xiàn)方法有哪些

2.向上，換向下漸變的兩個(gè)顏色順序即可。替換上面代碼運(yùn)行結(jié)果為：

css中顏色漸變的實(shí)現(xiàn)方法有哪些

5.對(duì)角方向

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<title>漸變學(xué)習(xí)</title>
<style>
div{
    width:200px;
    height:200px;
    }
.gradient{
 background:-webkit-linear-gradient(left top,#8A2BE2,#DC143C);/*for safari5.1-6.0*/
 background:-o-linear-gradient(bottom right,#8A2BE2,#DC143C);/*Opera 11.1-12.0*/
 background:-moz-linear-gradient(bottom right,#8A2BE2,#DC143C);/*firefox 3.6-15*/
 background:linear-gradient(to bottom right,#8A2BE2,#DC143C);/*標(biāo)準(zhǔn)語法*/
    }
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>

運(yùn)行結(jié)果：

css中顏色漸變的實(shí)現(xiàn)方法有哪些

注意：方向詞寫法遵循上下左右的按瀏覽器順序第一項(xiàng)寫起始位置，后三項(xiàng)寫到達(dá)位置，第四項(xiàng)為標(biāo)準(zhǔn)項(xiàng)要加to；要注意的是左上left top 對(duì)應(yīng)的到達(dá)項(xiàng)為bottom right。

二、角度漸變

1、以上上下左右對(duì)角漸變通通可以通過角度漸變寫出來。在表示顏色的括號(hào)第一項(xiàng)加上角度比如0deg,45deg,90deg,180deg等角度即可。

2、角度是指漸變方向和水平線之間的角度，逆時(shí)針方向計(jì)算，比如：0deg是指從下到上的漸變，90deg是指從左到右的漸變。

3、對(duì)于Chrome，Safari，F(xiàn)irefox等換算公式為90-x=y，X為標(biāo)準(zhǔn)度數(shù)。

三、多個(gè)顏色節(jié)點(diǎn)：即在表示方向顏色的括號(hào)里加多幾種顏色就好，寫法還是遵循以上先寫方向再寫顏色。

四、帶有透明度的漸變：即用rgba（0,0,0,0.2）表示顏色，其中0.2表示透明度。

五、重復(fù)的線性漸變：用repeating-linear-gradient（）函數(shù)，括號(hào)內(nèi)每個(gè)顏色規(guī)定漸變比例。

六、Radial Gradient徑向漸變

1、徑向漸變：可以指定漸變的中心，形狀（圓形circle或橢圓），大小size（closest-side;farthest-side;closest-coner;farthest-corner）。默認(rèn)中心為center，形狀為ellipse（橢圓），漸變大小是farthest-corner（到最遠(yuǎn)角落）。語法：background：-radial-gradient(center,shape，size,start-color,...,last-clor)。

2、顏色節(jié)點(diǎn)不均勻分布的徑向漸變：即規(guī)定每個(gè)顏色不通的比例。

3、重復(fù)的徑向漸變：使用repeating-radial-gradient()函數(shù)。每個(gè)顏色設(shè)置比例。

關(guān)于css中顏色漸變的實(shí)現(xiàn)方法有哪些就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

分享文章：css中顏色漸變的實(shí)現(xiàn)方法有哪些
當(dāng)前路徑：http://muchs.cn/article10/ghiggo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)公司、全網(wǎng)營(yíng)銷推廣、營(yíng)銷型網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作、標(biāo)簽優(yōu)化、網(wǎng)站收錄

聲明：本網(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í)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容