CSS3 gradient-radial gradient_html/css_WEB-ITnose について話しましょう

CSS3 放射状グラデーション

CSS3 放射状グラデーションは、円形または楕円形のグラデーションです。色は直線軸に沿って変化するのではなく、開始点から全方向にブレンドされます。ただし、比較的線形のグラデーションは放射状のグラデーションよりもはるかに複雑です。

1. 放射状グラデーションの構文

CSS3 の放射状グラデーションは、多くのブラウザ エンジンでサポートされていますが、その構文のバージョンは、特に Webkit エンジンでは異なります。線形グラデーションと同様に、古い方法と新しい方法があります。他の主要なエンジンを搭載したブラウザでは、構文は基本的に似ていますが、使用されるプレフィックスが異なります。特に 2013 年から 2004 年にかけて、W3C は CSS3 放射状グラデーションの最新の構文形式を発表しました。次に、各エンジン ブラウザーでの放射状グラデーション構文を見てみましょう。

1. Webkit エンジンの CSS3 放射状グラデーション構文

Webkit エンジンの CSS3 放射状グラデーションの構文は、古いバージョンの構文ともう 1 つのタイプに分かれています。は新しいバージョンです。 構文:

Webkit エンジンの古いバージョンの構文:

-webkit-gradient([<type>],[<position> || <angle>,]?[<shape> ||<size>,]?<color-stop>,<color-stop>[,<color-stop>]*);

Webkit エンジンの新しい構文

-webkit-radial-gradient([<position> || <angle>,]?[<shape> || <size>,]?<color-stop>,<color-stop>[,<color-stop>]*);

Webkit エンジンのブラウザ Chrome 4-9 および Safari 4-5 は古い Webkit エンジンをサポートしています。放射状構文。Chrome10.0 以降および Safari5.1 以降は、Webkit エンジンの新しい放射状グラデーションをサポートします。

2. Gecko エンジンの CSS3 の放射状グラデーション構文

Gecko エンジンの CSS3 の放射状グラデーション構文は、使用されるプレフィックスが異なることを除いて Webkit エンジンの新しい構文と似ています: Firefox ブラウザーの

-moz-radial-gradient([<position> || <angle>,]?[<shape> || <size>,]?<color-stop>,<color-stop>[,<color-stop>]*);

Firefox3 Gecko エンジンはバージョン 6 以降で放射状グラデーションをサポートします。

3. Presto エンジンの CSS3 放射状グラデーション構文

Presto エンジンの CSS3 放射状グラデーション構文は、使用されるプレフィックスが異なることを除いて Webkit エンジンの新しい構文と似ています:

-o-radial-gradient([<position> || <angle>,]?[<shape> || <size>,]?<color-stop>,<color-stop>[,<color-stop>]*);

Presto エンジンの Opear11.6 は Radial のサポートを開始します勾配。

4. Trident エンジンの CSS3 放射状グラデーション構文

Trident エンジン ブラウザは、IE10 以降の放射状グラデーション構文をサポートします。その構文形式は、Webkit エンジンの新しい構文と似ています。唯一の違いは、プレフィックスが異なることです。 " -ms-" を使用する必要があります:

-ms-radial-gradient([<position> || <angle>,]?[<shape> || <size>,]?<color-stop>,<color-stop>[,<color-stop>]*);

5. W3C 標準の放射状グラデーション構文

W3C 組織は、2013 年 4 月に放射状構文の新しい構文規則を導入し始めました:

radial-gradient([[<shape> || <size>] [at <position>]?,| at <position>,]?<color-stop>[,<color-stop>]+);

ただし、放射状グラデーション構文をサポートするブラウザーは、この記事の執筆時点では、IE10 以降と Firefox16 以降のブラウザのみがサポートされています。

2. 放射状グラデーションの属性パラメーター

CSS3 放射状グラデーションは線形グラデーションよりもはるかに複雑で、属性パラメーターも多数で複雑です。 CSS3 放射状変更の新旧構文の属性パラメーターは次のように定義されています:

