CSS3 gradient简单使用-CSDN博客

本文链接：https://blog.csdn.net/iteye_3366/article/details/82481411

本文介绍了Mozilla内核浏览器中线性渐变的使用方法，包括不同方向的渐变、多颜色渐变及透明渐变等特性，并给出了具体的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[文章来源：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>

透明 + 透明 + 背景图片：

[注意：在只设置一个background时，背景图片是在背景颜色之上的，也就是说背景图片会覆盖背景颜色；而下面的示例是设置了两个background层，第一层是透明渐变的颜色，第二层是一张图片，而且由于background属性中后载入的图像（或者说背景层）在先载入的背景层的下面，该示例相当于在背景图像上覆盖了一层透明渐变色的层]

<!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>