html图形渐变颜色一半一半,CSS3教程：background-image之放射性渐变（radial-gradient）详解...
寫完了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）详解...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 信息学奥赛一本通-2069：【例2.12
- 下一篇： CSS 基本样式