css中色彩坡形的實現(三種方式)

來源:互聯網
上載者:User
本篇文章給大家帶來的內容是關於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>

運行效果:

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>

運行結果:

注意:從左至右漸層,標準寫法在向下漸層的括弧內加上方向詞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>

運行結果:

注意:方向詞寫法遵循上下左右的按瀏覽器順序第一項寫起始位置,後三項寫到達位置,第四項為標準項要加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()函數。每個顏色設定比例。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.