色彩漸變 ： gradient（線性漸變 和 徑向漸變）

支持情況：IE10+、Firefox19.0+、Chrome26.0+ 和 Opera12.1+

linear-gradient(to right,red,green)

linear:漸變類型，radial為徑向漸變

to right ：漸變方向 ，可以寫角度（相當于90deg）

red,green:從紅色漸變到綠色，可以有多個值

這里要說一點的，

瀏覽器的實現有些許不同，統一的標準 是這個樣子的

background-image: linear-gradient(<point> || <angle>,]? <stop>, <stop> [, <stop>]*)

下面小編來畫幾個漸變的圖形

p {
400px;
height: 150px;
line-height: 150px;
text-align:center;
color: white;
font-size:24px;
background:linear-gradient(80deg,pink,indigo);
}

再讓我們看下徑向的漸變

p {
400px;
height: 150px;
line-height: 150px;
text-align:center;
color: white;
font-size:24px;
background:radial-gradient(pink,indigo);
}

來一個中間粉粉的燈光效果，有木有看起來心情愉悅呢，嘿嘿。

（這里用的是chrome）

div {
200px;
height:200px;
background:-webkit-radial-gradient(100px 0px,pink,indigo);
}

在來個紫色的球 粉色的光。

div {
200px;
height:200px;
border-radius:100px;
background:-webkit-radial-gradient(55px 55px,pink,indigo,pink);

}

感覺好漂漂~哈啊哈

總結

以上是生活随笔為你收集整理的css3之渐变色彩的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。