css3顏色漸層：css3如何實現背景顏色漸層？-css教學-PHP中文網

首頁

web前端

css教學

css3顏色漸層：css3如何實現背景顏色漸層？

不言

Sep 15, 2018 pm 01:42 PM

css3背景顏色漸層

為了開發網頁的美觀，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 id="线性渐变-nbsp-nbsp-从上到下">线性渐变 - 从上到下</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 id="径向渐变">径向渐变</h3>
<div id="grad1"></div>
</body>
</html>

css3背景色彩漸層效果如下：

#本文到這裡就結束了，關於css3漸層中css3線性漸層和css3徑向漸層的更多內容可以參考

css3手冊。

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

陳述

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

CSS Flexbox與網格：全面評論May 12, 2025 am 12:01 AM

選擇Flexbox還是Grid取決於佈局需求：1)Flexbox適用於一維佈局，如導航欄；2)Grid適合二維佈局，如雜誌式佈局。兩者在項目中可結合使用，提升佈局效果。

如何包括CSS文件：方法和最佳實踐May 11, 2025 am 12:02 AM

包含CSS文件的最佳方法是使用標籤在HTML的部分引入外部CSS文件。 1.使用標籤引入外部CSS文件，如。 2.對於小型調整，可以使用內聯CSS，但應謹慎使用。 3.大型項目可使用CSS預處理器如Sass或Less，通過@import導入其他CSS文件。 4.為了性能，應合併CSS文件並使用CDN，同時使用工具如CSSNano進行壓縮。

Flexbox vs Grid：我應該學習兩者嗎？May 10, 2025 am 12:01 AM

是的，youshouldlearnbothflexboxandgrid.1）flexboxisidealforone-demensional，flexiblelayoutslikenavigationmenus.2）gridexcelstcelsintwo-dimensional，confffferDesignssignssuchasmagagazineLayouts.3）blosebothenHancesSunHanceSlineHancesLayOutflexibilitibilitibilitibilitibilityAnderibilitibilityAndresponScormentilial anderingStruction

軌道力學（或我如何優化CSS KeyFrames動畫）May 09, 2025 am 09:57 AM

重構自己的代碼看起來是什麼樣的？約翰·瑞亞（John Rhea）挑選了他寫的一個舊的CSS動畫，並介紹了優化它的思維過程。

CSS動畫：很難創建它們嗎？May 09, 2025 am 12:03 AM

CSSanimationsarenotinherentlyhardbutrequirepracticeandunderstandingofCSSpropertiesandtimingfunctions.1)Startwithsimpleanimationslikescalingabuttononhoverusingkeyframes.2)Useeasingfunctionslikecubic-bezierfornaturaleffects,suchasabounceanimation.3)For

@KeyFrames CSS：最常用的技巧May 08, 2025 am 12:13 AM

@keyframesispopularduetoitsversatoryand and powerincreatingsmoothcsssanimations.keytricksinclude：1）definingsmoothtransitionsbetnestates，2）使用AnimatingMultatingMultationMultationProperPertiessimultane，3）使用使用4）使用BombingeNtibalibility，4）使用CombanningWiThjavoFofofofoftofofo

CSS計數器：自動編號的綜合指南May 07, 2025 pm 03:45 PM

CSSCOUNTERSAREDOMANAGEAUTOMANAMBERINGINWEBDESIGNS.1）他們可以使用forterablesofcontents，ListItems，and customnumbering.2）AdvancedsincludenestednumberingSystems.3）挑戰挑戰InclassINCludeBrowsEccerCerceribaliblesibility andperformiballibility andperformissises.4）創造性