linear-gradient的角度与百分比图解

最新推荐文章于 2024-08-22 09:01:06 发布

溜_x_i_a_o_迪

最新推荐文章于 2024-08-22 09:01:06 发布

阅读量1.7k

点赞数 4

分类专栏： CSS学习手册文章标签： html css

CSS学习手册专栏收录该内容

19 篇文章

订阅专栏

一、角度

linear-gradient角度垂直向上方向是0度，顺时针方向选中与垂直向上形成的夹角是角度。

注意，标准的语法是不支持起使方向，例如：

 background: linear-gradient(top, red, blue);

如果要使用起使角度，家私用前缀：

background: -ms-linear-gradient(top, red, blue);
background: -webkit-linear-gradient(top, red, blue);
background: -o-linear-gradient(top, red, blue);
background: --moz-linear-gradient(top, red, blue);

这样渐变方向就是从上往下，等价于：

 background: linear-gradient(bottom, red, blue);

二、百分比

linear-gradient百分比

三、测试代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #container {
            display: flex;
            flex-direction: row;
            justify-content: center;
            margin: 0 auto;
            width: 100vw;
        }

        .item {
            width: 300px;
            height: 300px;
            line-height: 300px;
            margin: 10px auto;
            font-size: 20px;
            color: white;
            text-align: center;
        }

        .lg1 {
            background: linear-gradient(red, blue);
        }

        .lg2 {
            background: linear-gradient(to top, red, blue);
        }

        .lg3 {
            background: linear-gradient(45deg, red, blue);
        }

        .lg4 {
            background: linear-gradient(90deg, red, blue);
        }
    </style>
</head>

<body>
    <div id="container">
        <div class="item lg1">linear-gradient(red, blue);</div>
        <div class="item lg2">linear-gradient(to top, red, blue);</div>
        <div class="item lg3">linear-gradient(45deg, red, blue);</div>
        <div class="item lg4">linear-gradient(90deg, red, blue);</div>
    </div>
</body>
</html>

---------------------
作者：trayvontang
来源：CSDN
原文：https://blog.csdn.net/trayvontang/article/details/106980984
版权声明：本文为作者原创文章，转载请附上博文链接！