当前位置: 首页 > HTML5培训 > 前端开发 > CSS > CSS3渐变效果怎么实现

CSS3渐变效果怎么实现时间：2018-01-16 来源：CSS3渐变实现

网页中的渐变背景已经是一种常见的视觉元素，UI设计师都是通过图形软件设计这些渐变效果，再以图片的形式运用到页面中。实际上这种方法是比较麻烦的，首先需要设计师进行设计，再进行制作，最后通过样式设置到页面中。不仅如此，在实际应用中这个方法的可扩展性较差，还直接影响页面性能。

值得庆幸的是，W3C阻止将渐变设计收入到CSS3标准中，让广大前端设计师可以直接通过CSS3的渐变属性制作类似渐变图片的效果，而且此属性如今已得到了大部分现代浏览器的兼容，连一直被人吐槽的IE，也在10这个版本支持了这个属性。通过CSS3的渐变属性可以减少下载的事件和宽带的使用，渐变效果的元素在放大时看起来效果更好，因为渐变是由浏览器生成的。

CSS3渐变的介绍

渐变是两种或多种颜色之间的平滑过渡。在创建渐变的过程中，可以指定多个中间颜色值，这个值成为色标。每个色标包含一种颜色和一个位置，浏览器从每个色标的颜色淡出到下一个，以创建平滑的渐变。

渐变可以应用于任何使用背景图片的地方。在CSS样式中，渐变相当于背景图片，在理论上可在任何使用url()值的地方采用，比如最常见的background-image、list-style-type以及border-image。但目前为止，仅在background-image中得到最完美的支持。

渐变功能的实现

最早支持CSS3渐变的是Webkit内核的浏览器，随后在Firefox和Opera等浏览器得到支持，但是众浏览器之间没有得到统一的标准，用法差异很大。不同的渲染引擎实现渐变的语法也不同，各浏览器下使用都需要带上自己的前缀，给前端设计师们带来极大的不便。

现今，CSS3渐变属性在IE10+、Chrome26.0+、Firefox19.0+、Safari6.1+和Opera12.1+等浏览器已完全支持W3C的标准语法，但在之前的浏览器版本还是需要添加前缀的。

CSS3渐变属性将渐变分成了线性渐变、重复线性渐变、径向渐变和重复径向渐变。接下来，我们将依次介绍它们。

线性渐变

在线性渐变过程中，颜色沿着一条直线过渡：从左侧到右侧、从右侧到左侧、从顶部到底部、从底部到顶部或者沿任意轴。如果你曾使用过制作软件，比如Photoshop，你对线性渐变并不会陌生。

CSS3制作渐变效果，其实和制作软件工具没有什么差别。首先需要制定一个渐变的方向、渐变的起始颜色、渐变的结束颜色。具有这三个参数就可以制作一个最简单、最普通的渐变效果。浏览器渲染出来的效果就是从一种颜色到另一种颜色的平滑淡出，沿所指的线性渐变方向实现颜色渐变效果。

线性渐变语法与参数

W3C标准线性渐变语法
linear-gradient([ [<angle>|to<side-or-corner>] ,]?<color-stop>[,<color-stop>]+)
<side-or-corner> = [left | right] || [top | bottom]
<color-stop> = <color>[ <length> | <percentage> ]?

W3C标准线性渐变语法包括三个主要属性参数：

第一个参数指定了渐变的方向，同时决定了渐变颜色的停止位置。这个参数值可以省略，省略不写时取值为“to bottom”。决定渐变的方向主要有两种方法：

(1)<angle>：单位为deg，通过角度来确定渐变的方法。0度表示渐变方向从下向上90度表示渐变方向从左到右。如果取值为负值，其角度按顺时针方向旋转。

(2)<side-or-corner>：通过关键词来确定渐变的方向。比如“to top”、“to right”、“to bottom”和“to left”。这些关键词对应的角度值为“0deg”、“90deg”、“180deg”和“270deg”。

除此之外，还可以使用“to top left”表示从右下角到左上角，“to bottom right”表示从左上角到右下角等。

第二个和第三个参数color-stop表示颜色的起始点和结束点。其中color指定颜色;length用长度值指定起止色位置，不允许负值;percentage用百分比指定起止色位置。length和percentage两者指定其一。

线性渐变示例

CSS3渐变

径向渐变

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

径向渐变语法与参数

W3C标准径向渐变语法
radial-gradient([ [<shape>||<size>] [at<position>]?,|at<position>,]?
<color-stop>[ , <color-stop> ]+)
<position>= [ <length>① | <percentage>① | left | center① | right ]?
[ <length>② | <percentage>② | top | center②| bottom ]?
<shape> = circle | ellipse
<size>= <extent-keyword> | [ <circle-size> || <ellipse-size> ]
<extent-keyword> = closest-side | closest-corner | farthest-side | farthest-corner
<circle-size>= <length>
<ellipse-size>= [ <length> | <percentage> ]{2}
<shape-size>= <length> | <percentage>
<color-stop>= <color>[ <length> | <percentage> ]?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

径向渐变示例

CSS3渐变