CSS3 gradient容易使用 _HTML/CSS

CSS3 gradient简单使用

[文章来源：http://www.cnblogs.com/gaoxue/articles/CSS3Gradient-1.html]

因方便在firefox中测试，根据原文简单总结一下Mozilla内核的线性渐变用法(径向渐变暂时忽略)，其他内核浏览器的渐变（webkit-old,webkit-new,opera,Trident）用法都差不多，请参考原文.

在Mozilla内核中使用 -moz-linear-gradient 属性来完成渐变效果,-moz-linear-gradient 属性需要 3个参数：

渐变方向｜起始颜色｜终止颜色(可以指定多种颜色)

关于渐变方向的示例如下：

<!DOCTYPE html>  
<html>  
<head>  
    <style>  
        div{
            color : #305999;  
            width : 380px;  
            height : 80px;  
            line-height : 80px;  
            font-weight : bold;  
            text-align : center;  
            margin : 5px auto;
        }
        
        .g1 {
            background : -moz-linear-gradient(left, #ace,#f96);
        }
        .g2 {
            background : -moz-linear-gradient(top, #ace,#f96);
        }
        .g3 {
            background : -moz-linear-gradient(top left, #ace,#f96);
        }
        .g4 {
            background : -moz-linear-gradient(top right, #ace,#f96);
        }
        .g5 {
            background : -moz-linear-gradient(0deg, #ace,#f96);
        }
        .g6 {
            background : -moz-linear-gradient(90deg, #ace,#f96);
        }
        .g7 {
            background : -moz-linear-gradient(180deg, #ace,#f96);
        }
        .g8 {
            background : -moz-linear-gradient(270deg, #ace,#f96);
        }

    </style>  
</head>  
<body>  
    <div class="g1">left</div>
    <div class="g2">top</div>
    <div class="g3">top left</div>
    <div class="g4">top right</div>
    <div class="g5">0deg</div>
    <div class="g6">90deg</div>
    <div class="g7">180deg</div>
    <div class="g8">270deg</div>
</body>  
</html>

关于多颜色渐变的示例如下：

<!DOCTYPE html>  
<html>  
<head>  
    <style>  
        div{
            color : #305999;  
            width : 380px;  
            height : 80px;  
            line-height : 80px;  
            font-weight : bold;  
            text-align : center;  
            margin : 5px auto;
        }
        .g1 {
            background : -moz-linear-gradient(left, red, blue, red, blue, red);
        }
    </style>  
</head>  
<body>  
    <div class="g1">left</div>
</body>  
</html>

每个渐变颜色值都可以指定一个"停止点"(百分比/像素)，指定渐变过程中纯色的位置(未指定则各颜色均匀分布)：

<!DOCTYPE html>  
<html>  
<head>  
    <style>  
        div{
            color : #305999;  
            width : 380px;  
            height : 80px;  
            line-height : 80px;  
            font-weight : bold;  
            text-align : center;  
            margin : 5px auto;
        }
        
        .g1 {
            background : -moz-linear-gradient(left, red, blue 5%, red, blue 95%, red);
        }
    </style>  
</head>  
<body>  
    <div class="g1">left</div>
</body>  
</html>

透明 + 透明 + 背景图片：

<!DOCTYPE html>  
<html>  
<head>  
    <style>  
        div{
            width : 700px;  
            height : 400px;   
        }
        
        .g1 {
            background:-moz-linear-gradient(right, rgba(255,255,255,0.1), rgba(255,255,255,1)) ,url(gradient-img.jpg) no-repeat;
        }
    </style>  
</head>  
<body>  
    <div class="g1"></div>
</body>  
</html>