python123渐变的圆_再说CSS3渐变——径向渐变

上节在《再说CSS3渐变——线性渐变》和大家一起学习了CSS3 Gradient中径向渐变最新语法(称得上是W3C的标准语法)相关知识以及其基本使用。今天我们在这一篇中主要和大家一起来了解渐变中的径向渐变新语法以及其基本使用。

CSS3径向渐变

CSS3径向渐变是圆形或椭圆形渐变。颜色不再沿着一条直线轴变化，而是从一个起点朝所有方向混合。但相对线性渐变要比径向渐变复杂的多。

一、径向渐变的语法

CSS3的径向渐变已得到众多浏览器引擎的支持，只不过其语法的版本根据不同的引擎浏览器，其语法也不一样，特别是在Webkit引擎的浏览器下和线性渐变的语法类似，也有新旧之法。而在其他几大引擎的浏览器，其语法基本类似，只是使用的前缀不同而以。特别是在2013年04年，W3C为CSS3径向渐变推出最新的语法格式。接下来我们一起来看看各引擎浏览器下的径向渐变语法。

1. Webkit引擎的CSS3径向渐变语法

CSS3径向渐变在Webkit引擎下的语法和线性渐变的语法一样，分为两种，一种是老版本的语法，另外一种是新版本语法：

Webkit引擎下的老版本语法：

-webkit-gradient([],[ || ,]?[ ||,]?,[,]*);

Webkit引擎新式语法

-webkit-radial-gradient([ || ,]?[ || ,]?,[,]*);

Webkit引擎中的浏览器Chrome4－9和Safari 4－5版本支持老式的Webkit引擎径向语法，Chrome10.0+和Safari5.1+支持Webkit引擎新式径向渐变。

2. Gecko引擎的CSS3的径向渐变语法

Gecko引擎的CSS3的径向渐变和Webkit引擎新式语法类似，只是使用的前缀不同而以：

-moz-radial-gradient([ || ,]?[ || ,]?,[,]*);

Gecko引擎的Firefox浏览器中Firefox3.6+版本支持径向渐变。

3. Presto引擎的CSS3径向渐变语法

Presto引擎的CSS3径向渐变语法和Webkit引擎的新式语法类似，只是使用的前缀不同而以：

-o-radial-gradient([ || ,]?[ || ,]?,[,]*);

Presto引擎中的Opear11.6开始支持径向渐变。

4. Trident引擎的CSS3径向渐变语法

Trident引擎的浏览器从IE10开始支持径向渐变语法，其语法格式与Webkit引擎的新式语法类似，仅不同的是其前缀不同，需要使用“-ms-”：

-ms-radial-gradient([ || ,]?[ || ,]?,[,]*);

5. W3C标准径向渐变语法

W3C组织从2013年04月开始给径向语法推出新的语法规则：

radial-gradient([[ || ] [at ]?,| at ,]?[,]+);

不过支持径向渐变语法的浏览器，到写这文稿时，仅有IE10+,Firefox16+浏览器支持。

二、径向渐变的属性参数

CSS3的径向渐变相对于线性渐变要复杂的多，属性参数也繁多复杂。CSS3径向变中新老语法中的属性参数定义如下：

：主要用来定义径向渐变的圆心位置。此值类似于CSS中background-position属性，用于确定元素渐变的中心位置。如果这个参数省略了，其默认值为“center”。其值主要有以下几种：

：用长度值指定径向渐变圆心的横坐标或纵坐标。可以为负值。

：用百分比指定径向渐变圆心的横坐标或纵坐标。可以为负值。

left：设置左边为径向渐变圆心的横坐标值。

center：设置中间为径向渐变圆心的横坐标值或纵坐标。

right：设置右边为径向渐变圆心的横坐标值。

top：设置顶部为径向渐变圆心的纵标值。

bottom：设置底部为径向渐变圆心的纵标值。

：主要用来定义径向渐变的形状。其主要包括两个值“circle”和“ellipse”：

circle：如果和大小相等，那么径向渐变是一个圆形，也就是用来指定圆形的径向渐变

ellipse：如果和大小不相等，那么径向渐变是一个椭圆形，也就是用来指定椭圆形的径向渐变。

