CSS3渐变笔录

之前总结CSS3的时候漏掉了渐变属性，这里补充介绍下

 

内容列表：

（一）线性渐变linear-gradient

 内容：简单线性渐变；带有角度的线性渐变；色标；透明与渐变；

（二）径向渐变radial-gradient

  内容：色标；形状；大小；重复径向 / 环形渐变；

（三）IE兼容渐变

 

【作用】

CSS3 渐变（gradients梯度）可以让你在两个或多个指定的颜色之间显示平稳的过渡。

【优点】

以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。

【类型】

CSS3 定义了两种类型的渐变（gradients）：

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

径向渐变（Radial Gradients）- 由它们的中心定义

【兼容】

IE10+及其他主流浏览器，其他部分浏览器需要hack写法，即前面需加 -webkit-、-moz- 或 -o- 

【详解】

（1）线性渐变linear-gradient

 内容列表：简单线性渐变；带有角度的线性渐变；色标；透明与渐变；

为了创建一个线性渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）

①简单的线性渐变

 从上到下----默认

background: linear-gradient(blue,white);
background: -webkit-linear-gradient(blue,white);

 从下到上

background: linear-gradient(to top,blue,white);
background: -webkit-linear-gradient(bottom,blue,white);

 从左到右

background: linear-gradient(to right,blue,white);
background: -webkit-linear-gradient(left,blue,white);

 从右到左

background: linear-gradient(to left,blue,white);
background: -webkit-linear-gradient(right,blue,white);

 

 ②带有角度

如果喜欢控制渐变的方向，可以设置特定的角度

例如：这两个渐变，第一个方向朝右，第二个有个70度的角

 右边的这个使用的是这样的CSS样式：

 

background: linear-gradient(70deg, black, white);

 角度是指水平线与渐变线之间的角度，以顺时针方向旋转。总之，0deg 创建一个从底部到顶部的垂直渐变，当变成90deg时生成一个从左到右的水平渐变。

 

 

 ③色标

渐近线的颜色停止点在该位置有特定的颜色。该位置可以被指定为线长度的百分比或一个绝对长度。为实现期望的效果，可以指定任意多个颜色停止点。

如果指定位置使用百分比，那么 0% 表示起点，100% 表示终点。如果有需要，也可以使用范围之外的值

例子：三个色标

background: linear-gradient(red,green 80%,yellow);

需要注意的是：

   第一个和最后一个色标并没有指定一个位置; 由于这个原因， 位置值0％和100%将分别自动的分配给第一个和最后一个色标 。中间的色标指定一个80%的位置, 把剩下的部分留给底部。所以就有了类似彩虹效果的等间距色标

例子: 等间距色标

background: linear-gradient(to right, red, orange, yellow, green, blue);
background: -webkit-linear-gradient(right, red, orange, yellow, green, blue);

 需要注意的是没有指定位置时这些色标自动地均匀的隔开

 

 ④透明和渐变

 渐变是支持透明度的。 举个例子，当你叠加多个背景层，你可以使用这个在背景图片上来创建淡入淡出的效果 :

background: linear-gradient
(to right, rgba(255,255,255,0), rgba(255,255,255,1)), url(./01.jpg);

 背景是由第一个指定的背景在最上面, 然后接下来的背景层叠起来. 通过这种方式的层叠，你像上面一样创造非常有创造力的效果

 

 

（2）径向渐变radial-gradient

 语法：

background: -webkit-radial-gradient(); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(); /* Firefox 3.6 - 15 */
background: radial-gradient(); /* 标准的语法 */

   径向渐变语法和线性渐变很类似, 除了可以指定渐变结束时的形状 (可能时一个圆形或者一个椭圆形) 以及它的大小。默认来说，结束形状是一个椭圆形并且和容器的大小比例保持一致。

  内容列表：色标；形状；大小；重复径向 / 环形渐变

 

 ①色标

可以像在线性渐变中一样指定色标。渐变线从起始位置向各个方向延伸

