這篇文章將分享有關CSS3背景漸變的效果，有一定的參考價值，希望對大家有所幫助
背景漸變是一個很好的的特效，那麼如何去利用CSS3去做這個效果呢，今天將為大家分享CSS3漸變，CSS3漸變是向圖像模組中添加的新類型的圖像。 CSS3漸層允許在兩個或多個指定顏色之間顯示平滑過渡。
瀏覽器支援兩種類型的漸層：
linear, 用linear-gradient()函數定義,
radial, 用radial-gradient ()函數定義.
使用過程中註意瀏覽器的相容問題
Safari ， Chrome ：-webkit-linear-gradient
Firefox ：-moz- linear-gradient
IE ：-ms-linear-gradient
Opera：-o-linear-gradient
#本篇文章將以Chrome 瀏覽器為例進行講解
線性漸變
要建立線性漸變，將起點和方向設為角度，也要定義顏色停止必須指定至少兩個停止顏色。
從頂部到底部的線性漸變
div{
/* 倒退 */
width:200px;
height:200px;
background-color: #1a82f7;
background-repeat: repeat-x;
background: -webkit-linear-gradient(top, #2F2727, #1a82f7);
}
##從左到右的漸變過程
div{
/* 倒退 */
width:200px;
height:200px;
background-color: #1a82f7;
background-repeat: repeat-x;
background: -webkit-linear-gradient(left, #2F2727, #1a82f7);
}
#線性漸變（偶數停頓）
div{
background: -webkit-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);}
徑向漸層
##徑向漸層由它的中心定義，必須至少定義兩種顏色結點，還可以指定漸變的中心、形狀（圓形或橢圓形）、大小，預設情況下，漸變的中心是center（表示在中心點），漸變的形狀是ellipse（表示橢圓形），漸變的大小是farthest-corner（表示到最遠的角落）。
居中徑向漸層div{
width:500px;
height:100px;
background-color: #2F2727;
background-position: center center;
background-repeat: no-repeat;
background: -webkit-radial-gradient(circle, #1a82f7, #2F2727);
}登入後複製
#自訂徑向漸層
closest-side： 最近端， closest-corner：最近角以上是如何使用CSS3中gradient屬性做出背景漸變效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！div{
width:500px;
height:100px;
background-color: #2F2727;
background-position: 80% 20%;//自己自定义位置
background-repeat: no-repeat;
background: -webkit-radial-gradient(80% 20%, closest-corner, #1a82f7, #2F2727);
}登入後複製
