CSS3线性渐变——用关键字设置渐变方向

作者: 挥剑斩浮云 | 来源:发表于2018-01-25 22:24 被阅读0次

CSS3线性渐变——用关键字设置渐变方向
css3渐变:线性和径向
CSS3渐变的使用方法:
CSS3线性渐变--angle用角度设置渐变方向
css3新特性
CSS 渐变
Css渐变gradients深入理解
css3 线性渐变文字光影
CSS3渐变
gradient(渐变)

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>CSS3线性渐变——用关键字设置渐变方向</title>
    <style type="text/css" media="screen">
        body{
            font-family: "Microsoft YaHei";
            font-size:16px;
        }
        div {
            width: 250px;
            height: 150px;
            border: 1px solid #666;
            line-height: 150px;
            text-align: center;
            font-weight: 900;
            font-size: 15px;
            color: #fff;
            margin: 10px;
            float:left;
        }
        div:nth-child(2n+1){
            clear:left
        }
        /*向左上角渐变*/
        .toLeft{
            background-image:-webkit-linear-gradient(to left, orange, green);
            background-image:linear-gradient(to left, orange, green);
        }
        .toRight{
            background-image:-webkit-linear-gradient(to right, orange, green);
            background-image:linear-gradient(to right, orange, green);
        }
        .toTop{
            background:-webkit-linear-gradient(to top, orange, green);
            background:linear-gradient(to top, orange, green);
        }
        .toBottom{
            background: -webkit-linear-gradient(to bottom, orange, green);
            background: linear-gradient(to bottom, orange, green);
        }
        .toTopLeft {
            background-image:-webkit-linear-gradient(to top left, orange, green);
            background-image:linear-gradient(to top left,orange,green);
        }
        .toLeftTop {
            background-image:-webkit-linear-gradient(to left top, orange, green);
            background-image:linear-gradient(to left top,orange,green);
        }
        /*向右上角渐变*/
        .toTopRight{
            background-image:-webkit-linear-gradient(to top right, orange, green);
            background-image:linear-gradient(to top right,orange,green);
        }
        .toRightTop {
            background-image:-webkit-linear-gradient(to right top, orange, green);
            background-image:linear-gradient(to right top,orange,green);
        }
        /*向左下角渐变*/
        .toBottomLeft {
            background-image:-webkit-linear-gradient(to bottom left, orange, green);
            background-image:linear-gradient(to bottom left,orange,green);
        }
        .toLeftBottom {
            background-image:-webkit-linear-gradient(to left bottom, orange, green);
            background-image:linear-gradient(to left bottom,orange,green);
        }
        /*向右下角渐变*/
        .toBottomRight {
            background-image:-webkit-linear-gradient(to bottom right, orange, green);
            background-image:linear-gradient(to bottom right,orange,green);
        }
        .toRightBottom {
            background-image:-webkit-linear-gradient(to right bottom, orange, green);
            background-image:linear-gradient(to right bottom,orange,green);
        }
    </style>
</head>
<body>
    <h1>CSS3线性渐变——用关键字设置渐变方向(orange, green) 关键字中的to可省略</h1>
    <hr>
    <div class="toLeft">使用关键词：to Left</div>
    <div class="toRight">使用关键词：to Right</div>
    <div class="toTop">使用关键词：to Top</div>
    <div class="toBottom">使用关键词：to Bottom</div>
    <div class="toTopLeft">使用关键词：to Top Left</div>
    <div class="toLeftTop">使用关键词：to Left Top</div>
    <div class="toTopRight">使用关键词：to Top Right</div>
    <div class="toRightTop">使用关键词：to Right Top</div>
    <div class="toBottomLeft">使用关键词：to Bottom Left</div>
    <div class="toLeftBottom">使用关键词：to Left Bottom</div>
    <div class="toBottomRight">使用关键词：to Bottom Right</div>
    <div class="toRightBottom">使用关键词：to Right Bottom</div>
</body>
</html>