例子: 指定间距色标

background: radial-gradient(red 5%, yellow 25%, #1E90FF 50%);

例子: 等间距色标

background: radial-gradient(red, yellow, rgb(30, 144, 255));

 

 ②形状

shape 参数定义了形状。它可以是值 circle 或 ellipse

其中，circle 表示圆形，ellipse 表示椭圆形。默认值是椭圆ellipse

/*圆形*/
background: radial-gradient(circle, red, yellow 10%, #1E90FF 50%, white);
/*椭圆*/
background: radial-gradient(ellipse, red, yellow 10%, #1E90FF 50%, white);

 

 ③大小

 size 参数定义了渐变的大小。它可以是以下四个值：

 closest-side最接近端，farthest-side最远端，closest-corner最近角，farthest-corner最远的角

background: -webkit-radial-gradient(50% 30%,closest-side,blue,green,yellow,black);

 

 ④重复径向 / 环形渐变

repeating-radial-gradient() 函数用于重复径向渐变：

   注意：

   linear-gradient 和 radial-gradient不支持自动重复的色标。然而repeating-linear-gradient 和 repeating-radial-gradient 可以实现这个功能

   

background: repeating-linear-gradient(-45deg, red, red 5px, white 5px, white 10px);

  另一个使用 repeating-linear-gradient属性的例子：

   

background-color: #000;
background-image: repeating-linear-gradient(90deg, transparent, transparent 50px,
      rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px,
      rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px,
      rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
repeating-linear-gradient(0deg, transparent, transparent 50px, rgba(255, 127, 0, 0.25) 50px,
      rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px, rgba(255, 127, 0, 0.25) 63px,
      rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px, rgba(255, 206, 0, 0.25) 116px,
      rgba(255, 206, 0, 0.25) 166px),
repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 5px,
      rgba(143, 77, 63, 0.25) 10px),
repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 5px,
      rgba(143, 77, 63, 0.25) 10px);

  圆形渐变（圆环）

 这个例子使用 repeating-radial-gradient 创建渐变：

  

background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);

 

 

（3）IE兼容渐变

 ①IE渐变滤镜

 IE浏览器下渐变背景的使用需要使用IE的渐变滤镜。如下代码：

filter过滤: progid进程id:DXImageTransform图像转变.Microsoft微软.gradient渐变
(startcolorstr=red,endcolorstr=blue,gradientType渐变类型=1);

 相关说明：

上面的滤镜代码主要有三个参数，依次是：startcolorstr, endcolorstr, 以及gradientType。

其中gradientType=1代表横向渐变，gradientType=0代表纵向淅变。startcolorstr=”色彩” 代表渐变渐变起始的色彩，endcolorstr=”色彩” 代表渐变结尾的色彩。

 ②渐变加透明：

  由于IE目前尚未支持opacity属性以及RGBA颜色，要实现IE下的透明度变化，还是需要使用IE滤镜，IE的透明度滤镜功能比较强大，这种强大反而与Firefox或是Safari浏览器下的css-gradient背景渐变的用法类似。

例如下面的使用：

filter:alpha(opacity=100 finishopacity=0 style=1 startx=0,starty=5,finishx=90,finishy=60)

 其中各个参数的含义如下：

opacity表示透明度，默认的范围是从0 到 100，他们其实是百分比的形式。也就是说，0代表完全透明，100代表完全不透明。 

finishopacity 是一个可选参数，如果想要设置渐变的透明效果，就可以使用他们来指定结束时的透明度。范围也是0 到 100

style用来指定透明区域的形状特征：

0 代表统一形状；1 代表线形；2 代表放射状；3 代表矩形

startx 渐变透明效果开始处的 X坐标；starty 渐变透明效果开始处的 Y坐标。 

finishx 渐变透明效果结束处的 X坐标；finishy 渐变透明效果结束处的 Y坐标。

综合上述，实现IE下含透明度变化红蓝垂直渐变的代码如下：

filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) 
progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1);

 

 

 

 

.