分针网——每日分享：CSS3之径向渐变(radial-gradient)

本文转自：http://www.f-z.cn/id/286

这篇文章主要对径向渐变进行详解，也是分为带内核和不带内核两种情形。

1 带内核的径向渐变，这里以moz为例，其它内核语法一样。

(带有内核）径向渐变

语法：

-moz -radial - gradient (原点位置 ,形状 +半径 ,颜色 位置 ,颜色 位置 ) ;

示例：

-moz -radial - gradient (center ,circle ,white 10 % ,black 50 % ) ;

参数详解：

原点位置 :可以用px /left bottom 表示

仅用一个px表示 ,其表示x方向位置，y方向位置默认为正中间 ;如果两个px ,分别表示x和y方向位置 .

形状：circle（圆） ,ellipse（椭圆）

直径：原点到远角，远边，近边，近角的距离，其可以用来确定渐变直径。

颜色 : 渐变颜色

位置：渐变颜色的终点位置

注意：半径省略默认直径为原点到远角的距离，位置省略默认为中心点。形状也可省略。

带内核径向渐变代码

background : -moz-radial-gradient (left,circle,red 10%,yellow 50%,green 50% ) ;

/* background: -moz-radial-gradient(50px,ellipse,red 10%,yellow 50%,green 51%);*/

/* background: -moz-radial-gradient(center,closest-corner circle,red 10%,yellow 50%,green 50%); */

/* background: -moz-radial-gradient(circle,red 10%,yellow 50%,green 50%); */

/* background: -moz-radial-gradient(circle closest-side,red 10%,yellow 50%,green 50%);*/

效果图如下：

结论：

当原点位置省略，默认为中心点；

当半径省略，渐变直径默认为原点到最远角的距离，图四直径为225。

2 不带内核的径向渐变

(不带内核 )径向渐变：

radial - gradient (形状 +半径 at 位置 ,颜色 渐变位置 ,颜色 渐变位置 ) ;

示例：

background : radial - gradient (circle ,red 10 % ,yellow 50 % ,green 65 % ) ;

参数解析

形状取值：circle ,ellipse /px

一个px表示x和y方向的直径 ,两个px分别表示x和y的直径

半径： 可以为远角，近边等／px

形状是circle，只能给一个px，表示直径。

形状是ellipse，必须给两个px，表示x和y方向直径

位置取值：可以为px／left

注意：半径省略默认直径为原点到远角的距离，位置省略默认为中心点。形状也可省略。

代码如下：

.b {

/* background: radial-gradient(100px 200px at 50px 100px,red 10%,yellow 30%,green 65%); */

/* background: radial-gradient(circle at 50px 100px,red 10%,yellow 30%,green 65%); */

/* background: radial-gradient(ellipse 50px 100px,red 10%,yellow 50%,green 65%); */

/* background: radial-gradient(30px 100px at center,red 10%,yellow 50%,green 65%); */

/* background: radial-gradient(circle at left,red 10%,yellow 50%,green 65%); */

/* background: radial-gradient(ellipse closest-side at 140px,red 10%,yellow 50%,green 65%);*/

}

对比图效果：

结论：

如果没有确定位置，则位置位于center位置；

如果没有确定大小，直径为原点到最远角的距离（farthest-corner）。