详解:50 deg-gradient

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .container{
            width: 960px;
            margin:100px auto;
        }
        .container div{
            font:20px arial;
            float:left;
            width: 400px;
            height: 200px;
            border:2px solid gray;
            text-align:center;
            line-height: 200px;
            margin:20px;
        }
        .box1{background-image:linear-gradient(0deg,red,green);}
        .box2{background-image:linear-gradient(45deg,red,green);}
        .box3{background-image:linear-gradient(90deg,red,green);}
        .box4{background-image:linear-gradient(135deg,red,green);}
        .box5{background-image:linear-gradient(180deg,red,green);}
        .box6{background-image:linear-gradient(225deg,red,green);}
        .box7{background-image:linear-gradient(270deg,red,green);}
        .box8{background-image:linear-gradient(315deg,red,green);}
        .box9{background-image:linear-gradient(360deg,red,green);}
        .box10{background-image:linear-gradient(0deg,red,green);}
        .box11{background-image:linear-gradient(-45deg,red,green);}
        .box12{background-image:linear-gradient(-90deg,red,green);}
        .box13{background-image:linear-gradient(-135deg,red,green);}
        .box14{background-image:linear-gradient(-180deg,red,green);}
        .box15{background-image:linear-gradient(-225deg,red,green);}
        .box16{background-image:linear-gradient(-270deg,red,green);}
        .box17{background-image:linear-gradient(-315deg,red,green);}
        .box18{background-image:linear-gradient(-360deg,red,green);}
    </style>
</head>
<body>
    <div class="container clearfix">
    <div class="box1">0deg</div>
    <div class="box2">45deg</div>
    <div class="box3">90deg</div>
    <div class="box4">135deg</div>
    <div class="box5">180deg</div>
    <div class="box6">225deg</div>
    <div class="box7">270deg</div>
    <div class="box8">315deg</div>
    <div class="box9">360deg</div>
    <div class="box10">0deg</div>
    <div class="box11">-45deg</div>
    <div class="box12">-90deg</div>
    <div class="box13">-135deg</div>
    <div class="box14">-180deg</div>
    <div class="box15">-225deg</div>
    <div class="box16">-270deg</div>
    <div class="box17">-360deg</div>

</div>
</body>
</html>

在这里插入图片描述

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页