: 主に放射状グラデーションの中心位置を定義するために使用されます。この値はCSSのbackground-positionプロパティに似ており、要素のグラデーションの中心位置を決定するために使用されます。このパラメータを省略した場合、デフォルト値は「center」です。主な値は次のとおりです。

: 長さの値を使用して、放射状グラデーション円の中心の横座標または縦座標を指定します。マイナスになることもあります。

: パーセンテージを使用して、放射状グラデーション円の中心の横座標または縦座標を指定します。マイナスになることもあります。

left: 左側を放射状グラデーション円の中心の横座標値に設定します。

center: 放射状グラデーション円の中心の横座標値または縦座標を設定します。

right: 右側を放射状グラデーション円の中心の横座標値に設定します。

top: 上部を放射状グラデーション円の中心の座標値に設定します。

bottom: 底部を放射状グラデーション円の中心の座標値に設定します。

: 主に放射状グラデーションの形状を定義するために使用されます。これには主に「circle」と「ellipse」の 2 つの値が含まれます。

circle: と のサイズが等しい場合、放射状のグラデーションは円になります。円の半径方向 Gradient

ellipse: と のサイズが等しくない場合、半径方向のグラデーションは楕円になります。これは、楕円を指定するために使用される半径方向のグラデーションです。

: 主に放射状グラデーションの終端形状のサイズを決定するために使用されます。省略した場合のデフォルト値は「最遠コーナー」です。主に次のようないくつかのキーワードを明示的に設定できます。

closest-side: 円の中心から円の中心に最も近い側までの放射状グラデーションの半径の長さを指定します。

closest-corner: を指定します。放射状グラデーションの半径の長さは、円の中心から円の中心に最も近い角度までです。

最遠側: 円の中心から最も遠い側までの放射状グラデーションの半径の長さを指定します。円の中心;

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));}

效果如下图所示：

CodePen的案例

如果你想制作一个圆形渐变，而不是一个椭圆形渐变，只需要添加一个关键词“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));}

效果如下图所示：

CodePen的案例

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

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

正如上面所言，主要半径和次要半径不相等时，制作的径向渐变是椭圆形渐变，在制作椭圆形渐变，可以使用关键词“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));}

效果如下图所示：

CodePen的案例

除了使用关键词制作不同的径向渐变，还可以用不同的渐变参数制作径向渐变效果，通过制作同心圆，主要半径和次要半径来决定径向渐变的形状。例如，圆 心位置都在“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));}

效果如下图所示：

CodePen的案例

上图实现的是内径小于外径制作的径向渐变效果，接着我们来看看圆心相同，内外半径大小相同实现的渐变效果：

div { width: 400px; height: 300px; margin: 50px auto; border: 5px solid hsla(60,50%,80%,.8); background-image: -webkit-radial-gradient(200px 200px at 200px 150px,hsla(120,70%,60%,.9),hsla(360,60%,60%,.9)); background-image: radial-gradient(200px 200px at 200px 150px,hsla(120,70%,60%,.9),hsla(360,60%,60%,.9));}

效果如下图所示：

CodePen的案例

上图效果告诉我们，当内外圆的圆心相同，并且主要半径和次要半径相等时，制作的渐变效果就等同于制作了一个圆形径向渐变效果。接下来我们在看一个实例，圆心相同，主要半径大于次要的半径制作的径向渐变：

div { width: 400px; height: 300px; margin: 50px auto; border: 5px solid hsla(60,50%,80%,.8); background-image: -webkit-radial-gradient(300px 100px at 200px 150px,hsla(120,70%,60%,.9),hsla(360,60%,60%,.9)); background-image: radial-gradient(300px 100px at 200px 150px,hsla(120,70%,60%,.9),hsla(360,60%,60%,.9));}

效果如下图所示：

CodePen的案例

除了使用值之外，还可以使用值，其具体使用细节类似于的使用方法：

div { width: 400px; height: 300px; margin: 50px auto; border: 5px solid hsla(60,50%,80%,.8); background-image: -webkit-radial-gradient(80% 20% at 30% 60%, hsla(120,70%,60%,.9),hsla(360,60%,60%,.9)); background-image: radial-gradient(80% 20% at 30% 60%, hsla(120,70%,60%,.9),hsla(360,60%,60%,.9));}

