css3渐变之线性渐变linear-gradient

浏览器

网页编辑器

线性渐变基本语法：background: linear-gradient(direction, color-stop1, color-stop2, ...);为了创建一个线性渐变，必须至少定义两种颜色结点。同时，也可以设置一个起点和一个方向（或一个角度）。颜色结点：要呈现平稳过渡的颜色。例子：从上到下的线性渐变，起点是橘红色（orangered），慢慢过渡到橘色（orange）；css部分（注意兼容性）：.div1{            margin:30px auto;            width:300px;            height:100px;            color: #fff;            text-align: center;            line-height: 100px;            background:-webkit-linear-gradient(orangered,orange);            background:-o-linear-gradient(orangered,orange);            background:-moz-linear-gradient(orangered,orange);            background:linear-gradient(orangered,orange);        }html部分：

从左到右的线性渐变例子：起点是橘红色（orangered），慢慢过渡到橘色（orange）css部分：.div2{            margin:30px auto;            width:300px;            height:100px;            color: #fff;            text-align: center;            line-height: 100px;            background:-webkit-linear-gradient(left,orangered,orange);/* Safari 5.1 - 6.0 */            background:-o-linear-gradient(right,orangered,orange);/* Opera 11.1 - 12.0 */            background:-moz-linear-gradient(right,orangered,orange);/* Firefox 3.6 - 15 */            background:linear-gradient(to right,orangered,orange);/* 标准*/        }html部分：

从左上角开始到右下角的线性渐变例子：起点是红色（orangered），慢慢过渡到深绿色（orange）css部分：.div2{            margin:30px auto;            width:300px;            height:100px;            color: #fff;            text-align: center;            line-height: 100px;                        background:-webkit-linear-gradient(left top,red,darkslategray);            background:-o-linear-gradient(bottom right,red,darkslategray);            background:-moz-linear-gradient(bottom right,red,darkslategray);            background:linear-gradient(to bottom right,red,darkslategray);        }html部分：

带有指定的角度的线性渐变如果要在渐变的方向上做更多的控制，可以通过定义一个角度来实现；基本语法：background: linear-gradient(angle, color1, color2);angle：即角度是指水平线和渐变线之间的角度，逆时针方向计算那么，如何在线性渐变上使用角度？例子：css部分：.div4{            margin:30px auto;            width:300px;            height:100px;            color: #fff;            text-align: center;            line-height: 100px;            background:-webkit-linear-gradient(180deg,red,darkslategray);            background:-o-linear-gradient(180deg,red,darkslategray);            background:-moz-linear-gradient(180deg,red,darkslategray);            background:linear-gradient(180deg,red,darkslategray);        }html部分：