日期:2014-05-17  浏览次数:20645 次

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>  
&l