效果如下图所示：

CodePen的案例

除了上述方法能实现一些简的径向渐变效果之外，还可以使用渐变形状配合圆心定位。主要使用“at”加上关键词来定义径向渐变中心位置。径向渐变中心位置类似于background-position 属性，可以使用一些关键词来定义：

A）、center：设置径向渐变中心位置在容器的中心点，相当于at 50％ 50％。类似于background-position:center。

/* at center*/.center .circle { background-image: -webkit-radial-gradient(circle at center, rgb(220, 75, 200),rgb(0, 0, 75)); background-image: radial-gradient(circle at center, rgb(220, 75, 200),rgb(0, 0, 75));}.center .ellipse { background-image: -webkit-radial-gradient(ellipse at center, rgb(220, 75, 200),rgb(0, 0, 75)); background-image: radial-gradient(ellipse at center, rgb(220, 75, 200),rgb(0, 0, 75));}

效果如下图所示：

CodePen的案例

B）、top：设置径向圆心点在容器的顶边中心点处，与at 50% 0%效果等效。类似于background-position的center top。

/* at top*/.top .circle { background-image: -webkit-radial-gradient(circle at top, rgb(220, 75, 200),rgb(0, 0, 75)); background-image: radial-gradient(circle at top, rgb(220, 75, 200),rgb(0, 0, 75));}.top .ellipse { background-image: -webkit-radial-gradient(ellipse at top, rgb(220, 75, 200),rgb(0, 0, 75)); background-image: radial-gradient(ellipse at top, rgb(220, 75, 200),rgb(0, 0, 75));}

效果如下图所示：

CodePen的案例

C）、right：设置径向渐变圆心点在容器右边中心点处，与at 100% 50%的效果等同。类似于background-position的right center。

/* at right */.right .circle { background-image: -webkit-radial-gradient(circle at right, rgb(220, 75, 200),rgb(0, 0, 75)); background-image: radial-gradient(circle at right, rgb(220, 75, 200),rgb(0, 0, 75));}.right .ellipse { background-image: -webkit-radial-gradient(ellipse at right, rgb(220, 75, 200),rgb(0, 0, 75)); background-image: radial-gradient(ellipse at right, rgb(220, 75, 200),rgb(0, 0, 75));}

效果如下图所示：

CodePen的案例

D）、bottom：设置径向渐变圆心点在容器底边中心点处，刚好与“top”关键词位置相反，与at 50% 100%效果等同。类似于background-position中的center bottom。

.bottom .circle { background-image: -webkit-radial-gradient(circle at bottom, rgb(220, 75, 200),rgb(0, 0, 75)); background-image: radial-gradient(circle at bottom, rgb(220, 75, 200),rgb(0, 0, 75));}.bottom .ellipse { background-image: -webkit-radial-gradient(ellipse at bottom, rgb(220, 75, 200),rgb(0, 0, 75)); background-image: radial-gradient(ellipse at bottom, rgb(220, 75, 200),rgb(0, 0, 75));}

效果如下图所示：

CodePen的案例

E）、left：设置径向渐变圆心点在容器左边中心点处，刚好与“right”关键词位置相反，与at 0% 50%效果等同。类似于background-position的center left。

/* at left */.left .circle { background-image: -webkit-radial-gradient(circle at left, rgb(220, 75, 200),rgb(0, 0, 75)); background-image: radial-gradient(circle at left, rgb(220, 75, 200),rgb(0, 0, 75));}.left .ellipse { background-image: -webkit-radial-gradient(ellipse at left, rgb(220, 75, 200),rgb(0, 0, 75)); background-image: radial-gradient(ellipse at left, rgb(220, 75, 200),rgb(0, 0, 75));}

效果如下图所示：

CodePen的案例

F）、top left：设置径向渐变圆心点在容器的左角顶点处，与关键词“let top”和at 0 0效果等同。类似于background-position的left top。

