首頁 >web前端 >css教學 >css3顏色漸層:css3如何實現背景顏色漸層?

css3顏色漸層:css3如何實現背景顏色漸層?

不言
不言原創
2018-09-15 13:42:2013417瀏覽

為了開發網頁的美觀,css3背景顏色漸層是常會用到的,那麼,css3背景顏色漸層如何設定呢?本篇文章我們就來介紹關於css顏色漸層背景的設定方法。

我們要知道的是css3漸層有兩種:css3線性漸層和css3徑向漸層,就來看看這兩種css3漸層實現背景色彩漸層的效果是怎樣的。

一、css3線性漸層設定的背景色彩漸層

#首先我們要知道css3線性漸層所用的性質是linear-gradient。

語法:linear-gradient(to bottom,colorStrat,colorEnd)

參數意義:

第一個參數指定漸層的方向

#to bottom 從上到下;to bottom right 由左上至右下;to right 由左至右;to up right 由左下至右上;

to up 由下至下;to up left 從右下至左上;to left 由右至左;to bottom left 從右上至左下

第二個參數指定漸變色的開始顏色

第三個參數指定漸變色的結束顏色

實例:

<!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顏色漸層:css3如何實現背景顏色漸層?

# #二、css3徑向漸層設定的背景色彩漸層

徑向漸層由它的中心定義。

為了創造一個徑向漸變,你也必須至少定義兩種顏色結點。顏色結點即你想要呈現平穩過渡的顏色。同時,你也可以指定漸層的中心、形狀(圓形或橢圓形)、大小。預設情況下,漸層的中心是 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漸層中css3線性漸層和css3徑向漸層的更多內容可以參考

css3手冊


#

以上是css3顏色漸層:css3如何實現背景顏色漸層?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn