径向渐变 - CSS3 Radial Gradients

lesM10

发布于 2019-08-26 16:54:21

7990

发布于 2019-08-26 16:54:21

简介 - Introduction

渐变在网站中常常用到：如果你想使得(按钮，标题等)有生气，就可以使用渐变。虽然你应该尽量少的使用渐变，以免网页看起来像是圣诞树一样。以往我们常常使用背景图片来给我们的界面添加渐变效果，而且这种方式还是可以的，但是这种方式显得不那么灵活。因为，每次你想要改变渐变的颜色，大小以及渐变的方向时，你都不得不在图片编辑软件中对图片做修改。

CSS Image Values and Replaced Content Module Level 3允许我们以编程的方式在元素上创建渐变。你可以通过代码来改变渐变的颜色，方向等，并且是如此的灵活。例如，你可以在元素上以不同的百分比设置color stops；当元素的尺寸发生改变时，渐变也会做出调整来适应。

在说明书中定义了2种渐变， linear gradients and radial gradients。在前一篇文章中，我们阐述了线性渐变 - CSS3 linear gradients。这篇文章将关注于径向渐变。我们将会阐述所有的基础语法，并会在接近文章尾部的地方，看一下repeating-radial-gradient。

线性渐变语法回顾 - Linear gradient syntax recap

做个回顾，线性渐变的语法其实是相当简单的：

background-image:linear-gradient(
    to bottom right,
    rgb(255, 0, 0),
    rgb(100, 0, 0) 50%,
    rgb(50, 0, 0) 75%,
    rgb(150, 0, 0)
);

在括号中，第一行设置了渐变的方向，紧接着设置了一系列的color stops，渐变在这些color stops之间自然地流动。上面的示例所创建的渐变如下图所示：

Screen Shot 2017-07-09 at 6.57.26 PM.png

注意：Oper, Firefox, IE的最新版本全都支持线性渐变的当前语法，即不用使用前缀，然而基于WebKit的浏览器仍然使用旧的语法。为了兼容旧版本的浏览器和基于WebKit的浏览器，你应该包含带开发商前缀。

需要注意的是：

带to关键字的方向与不带to关键字的方向之间的区别。具体请参考我所翻译的上篇文章。
当为方向指定角度时，你所使用的角度时罗盘角。以往的0度是数学中的0度，而现在的零度是以背景区域的中心为起点，指向竖直向上的方向为0度。

完整的代码示例如下：

background-image:-webkit-linear-gradient(top left, rgb(255,0,0), rgb(100,0,0) 50%, rgb(50,0,0) 75%, rgb(150,0,0));
background-image:-moz-linear-gradient(top left, rgb(255,0,0), rgb(100,0,0) 50%, rgb(50,0,0) 75%, rgb(150,0,0));
background-image:-ms-linear-gradient(top left, rgb(255,0,0), rgb(100,0,0) 50%, rgb(50,0,0) 75%, rgb(150,0,0));
background-image:-o-linear-gradient(top left, rgb(255,0,0), rgb(100,0,0) 50%, rgb(50,0,0) 75%, rgb(150,0,0));
background-image:linear-gradient(to bottom right, rgb(255,0,0), rgb(100,0,0) 50%, rgb(50,0,0) 75%, rgb(150,0,0));

径向渐变语法 - Radial gradient syntax

径向渐变稍微有点复杂，但是也不需要话费太多时间来适应。其语法形式如下：

radial-gradient(
    `size shape` at `position`,      //  `是分隔符，没有实际的语意
    `colour stops`
);

就像线性渐变一样，Opera，Firefox和IE全都支持最新的‘不带前缀的径向渐变语法’。基于WebKit-的浏览器仍使用旧式的语法(需要带前缀)。旧式的径向渐变语法也是使用相同的values，但是形式不同：

radial-gradient(
    `position`,
    `size and shape`,
    `colour stops`
);

所以兼容所有浏览器的示例看起来是这样子的：