/* at top left*/.top-left .circle { background-image: -webkit-radial-gradient(circle at top left, rgb(220, 75, 200),rgb(0, 0, 75)); background-image: radial-gradient(circle at top left, rgb(220, 75, 200),rgb(0, 0, 75));}.top-left .ellipse { background-image: -webkit-radial-gradient(ellipse at top left, rgb(220, 75, 200),rgb(0, 0, 75)); background-image: radial-gradient(ellipse at top left, rgb(220, 75, 200),rgb(0, 0, 75));}/* at left top*/.left-top .circle { background-image: -webkit-radial-gradient(circle at left top, rgb(220, 75, 200),rgb(0, 0, 75)); background-image: radial-gradient(circle at left top, rgb(220, 75, 200),rgb(0, 0, 75));}.left-top .ellipse { background-image: -webkit-radial-gradient(ellipse at left top, rgb(220, 75, 200),rgb(0, 0, 75)); background-image: radial-gradient(ellipse at left top, rgb(220, 75, 200),rgb(0, 0, 75));}

效果如下图所示：

CodePen的案例

G）、top right：设置径向渐变圆心点在容器右角顶点处，与“right top”关键词与at 100% 0效果等同。类似于background-position的top right。

/*at top right*/.top-right .circle { background-image: -webkit-radial-gradient(circle at top right, rgb(220, 75, 200),rgb(0, 0, 75)); background-image: radial-gradient(circle at top right, rgb(220, 75, 200),rgb(0, 0, 75));}.top-right .ellipse { background-image: -webkit-radial-gradient(ellipse at top right, rgb(220, 75, 200),rgb(0, 0, 75)); background-image: radial-gradient(ellipse at top right, rgb(220, 75, 200),rgb(0, 0, 75));}/* at right top*/.right-top .circle { background-image: -webkit-radial-gradient(circle at right top, rgb(220, 75, 200),rgb(0, 0, 75)); background-image: radial-gradient(circle at right top, rgb(220, 75, 200),rgb(0, 0, 75));}.right-top .ellipse { background-image: -webkit-radial-gradient(ellipse at right top, rgb(220, 75, 200),rgb(0, 0, 75)); background-image: radial-gradient(ellipse at right top, rgb(220, 75, 200),rgb(0, 0, 75));}

效果如下图所示：

CodePen的案例

H）、bottom right：设置径向渐变的圆心点在容器右下角顶点处，与关键词“right bottom”和at 100% 100%效果等同。类似于background-position的bottom right。

/* at bottom right*/.bottom-right .circle { background-image: -webkit-radial-gradient(circle at bottom right, rgb(220, 75, 200),rgb(0, 0, 75)); background-image: radial-gradient(circle at bottom right, rgb(220, 75, 200),rgb(0, 0, 75));}.bottom-right .ellipse { background-image: -webkit-radial-gradient(ellipse at bottom right, rgb(220, 75, 200),rgb(0, 0, 75)); background-image: radial-gradient(ellipse at bottom right, rgb(220, 75, 200),rgb(0, 0, 75));}/* at right bottom*/.right-bottom .circle { background-image: -webkit-radial-gradient(circle at right bottom, rgb(220, 75, 200),rgb(0, 0, 75)); background-image: radial-gradient(circle at right bottom, rgb(220, 75, 200),rgb(0, 0, 75));}.right-bottom .ellipse { background-image: -webkit-radial-gradient(ellipse at right bottom, rgb(220, 75, 200),rgb(0, 0, 75)); background-image: radial-gradient(ellipse at right bottom, rgb(220, 75, 200),rgb(0, 0, 75));}

效果如下图所示：

CodePen的案例

I）、bottom left：设置径向渐变圆心在容器左下角顶点处，与关键词“left bottom”和 at 0% 100%效果等同。类似于background-position的bottom left。

/* at bottom left*/.bottom-left .circle { background-image: -webkit-radial-gradient(circle at bottom left, rgb(220, 75, 200),rgb(0, 0, 75)); background-image: radial-gradient(circle at bottom left, rgb(220, 75, 200),rgb(0, 0, 75));}.bottom-left .ellipse { background-image: -webkit-radial-gradient(ellipse at bottom left, rgb(220, 75, 200),rgb(0, 0, 75)); background-image: radial-gradient(ellipse at bottom left, rgb(220, 75, 200),rgb(0, 0, 75));}/* at left bottom*/.left-bottom .circle { background-image: -webkit-radial-gradient(circle at left bottom, rgb(220, 75, 200),rgb(0, 0, 75)); background-image: radial-gradient(circle at left bottom, rgb(220, 75, 200),rgb(0, 0, 75));}.left-bottom .ellipse { background-image: -webkit-radial-gradient(ellipse at left bottom, rgb(220, 75, 200),rgb(0, 0, 75)); background-image: radial-gradient(ellipse at left bottom, rgb(220, 75, 200),rgb(0, 0, 75));}

