css中顏色漸層的實作（三種方式）-css教學-PHP中文網

首頁

web前端

css教學

css中顏色漸層的實作（三種方式）

不言

Aug 21, 2018 am 11:55 AM

顏色漸層

這篇文章帶給大家的內容是關於css中顏色漸層的實現（三種方式），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

！！注意IE9及之前的版本不支援漸層。 Safari要加-webkit-的前綴，Opera要加-o-的前綴，Firefox要加上-moz-的前綴！

一、Linear Gradients(線性漸變)-向下/向上/向左/向右/對角線方向

1.向下代碼

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<title>渐变学习</title>
<style>
div{
    width:200px;
    height:200px;
    }
.gradient{
 background:-webkit-linear-gradient(#8A2BE2,#DC143C);/*for safari5.1-6.0*/
 background:-o-linear-gradient(#8A2BE2,#DC143C);/*Opera 11.1-12.0*/
 background:-moz-linear-gradient(#8A2BE2,#DC143C);/*firefox 3.6-15*/
 background:linear-gradient(#8A2BE2,#DC143C);/*标准语法，必须放在最后*/
    }
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>

運行效果：

css中顏色漸層的實作（三種方式）

2.往上，換下漸層的兩個顏色順序即可。替換上面程式碼運行結果為：

3.向左程式碼

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<title>渐变学习</title>
<style>
div{
    width:200px;
    height:200px;
    }
.gradient{
 background:-webkit-linear-gradient(left,#8A2BE2,#DC143C);/*for safari5.1-6.0*/
 background:-o-linear-gradient(right,#8A2BE2,#DC143C);/*Opera 11.1-12.0*/
 background:-moz-linear-gradient(right,#8A2BE2,#DC143C);/*firefox 3.6-15*/
 background:linear-gradient(to right,#8A2BE2,#DC143C);/*标准语法*/
    }
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>

運行結果：

css中顏色漸層的實作（三種方式）

##注意：由左到右漸變，標準寫法在向下漸變的括號內加上方向詞to right；其中safari5.1-6.0加left；Opera11.1-12和firefox3.6-15加right；依照上述程式碼中的瀏覽器順序（標準文法必須放在最後！！）可以速記為第一項寫從左開始，後面三項寫到右結束。

4.從右到左，在從左到右的漸變程式碼上修改方向詞得到效果圖：

5.對角方向

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<title>渐变学习</title>
<style>
div{
    width:200px;
    height:200px;
    }
.gradient{
 background:-webkit-linear-gradient(left top,#8A2BE2,#DC143C);/*for safari5.1-6.0*/
 background:-o-linear-gradient(bottom right,#8A2BE2,#DC143C);/*Opera 11.1-12.0*/
 background:-moz-linear-gradient(bottom right,#8A2BE2,#DC143C);/*firefox 3.6-15*/
 background:linear-gradient(to bottom right,#8A2BE2,#DC143C);/*标准语法*/
    }
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>

運行結果：

css中顏色漸層的實作（三種方式）

#注意：方向詞寫法遵循上下左右的按瀏覽器順序第一項寫起始位置，後三項寫到達位置，第四項為標準項要加to；要注意的是左上left top 對應的到達項為bottom right。

二、角度漸層

1、以上上下左右對角漸變通通可以透過角度漸變寫出來。在表示顏色的括號第一項加上角度例如0deg,45deg,90deg,180deg等角度即可。

2、角度是指漸變方向和水平線之間的角度，逆時針方向計算，例如：0deg是指從下到上的漸變，90deg是指從左到右的漸變。

3、對於Chrome，Safari，Firefox等換算公式為90-x=y，X為標準度數。

三、多個顏色節點：即在表示方向顏色的括號裡加多幾種顏色就好，寫法還是遵循以上先寫方向再寫顏色。

四、有透明度的漸層：即以rgba（0,0,0,0.2）表示顏色，其中0.2表示透明度。

五、重複的線性漸變：用repeating-linear-gradient（）函數，括號內每個顏色規定漸變比例。

六、Radial Gradient徑向漸層

1、徑向漸層：可以指定漸變的中心，形狀（圓形circle或橢圓），大小size（closest-side;farthest-side ;closest-coner;farthest-corner）。預設中心為center，形狀為ellipse（橢圓），漸變大小是farthest-corner（到最遠角落）。語法：background：-radial-gradient(center,shape，size,start-color,...,last-clor)。

2、顏色節點不均勻分佈的徑向漸層：即規定每個顏色不通的比例。

3、重複的徑向漸層：使用repeating-radial-gradient()函數。每個顏色設定比例。

相關建議：

css的漸層顏色

CSS怎麼實作背景顏色漸層_html/css_WEB-ITnose

以上是css中顏色漸層的實作（三種方式）的詳細內容。更多資訊請關注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）創造性