美文网首页
4.9 (案例) 线性渐变效果

4.9 (案例) 线性渐变效果

作者: 柒月柒日晴7 | 来源:发表于2017-06-08 00:17 被阅读0次
线性渐变效果一.png 线性渐变效果二.png 线性渐变效果三.png 线性渐变效果四.png 线性渐变效果五.png 线性渐变效果六.png 线性渐变效果七.png
<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title> New Document </title>
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style type="text/css">
    *{margin:0;padding:0;}
    .box{
    margin:20px auto;
    width:300px;height:400px;
    background:-webkit-linear-gradient(
    red 4%,
    green 25%,
    yellow 50%,
    #000 75%,
    #f08f67 100%) ;
    box-shadow:3px 3px 4px 2px #333;
    }
    .box1{
        margin:20px auto;
        width:400px;height:400px;
        background:-webkit-linear-gradient(left top,red,green);
        background:-moz-linear-gradient(left top,red,green);
        background:-o-linear-gradient(left top,red,green);
        background:linear-gradient(left top,red,green);
        /*从左上角的过渡到右下角*/
    }
    .box2{
        margin:20px auto;
        width:400px;height:400px;
        background:-webkit-linear-gradient(right,red,green);
        background:-moz-linear-gradient(left,red,green);
        background:-o-linear-gradient(left,red,green);
        background:linear-gradient(left,red,green);
    }
    .box3{
        margin:20px auto;
        width:400px;height:400px;
        background:-webkit-linear-gradient(top,red,green);
        background:-moz-linear-gradient(top,red,green);
        background:-o-linear-gradient(top,red,green);
        background:linear-gradient(top,red,green);
    }
    .box4{
        margin:20px auto;
    width:400px;height:400px;
    
    border:1px #000 solid;
    background:-webkit-linear-gradient(
    230deg,red,green) ;
    }
    .box5{
        margin:20px auto;
        width:400px;height:400px;
        background:-webkit-linear-gradient(left,red 30%,#fff 70%, yellow 100%);
    }
    .box6{
        margin:20px auto;
        width:400px;height:400px;
        background:-webkit-linear-gradient(left bottom,red 30%,#fff 70%, yellow 100%);
    }
    .box7{
        margin:20px auto;
        width:400px;height:400px;
        background:-webkit-gradient(linear,0 0,0 100%,,#000 0,from(red),to(yellow));
    }
  </style>
  <link href="" style="text/css" rel="stylesheet"/> 
 </head>

 <body>
  <div class="box"></div>
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="box4"></div>
  <div class="box5"></div>
  <div class="box6"></div>
  <div class="box7"></div>
 
 </body>
 <script src=""> </script>
 <script type="text/javascript">
 <!--
    
 //-->
 </script>
</html>

相关文章

网友评论

      本文标题:4.9 (案例) 线性渐变效果

      本文链接:https://www.haomeiwen.com/subject/wwczfxtx.html