详解:49 linear gradient

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
          .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(to top,black,red);
        }
        .box2
        {
            background-image: linear-gradient(to right,black,red);
        }
        .box3
        {
            background-image:linear-gradient(to bottom,black,red);
        }
        .box4{
            background-image:linear-gradient(to left,black,red);
        }
        .box5{
            background-image:linear-gradient(to top left,black,red);
        }
        .box6{
            background-image:linear-gradient(to top right,black,red);
        }
        .box7{
            background-image:linear-gradient(to bottom left,black,red);
        }
        .box8{
            background-image:linear-gradient(to bottom right,black,red);
        }
        .box9{
            background-image:linear-gradient(to left top,black,red);
        }
        .box10{
            background-image:linear-gradient(to left bottom,black,red);
        }
        .box11{
            background-image:linear-gradient(to right top,black,red);
        }
        .box12{
            background-image:linear-gradient(to right bottom,black,red);
        }
    </style>
</head>
<body>
    <div class="container clearfix">
        <div class="box1">to top</div>
        <div class="box2">to right</div>
        <div class="box3">to bottom</div>
        <div class="box4">to left</div>
        <div class="box5">to top left</div>
        <div class="box6">to top right</div>
        <div class="box7">to bottom left</div>
        <div class="box8">to bottom right</div>
        <div class="box9">to left top</div>
        <div class="box10">to left bottom</div>
        <div class="box11">to right top</div>
        <div class="box12">to right bottom</div>
    </div>
</body>
</html>

在这里插入图片描述

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