為了開發(fā)網頁的美觀，css3背景顏色漸變是經常會用到的，那么，css3背景顏色漸變如何設置呢？本篇文章我們就來介紹關于css顏色漸變背景的設置方法。
我們要知道的是css3漸變有兩種類型：css3線性漸變和css3徑向漸變，下面我們就來看一下這兩種css3漸變實現(xiàn)背景顏色漸變的效果是怎樣的。
web前端全棧資料粉絲福利（面試題、視頻、資料筆記、進階路線）
一、css3線性漸變設置的背景顏色漸變
首先我們要知道css3線性漸變所用的屬性是linear-gradient。
語法：linear-gradient(to bottom,colorStrat,colorEnd)
參數(shù)含義：
第一個參數(shù)指定 漸變的方向
to bottom 從上至下；to bottom right 從左上至右下；to right 從左至右；to up right 從左下至右上；
to up 從下至下；to up left 從右下至左上；to left 從右至左；to bottom left 從右上至左下
第二個參數(shù) 指定漸變色的開始顏色
第三個參數(shù) 指定漸變色的結束顏色
實例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網</title>
<style>
#grad1{
????height: 200px;
????background: -webkit-linear-gradient(yellow, green); /* Safari 5.1 - 6.0 */
????background: -o-linear-gradient(yellow, green)); /* Opera 11.1 - 12.0 */
????background: -moz-linear-gradient(yellow, green)); /* Firefox 3.6 - 15 */
????background: linear-gradient(yellow, green)); /* 標準的語法（必須放在最后） */
}
</style>
</head>
<body>
<h3>線性漸變 - 從上到下</h3>
<div id="grad1"></div>
</body>
</html>
css3背景顏色漸變效果如下：
二、css3徑向漸變設置的背景顏色漸變
徑向漸變由它的中心定義。
為了創(chuàng)建一個徑向漸變，你也必須至少定義兩種顏色結點。顏色結點即你想要呈現(xiàn)平穩(wěn)過渡的顏色。同時，你也可以指定漸變的中心、形狀（圓形或橢圓形）、大小。默認情況下，漸變的中心是 center（表示在中心點），漸變的形狀是 ellipse（表示橢圓形），漸變的大小是 farthest-corner（表示到最遠的角落）。
css3徑向漸變用到的屬性是radial-gradient。
語法：background: radial-gradient(shape size at position, start-color, ..., last-color);
實例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網</title>
<style>
#grad1{
????height: 150px;
????width: 200px;
????background: -webkit-radial-gradient(orange, yellow, pink); /* Safari 5.1 - 6.0 */
????background: -o-radial-gradient(orange, yellow, pink); /* Opera 11.6 - 12.0 */
????background: -moz-radial-gradient(orange, yellow, pink); /* Firefox 3.6 - 15 */
????background: radial-gradient(orange, yellow, pink); /* 標準的語法（必須放在最后） */
}
</style>
</head>
<body>
<h3>徑向漸變</h3>
<div id="grad1"></div>
</body>
</html>
css3背景顏色漸變效果如下：
本文到這里就結束了，關于css3漸變中css3線性漸變和css3徑向漸變的更多內容可以我?。?！
