背景的渐变

最新推荐文章于 2024-08-16 23:06:16 发布

小豪boy

最新推荐文章于 2024-08-16 23:06:16 发布

阅读量82

点赞数

分类专栏： CSS3学习笔记文章标签： css html html5

本文链接：https://blog.csdn.net/qq_34771938/article/details/120068198

版权

CSS3学习笔记专栏收录该内容

23 篇文章 0 订阅

订阅专栏

本文介绍了如何使用CSS的linear-gradient和radial-gradient创建背景渐变效果。线性渐变允许指定方向和颜色停止点，而径向渐变则通过设定圆心位置和颜色变化来实现。此外，还提到了浏览器私有前缀，以确保在不同浏览器中的兼容性。

摘要由CSDN通过智能技术生成

线性渐变

盒子的background-image属性可以用linear-gradient()形式创建线性渐变背景。
/* 渐变方向 开始颜色 结束颜色 */
background-image: linear-gradient(to right, blue, red);

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

<head>
    <meta charset="UTF-8">
    <title>First HTML Web</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            margin: 10px;
            /* 渐变方向 开始颜色 结束颜色 */
            background-image: linear-gradient(to top, red, blue);
        }
    </style>
</head>

<body>
    <!-- 背景渐变 -->
    <div class="div1"></div>
</body>

</html>

渐变方向也可以写成度数。
/* deg表示度数 */
background-image: linear-gradient(45deg, blue, red);

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

<head>
    <meta charset="UTF-8">
    <title>First HTML Web</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            margin: 10px;
            /* deg表示度数 */
            background-image: linear-gradient(90deg, red, blue);
        }
    </style>
</head>

<body>
    <!-- 背景渐变 -->
    <div class="div1"></div>
</body>

</html>

可以有多个颜色值，并且可以用百分数定义它们出现的位置。
linear-gradient(to bottom, blue, yellow 20%, red); 

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

<head>
    <meta charset="UTF-8">
    <title>First HTML Web</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            margin: 10px;
            /* deg表示度数 */
            background-image: linear-gradient(90deg, red, green 80%, blue);
        }
    </style>
</head>

<body>
    <!-- 背景渐变 -->
    <div class="div1"></div>
</body>

</html>

径向渐变

盒子的background-image属性可以用radial-gradient()形式创建径向渐变背景。
/* 径向渐变属性值依次为圆心坐标、开始颜色、结束颜色 */
background-image:radial-gradient(50% 50%, red, blue);

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

<head>
    <meta charset="UTF-8">
    <title>First HTML Web</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            margin: 10px;
            /* 径向渐变属性值依次为圆心坐标、开始颜色、结束颜色 */
            background-image: radial-gradient(50% 50%, orange, green);
        }
    </style>
</head>

<body>
    <!-- 背景渐变 -->
    <div class="div1"></div>
</body>

</html>

浏览器私有前缀

不同浏览器有不同的私有前缀，用来对试验性质的CSS属性加以标识。

品牌前缀
Chrome -webkit-
Firefox -moz-
IE、Edge -ms-
欧朋 -o-

品牌	前缀
Chrome	-webkit-
Firefox	-moz-
IE、Edge	-ms-
欧朋	-o-

小豪boy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
背景的渐变

线性渐变盒子的background-image属性可以用linear-gradient()形式创建线性渐变背景。/* 渐变方向开始颜色结束颜色 */background-image: linear-gradient(to right, blue, red);<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>First
复制链接

扫一扫

专栏目录