效果如下图所示：

CodePen的案例

综合上面的实例以及对应的效果，大家在理解径向渐变使用关键词设置径向渐变圆心位置，可以把其当作元素背景中的background-position属性来理解。用来设置元素径向渐变圆心的所有可用关键词对照的位置关系，可以浏览下图：

前面分别给大家介绍了使用 、渐变类型关键词以及渐变类型配合关键词制作的径向渐变效果。除了上述方法可以制作一些径向渐变效果之外，还可以使用和渐变类型以及圆心关键词结合制作一些径向渐变效果。

当给元素显式的设置了径向渐变的大小，这两个值设置了径向渐变的水平和垂直半径。如果一个径向渐变包含径向渐变类型“circle”和一个单一的大 小值，您就可以实现一个圆形的径向渐变。如果一个径向渐变包含了径向渐变类型“ellipse”和两个值，或者只是两个值，您就可以实现一个椭圆形的径向 渐变。在设置径向半径大小值时，您可以使用任何CSS的单位长度值都有效。例如：

A)、使用20px circle制作一个径向半径为20px的圆形径向渐变：

div { width: 300px; height: 300px; border-radius: 100%; margin: 50px auto; border: 5px solid hsla(60,50%,80%,.8); background-image: -webkit-radial-gradient(20px circle,hsla(220,89%,100%,1),hsla(30,60%,60%,.9)); background-image: radial-gradient(20px circle,hsla(220,89%,100%,1),hsla(30,60%,60%,.9));}

效果如下图所示：

CodePen的案例

B）、使用2em 4em ellipse制作椭圆形径向渐变，其中主要半径为2em，次要半径为4em。

div { width: 300px; height: 300px; border-radius: 100%; margin: 50px auto; border: 5px solid hsla(60,50%,80%,.8); background-image: -webkit-radial-gradient(2em 4em ellipse,hsla(220,89%,100%,1),hsla(30,60%,60%,.9)); background-image: radial-gradient(2em 4em ellipse,hsla(220,89%,100%,1),hsla(30,60%,60%,.9));}

效果如下图所示：

CodePen的案例

C)、使用8em circle at top配合圆心位置关键词制作一个圆形径向渐变，其半径大小为5em，圆心在top处。

div { width: 300px; height: 300px; border-radius: 100%; margin: 50px auto; background-image: -webkit-radial-gradient(8em circle at top,hsla(220,89%,100%,1),hsla(30,60%,60%,.9)); background-image: radial-gradient(8em circle at top,hsla(220,89%,100%,1),hsla(30,60%,60%,.9));}

效果如下图所示：

CodePen的案例

除了通过给径向渐变显式的设置大小之外，我们还可以通过关键词隐式的为径向渐变设置大小。其中的每个关键词指定径向渐变大 小的算法。也就是通过圆心指向径向渐变的边或者角来确定径向渐变的大小。不过在圆形和椭圆形的径向渐变之中，他们算出来的大小略有不同。虽然最初看上去似 乎有些复杂，一旦您理解了这些关键词的意义，一切就变得简单。

当使用closest-side来设置一个圆形径向渐变大小，主要是通过径向边缘与离元素最近边缘的切点到圆心之间的直线距离大决定。如下图所示：

当使用closest-side来设置椭圆形径向渐变大小，主要通过径向渐变水平与垂直边缘与离最近边缘切点到圆心的直线距离大小决定。如下图所示：

当使用closest-corner来设置圆形径向渐变大小，主要通过渐变边缘与到元素最近顶角交接点到圆心直线距离决定，如下图所示：

