寫完了linear-gradient線性漸變的初級教程后，看到了Lea Veron博客上那個用漸變做的圖案集，我瞬間就覺得自己的想象力弱爆了。

容我躺躺，再站起來繼續戰斗！

緩過來了，開講放射性漸變吧。

一、放射性漸變原理

別人都用ps解釋，我卻在漸變上獨喜歡flash的漸變變形工具。

別人都說徑向漸變，flash里面顯示的是放射性漸變，我就沿用了放射性漸變的說法。你看出來啦，我曾經是flash的迷妹！

放射性漸變的核心就是：從中心點出發，輻射到邊界處。

設置了四個色塊，如圖：

用漸變變形工具可以查看

默認第一個色塊從中心點出發，沿著半徑分布色塊，直到邊界處。

所以，我們可以理解這里的漸變線是半徑。

可以通過改變中心點的位置，邊界的大小，半徑的長短，三角形的移動實現非對稱的漸變等效果。

原諒我沒有來動畫版本的，自己用flash試試唄！

其實來個橢圓一樣妥妥的。

明白了這個基本的原理后，再看MDN上的這篇文章，是不是感覺很好懂了。

至少這幅圖好懂了↓

半徑就是虛擬漸變射線(virtual gradient ray)，中心點就是色塊的起點(0%)，ending shape就是漸變的邊界形狀。ending shape只能是正圓(circle)或者橢圓(ellipse)。

二、放射性漸變的語法結構// Definition of the ending shape

radial-gradient( circle, … ) ? ? ? ? ? ? ? ?/* Synonym of radial-gradient( circle farthest-corner, … ) */

radial-gradient( ellipse, … ) ? ? ? ? ? ? ? /* Synonym of radial-gradient( ellipse farthest-corner, … ) */

radial-gradient( , … ) ? ? ?/* It draws a circle */

radial-gradient( circle radius, … ) ? ? ? ? /* A centered circle of the given length. It can't be a percentage */

radial-gradient( ellipse x-axis y-axis, … ) /* The two semi-major axes are given, horizontal, then vertical */

// Definition of the position of the shape

radial-gradient ( … at , … )

// Definition of the color stops

radial-gradient ( …, , … )

radial-gradient ( …, , )

官方的標準語法HTMD復雜呀。

我們只能一點點攻克了。

先了解幾個基本概念：

：指的是中心點的位置，這個定位和background-position的定位是一樣的，比如“50px 40px”，“30% 44px”，“left center”等值，一個代表x坐標，一個代表y坐標。如果缺省，代表的是正中間(center)。它的取值也是這幾種：

：用長度值指定徑向漸變圓心的橫坐標或縱坐標。可以為負值。

：用百分比指定徑向漸變圓心的橫坐標或縱坐標。可以為負值。

left：設置左邊為徑向漸變圓心的橫坐標值。

center：設置中間為徑向漸變圓心的橫坐標值或縱坐標。

right：設置右邊為徑向漸變圓心的橫坐標值。

top：設置頂部為徑向漸變圓心的縱標值。

bottom：設置底部為徑向漸變圓心的縱標值。

：只能為正圓或者橢圓，正圓表示半徑是一樣的，橢圓則有x軸、y軸兩個半徑。默認的值是橢圓(ellipse)。

：沿著漸變線的色彩的值和位置的值。位置的值可以是百分比或者具體的像素，和線性漸變的寫法是一樣的。比如“#f00 0%”，“red 25%”，“rgba(255,255,255,0.5)? 200px”等。

：表示ending shape放射性漸變結束的形狀的大小。

常用的有如下幾個值：

closest-side：指定徑向漸變的半徑長度為從圓心到離圓心最近的邊；

closest-corner：指定徑向漸變的半徑長度為從圓心到離圓心最近的角；

farthest-side：指定徑向漸變的半徑長度為從圓心到離圓心最遠的邊；

farthest-corner：指定徑向漸變的半徑長度為從圓心到離圓心最遠的角，這個是默認值；

三、舉些栗子

1、最簡單的只要顏色的放射性漸變

.box{

width:200px;

height:100px;

border-radius:50%;

margin:50px;

}

.rg1{

background-image:radial-gradient(yellow,green,black);}

可以看出，如果只設置顏色，則默認中心點在正中間，漸變的形狀是橢圓。

2、設置了顏色的位置

.rg2{

background-image:radial-gradient(yellow?0%,yellow?50%,green);}

3、設置半透明的顏色值

.rg3{

background-image:radial-gradient(yellow?0,red?50px,rgba(255,0,0,0.5)?80px,rgba(255,0,0,0)?100px)}

