线性渐变--linear-gradient

2022-11-15 18:48:41

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        /*IE依靠滤镜实现渐变。startColorstr表示起点的颜色，endColorstr表示终点颜色。
        GradientType表示渐变类型，0为缺省值，表示垂直渐变，1表示水平渐变。*/
        div {
        margin-bottom:10px;
        border:2px solid #000;
         width:200px;
        height:100px;
        float:left;
        margin-right:10px;
        }
        .box {
        width:200px;
        height:100px;
        background:-moz-linear-gradient(left,#000,#f00);
         background:-webkit-gradient(linear,left top,right bottom,from(#000),to(#f00));
        background:-webkit-linear-gradient(left,#000,#f00);
        background:-o-linear-gradient(left,#000,#f00);
        filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#f00, endColorstr=#000);/*IE<9>*/
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=1, startColorstr=#f00, endColorstr=#000)";/*IE8+*/

        }
        /*1、开始于center（水平方向）和top（垂直方向）也就是Top → Bottom：*/
        .box1 {
          width:200px;
        height:100px;
        /*background:-webkit-linear-gradient(top,#ffffc7,#019934);*/
          background:-moz-linear-gradient(top,#ffffc7,#019934);
        background:-webkit-gradient(linear,top,from(#ffffc7),to(#019934));
        background:-webkit-linear-gradient(top,#ffffc7,#019934);
          background:-o-linear-gradient(top,#ffffc7,#019934);
            background:linear-gradient(top,#ffffc7,#019934);
        }
        /*3、起始于left（水平方向）和top（垂直方向）:*/
        .box3 {
          width:200px;
        height:100px;
        background:-moz-linear-gradient(left top,#cd0069,#009997);
        background:-webkit-linear-gradient(left top,#cd0069,#009997);
        background:-o-linear-gradient(left top,#cd0069,#009997);
        background:linear-gradient(left top,#cd0069,#009997);
        }
        /*with Specified Arbitrary Stops：*/
        .box5 {
         width:200px;
        height:100px;
         background:-moz-linear-gradient(left,#ace,#f96,#ace,#f96);
        /*background:-webkit-linear-gradient(left, #ace, #f96, #ace, #f96, #ace);*/
        background:-webkit-gradient(linear,left top,right bottom,from(#ace),color-stop(0.25,#f96),color-stop(0.5,#ace),color-stop(0.75,#f96),to(#ace));
        background:-o-linear-gradient(left,#ace,#f96,#ace,#f96);
         background:linear-gradient(left,#ace,#f96,#ace,#f96)
        }
        /*6、角度(Angle)：
        正如上面看到的示例，如果您不指定一个角度，它会根据起始位置自动定义。
        如果你想更多的控制渐变的方向，您不妨设置角度试试。例如，下面的两个渐
        变具有相同的起点left center，但是加上一个30度的角度。*/

.deg0 {
background: -moz-linear-gradient(0deg, #ace, #f96);
background: -webkit-gradient(linear,0 50%,100% 50%,from(#ace),to(#f96));
background: -webkit-linear-gradient(0deg, #ace, #f96);
background: -o-linear-gradient(0deg, #ace, #f96);
}

.deg45 {
background: -moz-linear-gradient(45deg, #ace, #f96);
background: -webkit-gradient(linear,0 100%,100% 0%,from(#ace),to(#f96));
background: -webkit-linear-gradient(45deg, #ace, #f96);
background: -o-linear-gradient(45deg, #ace, #f96);
}
.deg90 {
background: -moz-linear-gradient(90deg, #ace, #f96);
background: -webkit-gradient(linear,50% 100%,50% 0%,from(#ace),to(#f96));
background: -webkit-linear-gradient(90deg, #ace, #f96);
background: -o-linear-gradient(90deg, #ace, #f96);
}
.deg135 {
background: -moz-linear-gradient(135deg, #ace, #f96);
background: -webkit-gradient(linear,100% 100%,0 0,from(#ace),to(#f96));
background: -webkit-linear-gradient(135deg, #ace, #f96);
background: -o-linear-gradient(135deg, #ace, #f96);
}
.deg180 {
background: -moz-linear-gradient(180deg, #ace, #f96);
background: -webkit-gradient(linear,100% 50%,0 50%,from(#ace),to(#f96));
background: -webkit-linear-gradient(180deg, #ace, #f96);
background: -o-linear-gradient(180deg, #ace, #f96);
}

.deg360 {
background: -moz-linear-gradient(360deg, #ace, #f96);
background: -webkit-gradient(linear,0 50%,100% 50%,from(#ace),to(#f96));
background: -webkit-linear-gradient(360deg, #ace, #f96);
background: -o-linear-gradient(360deg, #ace, #f96);
}

.imgs {
            width:200px;
            height:100px;
        background: -moz-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)),url(logo.png);
background: -webkit-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)),url(logo.png);
background: -o-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)),url(logo.png);

}
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box1"></div>
    <div class="box3"></div>
    <div class="box5"></div>

    <div class="deg0">deg0</div>
     <div class="deg45">deg45</div>
     <div class="deg90">deg90</div>
     <div class="deg135">deg135</div>
     <div class="deg180">deg180</div>
     <div class="deg360">deg360</div>

</body>
</html>

码农公寓

相关文章