当使用“closest-corner”来设置椭圆形径向渐变大小，主要通过径向渐变边缘与到元素最近顶角交接点到圆心的直线距离大小决定，如下图所示：

 

当使用“farthest-side”来设置圆形径向渐变大小，主要通过径向渐变边缘与元素最远边的切点到圆心的直线距离大小决定，如下图所示：

当使用“farthest-side”来设置椭圆形径向渐变大小，主要通过径向渐变与元素最远边切点到圆心的直线距离大小决定。如下图所示：

当使用“farthest-corner”来设置圆形径渐变的大小，主要通过径向渐变边缘与元素最远顶角交点到圆心的直线距离决定，如下图所示：

当使用“farthest-corner”来设置椭圆形径向渐变，主要通过渐变边缘与元素最远顶点的交接点到圆心的直线距离决定，如下图所示：

为了更好的说明这些关键词的使用，下面的实例中，我们将圆心定义在“at 50% 75%”的位置，分别演示了“closest-side”、“closest-corner”、“farthest-side”和“farthest- corner”分别在圆形与椭圆形径向渐变的效果。

/* closest-side*/.closest-side .circle { background-image: -webkit-radial-gradient(closest-side circle at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75)); background-image: radial-gradient(closest-side circle at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));}.closest-side .ellipse { background-image: -webkit-radial-gradient(closest-side ellipse at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75)); background-image: radial-gradient(closest-side ellipse at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));}/* closest-corner*/.closest-corner .circle { background-image: -webkit-radial-gradient(closest-corner circle at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75)); background-image: radial-gradient(closest-corner circle at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));}.closest-corner .ellipse { background-image: -webkit-radial-gradient(closest-corner at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75)); background-image: radial-gradient(closest-corner ellipse at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));}/* farthest-side */.farthest-side .circle { background-image: -webkit-radial-gradient(farthest-side circle at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75)); background-image: radial-gradient(farthest-side circle at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));}.farthest-side .ellipse { background-image: -webkit-radial-gradient(farthest-side ellipse at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75)); background-image: radial-gradient(farthest-side ellipse at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));}/* farthest-corner */.farthest-corner .circle { background-image: -webkit-radial-gradient(farthest-corner circle at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75)); background-image: radial-gradient(farthest-corner circle at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));}.farthest-corner .ellipse { background-image: -webkit-radial-gradient(farthest-corner ellipse at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75)); background-image: radial-gradient(farthest-corner ellipse at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));}

效果如下图所示：

CodePen的案例

在径向渐变中，除了能设置径向渐变的圆心位置、半径大小之外，还可以设置径向渐的颜色，前面我们演示的都是简单的两个颜色制作的径向渐变，接下来通过属性参数来设置径向渐变的颜色。

下面我们在前面的基础上增加一个颜色，实现三色渐变效果：

div { margin: 20px auto; width: 200px; height: 200px; border-radius: 100%; background-image: -wekbit-radial-gradient(red,green,blue); background-image: radial-gradient(red,green,blue);}

效果如下图所示：

CodePen的案例

上面的示例是一个简单的三色径向渐变，只是通过设置三个颜色，从容器的中心向外由红色（red）、绿色（green）到蓝色(blue)。这可以说是最简单的了多色径向渐变了，除此之外，我们还可以给每个颜色设置具体的显示位置：

div { margin: 20px auto; width: 200px; height: 200px; border-radius: 100%; background-image: -wekbit-radial-gradient(red 20%,green 50%,blue 80%); background-image: radial-gradient(red 20%,green 50%,blue 80%);}

效果如下图所示：

CodePen的案例

在径向渐变中的渐变颜色，我们可以使用任何表示颜色的格式，并且确定渐变颜色的位置可以使用任何表示长度的单位值，同时颜色数量不会做任何限制，而且前面介绍有关于径向渐变的属性参数都可以配合多种颜色，制作出一些更特殊的径向渐变效果：