-webkit-radial-gradient(50% 50%, circle, rgb(75, 75, 200), rgb(0, 0, 75));
-moz-radial-gradient(50% 50%, circle, rgb(75, 75, 200), rgb(0, 0, 75));
-ms-radial-gradient(50% 50%, circle, rgb(75, 75, 200), rgb(0, 0, 75));
-o-radial-gradient(50% 50%, circle, rgb(75, 75, 200), rgb(0, 0, 75));
radial-gradient(circle at 50% 50%, rgb(75, 75, 200), rgb(0, 0, 75));

上面示例会创建一个柔和的蓝色渐变(从元素的中心向外渐变)，结果如下图：

https://dev.opera.com/articles/css3-radial-gradients/gradients3.png

现在让我们来深入了解下：postion, size and shape, colour stops。

position

径向渐变发散的起始位置position指定了：径向渐变的中心点的位置(渐变从哪个位置向外发散)。position位于at后，position可以是关键字和unit values，指定position的方式和指定CSS中background-position的方式基本一致。

circle at left top意味着：把渐变的中心点放置在左上角。

https://dev.opera.com/articles/css3-radial-gradients/position1.png

circle at 20% 70%意味着：把渐变的中心点放置在距离元素左侧20% 距离元素顶部70% 的位置。

https://dev.opera.com/articles/css3-radial-gradients/position2.png

circle at 70px 80px意味着：把渐变的中心点放置在距离元素左侧70px 距离元素顶部80px 的位置。

https://dev.opera.com/articles/css3-radial-gradients/position3.png

circle at 0%意味着：把渐变的中心点放置在元素的左侧边垂直居中。如果你只指定了一个值，该值会被认为是水平方向上的值，垂直方向上的值默认为50%(也就是垂直居中)。

https://dev.opera.com/articles/css3-radial-gradients/position4.png

如果你没有为gradient position设置任何值，gradient position会默认为元素的背景区域的中心，即是center center或者50% 50%。

https://dev.opera.com/articles/css3-radial-gradients/gradients3.png

size and shape

渐变的size and shape是通过使用显式的size和shape关键字组合的方式，或者隐式的size和shape关键字组合的方式来设置的。

Explicit sizes

当使用显式的size时，你所设置的2个values 是gradient shape的水平半径和垂直半径。如果你指定了circle关键字和一个值，你会得到一个圆。如果你指定了ellipse关键字和2个值，或者仅仅指定了2个值，你会得到一个椭圆。你可以使用任意的CSS units，只要在它所处的情况中合理即可，但是你不能使用百分比。

40px circle意味着：使渐变的形状是圆的，而且半径是40px。

https://dev.opera.com/articles/css3-radial-gradients/size1.png

2em 4em ellipse意味着：使渐变的形状是椭圆，水平方向的半径是2em，垂直方向的半径是4em。

https://dev.opera.com/articles/css3-radial-gradients/size2.png

注意：如果你没有设置任何值，会设置ellipse cover为默认值。(下面的部分会介绍cover关键字)

Implicit sizes

当使用隐式的size时，你可以使用若干个不同的关键字。这些关键字指定了：你想让渐变的形状circle, ellipse的最外沿接触到容器的最近角，最远角，还是最近边，最远边(最近，最远都是相对于position的位置而定的)。在这个示例中，我们使button为正方形，并且设置渐变中心的位置为：水平35%，垂直25%。

closest-side circle at 35% 25%会使渐变的最外沿接触到距离渐变中心最近的元素的那条边。把circle更换为ellipse，会使渐变的最外沿接触到距离渐变中心最近的元素的那2条边。你可以使用关键字contain来代替closest-side。

https://dev.opera.com/articles/css3-radial-gradients/circle-closest-side.png

https://dev.opera.com/articles/css3-radial-gradients/ellipse-closest-side.png

closest-corner circle at 35% 25%会使渐变的最外沿接触到距离渐变中心最近的元素的那个角。把circle更换为ellipse，也是同样的效果。

https://dev.opera.com/articles/css3-radial-gradients/circle-closest-corner.png

https://dev.opera.com/articles/css3-radial-gradients/ellipse-closest-corner.png