：主要用来确定径向渐变的结束形状大小。如果省略了，其默认值为“farthest-corner”。可以给其显式的设置一些关键词，主要有：

closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边；

closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角；

farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边；

farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角；

如果设置了为“circle”或者省略，可能显式设置为。表示的是用长度值指定径向渐变的横向或纵向直径长度，并根据横向和纵向的直径来确定径向渐变的形状是圆或者是椭圆。此值不不能负值。

如果设置了“ellipse”或者省略，可能显式设置为［|］。主要用来设置椭圆的大小。第一个值代表椭圆的水平半径，第二个值代表垂直半径。这两个值除了使用定义大小之外还可以使用来定义这两半径大小。使用定义值是相对于径向渐变容器的尺寸。同样不能为负值。

：径向渐变线上的停止颜色，类似于线性渐变的。径向渐变的为渐变线从中心点向右扩散。其中0%表示渐变线的起始点，100%表示渐变线的与渐变容器相交结束的位置。而且其颜色停止可以定义一个负值。

三、径向渐变的基本用法

虽然径向渐变要比线性渐变更为复杂，只要了解了其基本语法以及相关属性参数的作用，我想并不会需要花太多的时间去适应。接下来，我们通过实战来加强径向渐变的使用。下面的所有例子我们都在一个宽度为400像素，高为300像素的容器中实现。

先来看一个最简单的径向渐变，圆心都是容器正中间，从“hsla(120,70%,60%,.9)”颜色向“hsla(360,60%,60%,.9)”颜色实现径向渐变：

div {

width: 400px;

height: 300px;

margin: 50px auto;

border: 5px solid hsla(60,50%,80%,.8);

background-image: -webkit-radial-gradient(hsla(120,70%,60%,.9),hsla(360,60%,60%,.9));

background-image: radial-gradient(hsla(120,70%,60%,.9),hsla(360,60%,60%,.9));

}

效果如下图所示：

如果你想制作一个圆形渐变，而不是一个椭圆形渐变，只需要添加一个关键词“circle”，我们在前例的基础上添加一个关键词“circle”：

div {

width: 400px;

height: 300px;

margin: 50px auto;

border: 5px solid hsla(60,50%,80%,.8);

background-image: -webkit-radial-gradient(circle,hsla(120,70%,60%,.9),hsla(360,60%,60%,.9));

background-image: radial-gradient(circle,hsla(120,70%,60%,.9),hsla(360,60%,60%,.9));

}

效果如下图所示：

正如你所看到的，圆形的渐变是一个特殊的椭圆渐变，水平半径和垂直半径具有相同的长度值。

既然圆形渐变是椭圆渐变的一种特殊情况，如果我们渐变主要半径(水平半径)和次要半径(垂直半径)不相同时就是一个椭圆形渐变。

正如上面所言，主要半径和次要半径不相等时，制作的径向渐变是椭圆形渐变，在制作椭圆形渐变，可以使用关键词“ellipse”：

div {

width: 400px;

height: 300px;

margin: 50px auto;

border: 5px solid hsla(60,50%,80%,.8);

background-image: -webkit-radial-gradient(ellipse,hsla(120,70%,60%,.9),hsla(360,60%,60%,.9));

background-image: radial-gradient(ellipse,hsla(120,70%,60%,.9),hsla(360,60%,60%,.9));

}

效果如下图所示：

除了使用关键词制作不同的径向渐变，还可以用不同的渐变参数制作径向渐变效果，通过制作同心圆，主要半径和次要半径来决定径向渐变的形状。例如，圆心位置都在“200px,150px”处，主要半径为50px，次要半径为150px，从“hsla(120,70%,60%,.9)”色到“hsla(360,60%,60%,.9)”色径向渐变：

div {

width: 400px;

height: 300px;

margin: 50px auto;

border: 5px solid hsla(60,50%,80%,.8);

background-image: -webkit-radial-gradient(50px 150px at 200px 150px,hsla(120,70%,60%,.9),hsla(360,60%,60%,.9));

background-image: radial-gradient(50px 150px at 200px 150px,hsla(120,70%,60%,.9),hsla(360,60%,60%,.9));

}

效果如下图所示：