.circle { background-image: -wekbit-radial-gradient(90px circle at top,rgb(0,0,0) 30%,rgba(255,190,90,.9) 200px,hsl(123,58%,90%) 8em,hsla(230,40%,90%,.8) 80%,blue); background-image: radial-gradient(90px circle at top,rgb(0,0,0) 30%,rgba(255,190,90,.9) 200px,hsl(123,58%,90%) 8em,hsla(230,40%,90%,.8) 80%,blue);}.ellipse { background-image: -wekbit-radial-gradient(farthest-side ellipse at top,rgb(0,0,0) 30%,rgba(255,190,90,.9) 200px,hsl(123,58%,90%) 8em,hsla(230,40%,90%,.8) 80%,blue); background-image: radial-gradient(farthest-side ellipse at top,rgb(0,0,0) 30%,rgba(255,190,90,.9) 200px,hsl(123,58%,90%) 8em,hsla(230,40%,90%,.8) 80%,blue);}

效果如下图所示：

CodePen的案例

上面主要介绍了渐变中的径向渐变相关语法与基础使用。接下来借此机会简单的介绍一下重复渐变的一些基础知识。

重复渐变

线性渐变和径向渐变都属于CSS中背景属性中的背景图片（background-image）属性。有时候我们希望创建一种在一个元素的背景上重复 的渐变“模式”。在没有重复渐变的属性之前，主要通过重复背景图像（使用background-repeat）创建线性重复渐变，但是没有创建重复的径向 渐变的类似方式。幸运的是，CSS3通过“repeating-linear-gradient”和“repeating-radial- gradient”语法提供了补救方法。可以直接实现重复的渐变效果。

1、重复线性渐变

我们可以使用重复线性渐变“repeating-linear-gradient”属性来代替线性渐变“linear-gradient”。他们采 取相同的值，但色标在两个方向上都无限重复。不过使用百分比设置色标的位置没有多大的意义，但使用像素和其他的单位，重复线性渐变可以创建一些很酷的效 果。例如下面的实例：

div { width: 400px; height: 300px; margin: 20px auto; background-image: -webkit-repeating-linear-gradient(red,green 40px, orange 80px); background-image: repeating-linear-gradient(red,green 40px, orange 80px);}

在这个例子中从开始红色（red）向40px处的绿色（green）渐变，然后向80px处的橙色（orange）渐变。因为他是一个重复的线性渐变，它不断以这个模式从上向下重复平铺。如下图所示：

效果如下图所示：

CodePen的案例

2、重复径向渐变

以同样的方式，你可以使用相关的属性创建重复的径向渐变。其语法和radial-gradient类似，只是以一个径向渐变为基础进行重复渐变，如下例所示：

div { width: 400px; height: 300px; margin: 20px auto; background-image: -webkit-radial-linear-gradient(red,green 40px, orange 80px); background-image: repeating-radial-gradient(red,green 40px, orange 80px);}

效果如下图所示：

CodePen的案例

重复渐变制作记事本纸张效果

记事本我想大家都清楚，每张纸都有横线条，左边有两条竖线从顶部延伸到底部。今天我们就一起使用重复渐变来制作这样的纸张背景效果。我们不使用任何图片，只使用CSS3的重复渐变在body上写效果：

body { margin: 0; padding: 0; height: 100%;}body { background: -webkit-repeating-linear-gradient(to top, #f9f9f9, #f9f9f9 29px, #ccc 30px); background: repeating-linear-gradient( to top, #f9f9f9, #f9f9f9 29px, #ccc 30px ); background-size: 100% 30px; position: relative;}

在这个效果中，仅重复渐变属性是无法完成的，我们还需要CSS3的另一个属性background-size，用来指定背景图像的大小为100% 30px。尽管CSS3渐变显示的是颜色，实际上他是一张图像而不是颜色。

接下来使用伪类“:before”在纸张边添加两条竖线：

body:before { content: ""; display: inline-block; height: 100%; width: 4px; border-left: 4px double #FCA1A1; position: absolute; left: 30px;}

我们最终看到的效果如下图所示：

效果如下图所示：

CodePen的案例

浏览器兼容性

CSS3的渐变的语法也几经变化，不过让前端设计师值得庆幸的是，直到写本文的时候，CSS3的渐变语法在除了在Webkit的Sarfari浏览器和IE10以下的浏览器没有得到支持之外，其他浏览器对渐变支持都很稳定。