html5用css3实现线性渐变background-image:linear-gradient使用方法

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

fongdaBoy

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

阅读量4k

点赞数

分类专栏： Css

本文链接：https://blog.csdn.net/iceking66/article/details/78257298

版权

Css 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

代码使用：

background-image:linear-gradient

<style>
        div {
            width: 400px;
            height: 150px;
            border: 1px solid #666;
            line-height: 150px;
            text-align: center;
            font-weight: 900;
            font-size: 30px;
            color: #fff;
            margin: 10px auto;
        }
        .gradient {
            background-image:-webkit-linear-gradient(-113deg, #8bfcfe, #64a1ff);
            background-image:linear-gradient(-113deg, #8bfcfe,  #64a1ff);
        }
        .toTop {
            background-image:-webkit-linear-gradient(to top, #8bfcfe, #64a1ff);
            background-image:linear-gradient(to top, #8bfcfe,  #64a1ff);
        }
        .toLeft{
            background-image:-webkit-linear-gradient(to left, #8bfcfe, #64a1ff);
            background-image:linear-gradient(to left, #8bfcfe,  #64a1ff);
        }
        .toRight{
            background-image:-webkit-linear-gradient(to right, #8bfcfe, #64a1ff);
            background-image:linear-gradient(to right, #8bfcfe,  #64a1ff);
        }
        .toBottom{
            background-image:-webkit-linear-gradient(to bottom, #8bfcfe, #64a1ff);
            background-image:linear-gradient(to bottom, #8bfcfe,  #64a1ff);
        }
        .toColors{
            background-image:linear-gradient(45deg,
                green 0%,
                green 25%,
                red  25%,
                red  50%,
                yellow 50%,
                yellow 75%,
                blue 75%,
                blue 100%
            );
        }

    </style>
</head>
<body>
    <div class="gradient"></div>
    <div class="toTop"></div>
    <div class="toLeft"></div>
    <div class="toRight"></div>
    <div class="toBottom"></div>
    <div class="toColors"></div>
</body>

效果如图：

fongdaBoy

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html5用css3实现线性渐变background-image:linear-gradient使用方法

代码使用：background-image:linear-gradientstyle> div { width: 400px; height: 150px; border: 1px solid #666; line-height: 150px;
复制链接

扫一扫

专栏目录