CSS3背景渐变

我们经常可以看到有些背景色并不是纯色，而是好看的渐变色，css3知我懂我，给我们提供了制作渐变背景色的属性。

渐变主要包括线性渐变和径向渐变，接下来逐一介绍用法：

1.线性渐变

线性渐变--linear gradients，表示颜色沿着一条直线过渡，比如从左到右，从右到左，从上到下等。

1.1 语法：

background: linear-gradient(position , color1 ,color2, ....)；
 /* position 渐变方向，color1 第一种颜色   color2第二种颜色 */

比如:
 background:linear-gradient( to top,red,green,yellow);

1.2 注意点

①渐变默认方向为从上到下，即to bottom，可省略不写；

②渐变方向的书写格式是：to 具体方位名词，to表示的意思为到...，比如to right，就是到右边，那具体从哪到右边呢，前面省略的开始方向为到达方向的相反方向，本例子就是从左到右；如果是to bottom right，那么就是从左上角到右下角，以此类推。

2.径向渐变

径向渐变-radial gradients，即从圆心向外辐射产生的渐变过渡。

2.1 语法

<div class="box"></div>

<style>
   .box {
       width: 400px;
       height: 300px;
       /* 颜色结点均匀分布的径向渐变 */
       background: radial-gradient(red,green,blue);
   }
</style>

使用此种渐变：background: radial-gradient(red,green,blue);——效果如图

/* 颜色结点不均匀分布的径向渐变  根据自己具体设的值来的 */
background: radial-gradient(red 20%, green 10%,blue 70%);

使用此种渐变： background: radial-gradient(red 20%, green 10%,blue 70%);——效果如图

/* 形状为圆形的径向渐变 */
/* 第一个值设置表示圆形，就算盒子本身不是正方形，渐变的效果也是圆形 */
background: radial-gradient(circle, red, green, blue);

 

 径向渐变可以指定渐变形状为圆形，那么无论什么样的盒子，其背景色渐变形状均呈现出圆形，如上图所示。

小总结：

实际开发中，线性渐变出现的频率相对较高，所以要着重掌握此种背景色的语法。