Css3漸層(Gradients)-放射狀漸層

標籤：情況   href   tle   顏色   eating   dial   www   dia   otto   

CSS3放射狀漸層-radial-gradient()/repeating-radial-gradient()

放射狀漸層由它的中心定義。

建立放射狀漸層，至少定義兩種顏色節點，呈現平穩過度的顏色。同時，你也可以指定漸層中心、形狀（圓形或橢圓形）、大小。

預設情況下，漸層的中心是center（表示在中心），漸層的形狀是ellipse（表示橢圓形），變天的大小是farthest-corner（表示到最遠的角落）

文法：

background: radial-gradient(center, shape size, start-color, ..., last-color);

1.放射狀漸層-預設情況下，顏色結點均勻分布

    .divOne{        background:radial-gradient(red,green,blue);    }    .divTwo{        background:radial-gradient(red,blue);        width:100px;    }

2.放射狀漸層-指定形狀

    .divOne{        background:radial-gradient(circle,red,blue);    }    .divTwo{        background:radial-gradient(ellipse,red,blue);    }

3.放射狀漸層-指定位置

.divOne{    /*低版本的Google，也不支援指定中心位置*/    background:radial-gradient( red,green,blue);    background:-webkit-radial-gradient( bottom,red,green,blue);}.divTwo{    background:radial-gradient(red,blue);    background:-webkit-radial-gradient(top,red,blue);    width:100px;}

4.放射狀漸層-顏色不均勻：

.divOne{    background:radial-gradient(red 10%,green 30%,blue 60%);}.divTwo{    background:radial-gradient(red 20%,blue 60%,green 10%);    width:100px;}

5.放射狀漸層-大小指定，不同尺寸大小關鍵字的使用，

size參數定義漸層的大小，，第一個參數是水平方向寬度，第二個參數是垂直方向參數，對應的關鍵詞

• closest-side
• farthest-side
• closest-corner
• farthest-corner

.divOne {    /*低版本的Google也不支援，需要加首碼*/    background: radial-gradient(60% 30%, closest-side, red, blue);    background: -webkit-radial-gradient(60% 30%, closest-side, red, blue);}.divTwo {    background: radial-gradient(60% 30%, farthest-side, red, blue);    background: -webkit-radial-gradient( 60% 30%, farthest-side, red, blue);}.divThree {    background: radial-gradient(60% 30%, closest-corner, red, blue);    background: -webkit-radial-gradient( 60% 30%, closest-corner, red, blue);}.divFourth {    background: radial-gradient(60% 30%, farthest-corner, red, blue);    background: -webkit-radial-gradient( 60% 30%, farthest-corner, red, blue);}

6.重複放射狀漸層-repeating-radial-gradient()

.divOne {    background: repeating-radial-gradient(red, yellow 10%, green 15%);}

更多：

CSS3漸層(Gradients)-線性漸層

Css3漸層(Gradients)-放射狀漸層