farthest-side circle at 35% 25%会使渐变的最外沿接触到距离渐变中心最远的元素的那条边。把circle更换为ellipse，会使渐变的最外沿接触到距离渐变中心最远的元素的那2条边。

https://dev.opera.com/articles/css3-radial-gradients/circle-farthest-side.png

https://dev.opera.com/articles/css3-radial-gradients/ellipse-farthest-side.png

farthest-corner circle at 35% 25%会使渐变的最外沿接触到距离渐变中心最远的元素的那个角。不管是circle还是ellipse，你都可以使用关键字cover来代替farthest-corner。

https://dev.opera.com/articles/css3-radial-gradients/circle-farthest-corner.png

https://dev.opera.com/articles/css3-radial-gradients/ellipse-farthest-corner.png

Colour stops

在径向渐变语法的最后部分，你可以指定至少2个color stops - 这些color stops指定了沿着渐变方向的不同位置上是什么颜色，并且浏览器会填充color stops之间的颜色。你可以在沿着渐变方向的不同位置上使用任意的单位，只要合理即可。你也可以使用不同的方式指定颜色(16进制颜色值，关键字，rgb，rgba等等)。每个color stop之间是使用逗号分隔的。

#ff0000, #000000: color stop最简单的设置是只使用2个颜色。当color stop后没指定position时，浏览器会默认第一个color stop在0%位置，第二个color stop在100%位置(100%即是在最外沿)。

https://dev.opera.com/articles/css3-radial-gradients/colour-stop1.png

rgb(255,0,0), rgb(150,150,150) 50%, rgb(0,0,0): 这儿我们有3个color stop，并且是使用RGB来设置颜色的。第一个颜色在渐变方向上的位置为0%，最后一个颜色在渐变方向上的位置为100%，但是我们还有一个不同的color stop在 50%位置。

https://dev.opera.com/articles/css3-radial-gradients/colour-stop2.png

rgb(255,0,0) 20px, rgb(150,150,150) 40px, rgb(0,200,0) 60px, rgb(0,0,0) 80px: 4个color stop，这次使用pixel values 在渐变方向上放置颜色值。你会发现：如果你不指定在渐变起始位置和结束位置上的颜色值，起始位置的颜色值会采用第一个color stop的颜色值，同样地结束位置的颜色值会采用最后一个color stop的颜色值。

https://dev.opera.com/articles/css3-radial-gradients/colour-stop3.png

让我们来看个实际使用中的示例：

background-image:-webkit-radial-gradient(30% 40%, rgb(255,0,0), rgb(0,0,0));
background-image:-moz-radial-gradient(30% 40%, rgb(255,0,0), rgb(0,0,0));
background-image:-ms-radial-gradient(30% 40%, rgb(255,0,0), rgb(0,0,0));
background-image:-o-radial-gradient(30% 40%, rgb(255,0,0), rgb(0,0,0));
background-image:radial-gradient(circle at 30% 40%, rgb(255,0,0), rgb(0,0,0));

上面示例的效果(活生生的示例) 如下图：

https://dev.opera.com/articles/css3-radial-gradients/radial-gradient.png

当鼠标hover在按钮上时，按钮稍微下陷。当按钮被点击时，它们会深深的陷入。我通过在鼠标的hover，active状态下使用各种inset box shadow来达到效果。

Repeating radial gradients

和线性渐变的方式一样，你可以通过使用相关的repeat property 来创建repeating-radial-gradient。

repeating-radial-gradient仅仅是采用你为径向渐变设置的方式，并重复这个方式到元素的边界。

background:-webkit-repeating-radial-gradient(center, 30px 30px, #009, #0000FA 50%, #009);
background:-moz-repeating-radial-gradient(center, 30px 30px, #009, #0000FA 50%, #009);
background:-ms-repeating-radial-gradient(center, 30px 30px, #009, #0000FA 50%, #009);
background:-o-repeating-radial-gradient(center, 30px 30px, #009, #0000FA 50%, #009);
background:repeating-radial-gradient(30px circle, #009, #0000FA 50%, #009);

效果如下图：