IT兄弟连 HTML5教程 CSS3属性特效 渐变1

 

渐变背景一直以来在Web页面中都是一种常见的视觉元素。但一直以来，Web设计师都是经过图形软件设计这些渐变效果，而后以图片形式或者背景图片的形式运用到页面中。Web页面上实现的效果，仅从页面的视觉效果上来看，与设计并没有任何差别。事实上这种方法是比较麻烦的，由于首先须要设计师进行设计，而后进行切图，在经过样式应用到页面中。另外，在实际应用中可扩展性差，还直接影响页面性能。值得庆幸的是，W3C组织将渐变设计收入到CSS3标准中，让广大的前端设计师直接受益，能够直接经过CSS3的渐变属性制做相似渐变图片的效果。并且渐变属性慢慢获得了众多现代浏览器的兼容，甚至是烦人的IE，在IE10版本也支持了这个属性。

CSS3 Gradient分为linear-gradient（线性渐变）和radial-gradient（径向渐变）。

 

1  CSS3渐变介绍

欲要了解CSS3渐变，就先要知道CSS3渐变是什么？从早前的设计中咱们能够知道，渐变是两种或多种颜色之间的平滑过渡。在建立渐变的过程当中，能够指定多个中间颜色值，这个值称为色标。每一个色标包含一种颜色和一个位置，浏览器从每一个色标的颜色淡出到下一个，以建立平滑的渐变。以下图所示：

 

渐变能够应用于任何使用背景图片的地方。这意味着在CSS样式中，渐变至关于背景图片，在理论上可在任何使用url() 值的地方采用，好比最多见的background-image、list-style-type以及前面介绍的CSS3的图像边框属性border-image。但直到目前为止，仅在背景图片中获得最完美的支持。

 

2  线性渐变

在线性渐变过程当中，颜色沿着一条直线过渡：从左侧到右侧、从右侧到左侧、从顶部到底部、从底部到顶部或着沿任何任意轴。若是你曾使用过制做图件，好比说Photoshop，那你对线性渐变并不会陌生。

CSS3制做渐变效果，其实和使用制做软件中的渐变工具没有什么差异。首先须要指定一个渐变的方向、渐变的起始颜色、渐变的结束颜色。具备这三个参数就能够制做一个最简单、最普通的渐变效果。若是你须要制做一个复杂的多色渐变效果，就须要在同一个渐变方向增添多个色标。具有这些渐变参数（至少三个），各浏览器就会绘制与渐变线垂直的颜色结来填充整个容器。浏览器渲染出来的效果就相似于制做软件设计出来的渐变图像，从一种颜色到另外一种颜色的平滑淡出，沿所指的线性渐变方向实现颜色渐变效果。

线性渐变的格式以下：

linear-gradient([<起点> || <角度>,]? <点>，<点>…)

 

线性渐变的参数描述如表1：

表1 CSS3线性渐变参数描述