当前位置: 首页 > 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渐变

radial-gradient(red,green,blue):形状默认为椭圆,圆心为中心

CSS3渐变

radial-gradient(circle,red,green,blue):定义形状为圆形,圆心为中心

CSS3渐变

radial-gradient(circle at right bottom, red, green, blue):定义圆的圆心为右下方

CSS渐变

radial-gradient(150px 75px, red, green, blue):定义椭圆的长短轴的值,圆心默认为中心

CSS3渐变

radial-gradient(150px 75px at left bottom, red, green, blue); 定义椭圆的长短轴并圆心为左下方

前台专线:010-82525158 企业培训洽谈专线:010-82525379 院校合作洽谈专线:010-82525379 Copyright © 2004-2018 北京华清远见科技发展有限公司 版权所有 ,京ICP备16055225号,京公海网安备11010802025203号