html渐变生成,CSS3的linear-gradient()函数创建渐变的背景

通过CSS3的linear-gradient()函数创建一个线性渐变的背景图。

语法：background: linear-gradient(direction, color-stop1, color-stop2, ...);

第一个参数direction，为指定渐变的方向(或角度)。

后面的参数color-stop1, color-stop2, ...，为指定渐变的起止颜色(必须指定2种颜色以上)

实例：

/* 从左侧开始的线性渐变，从红色开始，转为黄色: */

.bgcolor {

height: 100px;

background: linear-gradient(to right, red , yellow); /* 标准语法 */

}

/* 从上往下的线性渐变，从红色开始，转为黄色: */

.bgcolor {

height: 100px;

background: linear-gradient(to bottom, red , yellow); /* 标准语法 */

}

/* 或指定一个角度的渐变: */

.bgcolor {

height: 100px;

background: linear-gradient(180deg, red , yellow); /* 标准语法 */

}

复制代码运行一遍就知道效果了。

本文地址：http://www.8080e.cn/post/57.html    转载请注明来源

标签： CSS