CSS-渐变效果

CSS-渐变效果
  <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css3渐变的效果</title>
    <style>
        div{
            text-align: center;
            width:230px;
            height: 60px;
            -webkit-border-radius:15px;
            -moz-border-radius: 15px;
        }
        .box1{
            
            代表的是谷歌的浏览器-webkit-gradient(linear,开始位置,结束位置,from(颜色),to(颜色))
            Mozilla浏览器-moz-linear-gradient(开始位置,开始颜色,结束颜色);
            
           background: -webkit-gradient(linear,left top,left bottom,from(#000),to(#999));
           background: -moz-linear-gradient(top,red,blue);
        }
        .box2{
            
            渐变效果是在css3当中的background或者background-image
            实现更加复杂的功能
            谷歌浏览器当中:color-stop:(位置,颜色),该功能是将划分的这段区域划分成0-1,开始为0,结束为1
            火狐当中为:-moz-linear-gradient(开始位置,开始颜色,中间点颜色,百分比,结束颜色)
           
            background: -webkit-gradient(linear,left top,left bottom,
                        color-stop(0.0,red),
                        color-stop(0.3,white),
                        color-stop(0.5,black),
                        color-stop(0.8,blue),
                        color-stop(1.0,green)

            );
            background: -moz-linear-gradient(top,red,#ffffff 50%,blue);
        }
            </style>
</head>
<body>
     <div class="box1"></div>
     <div class="box2"></div>
</body>
</html>

你可能感兴趣的:(CSS-渐变效果)