此處的position(位置)使用的是length(具體的像素值)，如果使用百分比的值，效果會有不一樣。結束色使用100%的值，邊緣不是模糊，而是非常清晰的。

4、設置為正圓的漸變

.rg4{

background-image:radial-gradient(circle,yellow,#C03)}

設置形狀為circle正圓，則改變了默認為ellipse橢圓的形狀。但是如果這里的box本身就是正圓，則效果無差別。

6、固定半徑的正圓的漸變

.rg5{

background-image:radial-gradient(30px,yellow,green,#333)}

此時，固定半徑代表只能是正圓，而且這里的半徑不能是百分比的值，不能是負值。

7、固定x、y軸大小的橢圓

.rg6{

background-image:radial-gradient(ellipse?20px?50px,yellow,green)}

“20px”表示橢圓水平方向的半徑大小，“50px”表示橢圓縱向方向的半徑大小。這里可以使用百分比的值，百分比值是相對于放射性漸變容器的尺寸，不能是負值。

8、改變中心點的位置

.rg7{

background-image:radial-gradient(circle?at?left?top,#fff?10%,#ccc?30%,#000?60%,#555?80%,#888?100%)}

.rg8{

background-image:radial-gradient(circle?at?top,#fff,green,black)}

.rg9{

background-image:radial-gradient(circle?at?300px?50px,#1DDEE9,#F13464)}

.rg10{

background-image:radial-gradient(circle?at?25%?35%,pink,#31A4A4,rgba(255,255,255,0.5))}

這里的中心點的位置和background-position的定義是一樣的規則。

具體還可以看看這張圖，從大漠那里偷來的^_^，其實我很嫌棄它的丑，但是我又不想再畫一張，所以我就閉嘴吧T_T

如果既要改變放射的半徑值，又要改變中心點，則可以這樣寫：background-image:?radial-gradient(50px?100px?at?top?center,#fee140?0%,#fa709a?100%);

9、通過設置extent-keyword來控制漸變的大小

引用大漠的一段話，來解釋固定了半徑的圓或者橢圓，和這種隱式的控制漸變的大小的區別。除了通過給徑向漸變設置大小之外，我們還可以通過關鍵詞隱式的方式為徑向漸變設置大小。其中的每個關鍵詞指定徑向漸變大小的算法。也就是通過圓心指向徑向漸變的邊或者角來確定徑向漸變的大小。不過在圓形和橢圓形的徑向漸變之中，他們算出來的大小略有不同。雖然最初看上去似乎有些復雜，一旦您理解了這些關鍵詞的意義，一切就變得簡單。

圓形效果：

.box2{

width:200px;

height:100px;

}

.rg11{

background-image:radial-gradient(circle?closest-side?at?45px?45px,yellow?0%,rgba(0,0,255,0)?50%,#0ff?95%?)}

.rg12{

background-image:radial-gradient(circle?farthest-side?at?45px?45px,yellow?0%,rgba(0,0,255,0)?50%,#0ff?95%?)}

.rg13{

background-image:radial-gradient(circle?closest-corner?at?45px?45px,yellow?0%,rgba(0,0,255,0)?50%,#0ff?95%?)}

.rg14{

background-image:radial-gradient(circle?farthest-corner?at?45px?45px,yellow?0%,rgba(0,0,255,0)?50%,#0ff?95%?)}

橢圓效果：

.rg15{

background-image:radial-gradient(ellipse?closest-side?at?45px?20px,yellow?0%,rgba(0,0,255,0)?50%,#0ff?95%?)}

.rg16{

background-image:radial-gradient(ellipse?farthest-side?at?45px?20px,yellow?0%,rgba(0,0,255,0)?50%,#0ff?95%?)}

.rg17{

background-image:radial-gradient(ellipse?closest-corner?at?45px?20px,yellow?0%,rgba(0,0,255,0)?50%,#0ff?95%?)}

.rg18{

background-image:radial-gradient(ellipse?farthest-corner?at?45px?20px,yellow?0%,rgba(0,0,255,0)?50%,#0ff?95%?)}

基礎功能就介紹到這里吧，貌似這篇文章寫了好幾天了，斷斷續續，我都忘了還有什么要寫了，后面想起了再補充吧。

最后還是貼上大漠的學術性的嚴謹的詳細的帖子：再說CSS3漸變——徑向漸變

周末來了，我可以休息了嗎？

總結

以上是生活随笔為你收集整理的html图形渐变颜色一半一半,CSS3教程：background-image之放射性渐变（radial-gradient）详解...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。