美文网首页
CSS3线性渐变--angle用角度设置渐变方向

CSS3线性渐变--angle用角度设置渐变方向

作者: 挥剑斩浮云 | 来源:发表于2018-01-26 09:36 被阅读0次
    <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <title>CSS3线性渐变--angle用角度设置渐变方向</title>
        <style type="text/css" media="screen">
            body{
                font-family: "Microsoft YaHei";
                font-size:16px;
            }
            div {
                width: 200px;
                height: 200px;
                line-height: 200px;
                text-align: center;
                border: 0px solid #2b6a9a;
                margin: 20px;
                float: left;
            }
            .deg0 {
                background-image: -webkit-linear-gradient(0deg, red, green);
                background-image: linear-gradient(0deg, red, green);
            }
            .deg45 {
                background-image: -webkit-linear-gradient(45deg, red, green);
                background-image: linear-gradient(45deg, red, green);
            }
            .deg90 {
                background-image: -webkit-linear-gradient(90deg, red, green);
                background-image: linear-gradient(90deg, red, green);
            }
            .deg135 {
                background-image: -webkit-linear-gradient(135deg, red, green);
                background-image: linear-gradient(135deg, red, green);
            }
            .deg180 {
                background-image: -webkit-linear-gradient(180deg, red, green);
                background-image: linear-gradient(180deg, red, green);
            }
            .deg225 {
                background-image: -webkit-linear-gradient(225deg, red, green);
                background-image: linear-gradient(225deg, red, green);
            }
            .deg270 {
                background-image: -webkit-linear-gradient(270deg, red, green);
                background-image: linear-gradient(270deg, red, green);
            }
            .deg315 {
                background-image: -webkit-linear-gradient(315deg, red, green);
                background-image: linear-gradient(315deg, red, green);
            }
            .deg360 {
                background-image: -webkit-linear-gradient(360deg, red, green);
                background-image: linear-gradient(360deg, red, green);
            }
            /*negative*/
            .deg45-negative {
                background-image: -webkit-linear-gradient(-45deg, red, green);
                background-image: linear-gradient(-45deg, red, green);
            }
            .deg90-negative {
                background-image: -webkit-linear-gradient(-90deg, red, green);
                background-image: linear-gradient(-90deg, red, green);
            }
            .deg135-negative {
                background-image: -webkit-linear-gradient(-135deg, red, green);
                background-image: linear-gradient(-135deg, red, green);
            }
            .deg180-negative {
                background-image: -webkit-linear-gradient(-180deg, red, green);
                background-image: linear-gradient(-180deg, red, green);
            }
            .deg225-negative {
                background-image: -webkit-linear-gradient(-225deg, red, green);
                background-image: linear-gradient(-225deg, red, green);
            }
            .deg270-negative {
                background-image: -webkit-linear-gradient(-270deg, red, green);
                background-image: linear-gradient(-270deg, red, green);
            }
            .deg315-negative {
                background-image: -webkit-linear-gradient(-315deg, red, green);
                background-image: linear-gradient(-315deg, red, green);
            }
            .deg360-negative {
                background-image: -webkit-linear-gradient(-360deg, red, green);
                background-image: linear-gradient(-360deg, red, green);
            }
        </style>
    </head>
    <body>
        <h1>CSS3线性渐变--angle用角度设置渐变方向(red,green)</h1>
        <hr>
        <div class="deg0">0deg</div>
        <div class="deg45">45deg</div>
        <div class="deg90">90deg</div>
        <div class="deg135">135deg</div>
        <div class="deg180">180deg</div>
        <div class="deg225">225deg</div>
        <div class="deg270">270deg</div>
        <div class="deg315">315deg</div>
        <div class="deg360">360deg</div>
        <div class="deg0">0deg</div>
        <div class="deg45-negative">-45deg</div>
        <div class="deg90-negative">-90deg</div>
        <div class="deg135-negative">-135deg</div>
        <div class="deg180-negative">-180deg</div>
        <div class="deg225-negative">-225deg</div>
        <div class="deg270-negative">-270deg</div>
        <div class="deg315-negative">-315deg</div>
        <div class="deg360-negative">-360deg</div>
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:CSS3线性渐变--angle用角度设置渐变方向

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