html div右侧渐变,css3上下左右渐变效果，很酷，很强大

CSS 渐变

线性渐变 - 从上到下

从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色

注意：Internet Explorer 9 及之前的版本不支持渐变

线性渐变 - 从左到右

从左边开始的线性渐变。起点是红色，慢慢过渡到蓝色：

注意： Internet Explorer 9 及之前的版本不支持渐变。

线性变化 - 对角

从左上角开始(到右下角)的线性渐变。起点是红色，慢慢过渡到蓝色：

注意： Internet Explorer 9 及之前的版本不支持渐变。

线性渐变 - 使用不同的角度

0deg

90deg

180deg

-90deg

注意： Internet Explorer 9 及之前的版本不支持渐变。

线性渐变 - 多个颜色点

3个颜色节点 均匀分布

7个颜色节点 均匀分布

3个颜色节点 不均匀分布

注意： 当指定百分比时，颜色是不均匀分布。

注意： Internet Explorer 9 及之前的版本不支持渐变。

线性渐变 - 渐变背景

渐变背景

注意： Internet Explorer 9 及之前的版本不支持渐变。

线性渐变 - 透明度

为了添加透明度，我们使用 rgba() 函数来定义颜色结点。

rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。

注意： Internet Explorer 9 及之前的版本不支持渐变。

重复的线性渐变

注意： Internet Explorer 9 及之前的版本不支持渐变。

径向渐变 - 颜色结点均匀分布

注意： Internet Explorer 9 及之前的版本不支持渐变。

径向渐变 - 颜色结点不均匀分布

注意： Internet Explorer 9 及之前的版本不支持渐变。

径向渐变 - 形状

椭圆形 Ellipse(默认)：

圆形 Circle：

注意： Internet Explorer 9 及之前的版本不支持渐变。

径向渐变 - 不同尺寸大小关键字的使用

closest-side：

farthest-side：

closest-corner：

farthest-corner(默认)：

重复的径向渐变

注意： Internet Explorer 9 及之前的版本不支持渐变。