css无色-如何在css中设置渐变颜色

方法： 1、使用Linear-Gradient设置线性渐变，语法为“Linear-Gradient(角度,颜色,颜色)”； 2.使用radial-gradient设置径向渐变，语法为“radial-gradient(位置,颜色,颜色)”。

本教程的运行环境：Windows 7系统，CSS3&&HTML5版本css无色，Dell G3笔记本。

CSS3 渐变允许您显示两种或多种指定颜色之间的平滑过渡。

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

为了创建线性渐变css无色，您必须定义至少两个颜色节点。 颜色节点是您想要平滑过渡的颜色。 同时，您还可以设置起点和方向（或角度）。

css设置线性渐变示例：

 
 

#grad1 {
    height: 200px;
    background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(red, blue); /* 标准的语法（必须放在最后） */
}



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

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

效果图：

推荐学习：css视频教程