请老师帮忙检查下

来源：3-2 编程练习

慕侠635704

2019-11-24 19:46:15

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>线性渐变</title>
    <style type="text/css">
    /*此处写代码*/
    div{
        width:100px;
        height:100px;
        float:left;
        margin-top:10px;
        margin-right:20px;
    }
    
    .one{
        background:-webkit-linear-gradient(      top,yellow,red);
        background:   -moz-linear-gradient(   bottom,yellow,red);
        background:     -o-linear-gradient(   bottom,yellow,red);
        background:        linear-gradient(to bottom,yellow,red);
    }
    .two{
         background:-webkit-linear-gradient(    left,yellow,red);
         background:   -moz-linear-gradient(   right,yellow,red);
         background:     -o-linear-gradient(   right,yellow,red);
         background:        linear-gradient(to right,yellow,red);
    }
    .three{
         background:-webkit-linear-gradient(right bottom,yellow,red);
         background:   -moz-linear-gradient(    left top,yellow,red);
         background:     -o-linear-gradient(    left top,yellow,red);
         background:        linear-gradient( to left top,yellow,red);
    }
    </style>
</head>
<body>
    <!--此处写代码-->
    <div>上下渐变方向
    <div class="one"></div>
    </div>
    <div>左右渐变方向
    <div class="two"></div>
    </div>
    <div>对角渐变方向
    <div class="three"></div>
    </div>
</html>

写回答

1回答