css background-image_linear-gradient().html

最新推荐文章于 2024-04-15 14:55:08 发布

学无止境慢慢来

最新推荐文章于 2024-04-15 14:55:08 发布

阅读量967

点赞数

分类专栏： CSS

CSS 专栏收录该内容

71 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>css background-image_linear-gradient()</title>
    <style>
        /*参考：https://www.runoob.com/cssref/func-linear-gradient.html
        知识点：
        linear-gradient() 函数用于创建一个线性渐变的 "图像"。
        为了创建一个线性渐变，你需要设置一个起始点和一个方向（指定为一个角度）的渐变效果。
        你还要定义终止色。终止色就是你想让Gecko去平滑的过渡，并且你必须指定至少两种，
        当然也可以指定更多的颜色去创建更复杂的渐变效果。
        background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
        值                              描述
        direction                      用角度值指定渐变的方向（或角度）。
        color-stop1, color-stop2,...   用于指定渐变的起止颜色。
        个人理解：
            默认的direction是从上到下（+-180deg），因此可以不指定，direction。
            direction，0deg是从下到上，正的角度是顺时针旋转，负的角度是逆时针旋转。
        */
        * {
            margin: 0;
            padding: 0;
        }

        div, p {
            margin: 5px 10px;
            padding: 5px;
        }

        div {
            width: 200px;
            height: 50px;
            color: white;
            font: bold 1em "微软雅黑", Arial, Helvetica;
            text-align: center;
            background-color: red; /* 不支持线性的时候显示 */
        }

        #grad1 {
            /*默认方向：从上到下。*/
            background-image: linear-gradient(red, yellow, blue);
        }

        #grad6 {
            background-image: linear-gradient(180deg, red, yellow, blue);
        }

        #grad2 {
            background-image: linear-gradient(to right, red, yellow, blue);
        }


        #grad3 {
            background-image: linear-gradient(to bottom right, red, yellow, blue);
        }

        #grad4 {
            background-image: linear-gradient(0deg, red, yellow, blue);
        }

        #grad5 {
            background-image: linear-gradient(90deg, red, yellow, blue);
        }


        #grad7 {
            background-image: linear-gradient(-90deg, red, yellow, blue);
        }

        #grad8 {
            /*width: 100%;
            indigo，靛蓝色，深蓝色，由蓝和紫混合而成。
            violet，蓝紫色*/
            background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); /* 标准的语法（必须放在最后） */
        }

        #grad9 {
            background-color: transparent; /* 不支持线性的时候显示 */
            background-image: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
        }
    </style>
</head>
<body>

<div id="grad1">1.red, yellow, blue</div>
<div id="grad6">6.180deg, red, yellow, blue</div>

<div id="grad2">2.to right, red, yellow, blue</div>
<div id="grad3">3.to bottom right, red, yellow, blue</div>
<div id="grad4">4.0deg, red, yellow, blue</div>
<div id="grad5">5.90deg, red, yellow, blue</div>
<div id="grad7">7.-90deg red, yellow, blue</div>
<div id="grad8" style="color:#888888;font-size:40px;font-weight:bold">
    8.渐变背景
</div>
<div id="grad9">9.to right, rgba(255,0,0,0), rgba(255,0,0,1)</div>
<p><strong>注意：</strong> Internet Explorer 9 及更早版本 IE 浏览器不支持渐变。</p>

</body>
</html>

效果图：

学无止境慢慢来

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css background-image_linear-gradient().html

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>css background-image_linear-gradient()</title> <style> /*参考：https://www.runoo...
复制链接

扫一扫

专栏目录