前端开发中的背景渐变

最新推荐文章于 2024-05-14 15:54:47 发布

爱前端的小张

最新推荐文章于 2024-05-14 15:54:47 发布

阅读量2.6k

点赞数 1

分类专栏：前端学习

本文链接：https://blog.csdn.net/weixin_44628177/article/details/118762286

版权

前端 css3 css

前端学习专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1.目的

实现盒子背景的渐变，使盒子变得更好看

2.语法格式

background: linear-gradient(起始方向，颜色1，颜色2)；

是从起始方向开始，从颜色1逐渐变到颜色2

注意：这个样式对浏览器有限制，必须添加浏览器私有前缀

例：background: -webkit-linear-gradient(left top, red, blue);

3.代码演示

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one {
            width: 300px;
            height: 300px;
            /*1.从上方开始变色*/
            background: -webkit-linear-gradient(top, red, blue);
        }
        
        .two {
            width: 300px;
            height: 300px;
            /*2.从左上方开始变色*/
            background: -webkit-linear-gradient(left top, red, blue);
        }
    </style>
</head>

<body>
    <div class="one"></div>
    <div class="two"></div>
</body>

</html>

在这里插入图片描述

爱前端的小张

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
前端开发中的背景渐变

1.目的实现盒子背景的渐变，使盒子变得更好看2.语法格式background: linear-gradient(起始方向，颜色1，颜色2)；是从起始方向开始，从颜色1逐渐变到颜色2注意：这个样式对浏览器有限制，必须添加浏览器私有前缀例：background: -webkit-linear-gradient(left top, red, blue);3.代码演示<!DOCTYPE html><html lang="en"><head> <
复制链接

扫一扫