背景渐变

最新推荐文章于 2025-07-15 14:44:59 发布

原创最新推荐文章于 2025-07-15 14:44:59 发布 · 458 阅读

1 ·

CC 4.0 BY-SA版权

Web前端疑难点专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何使用CSS实现背景渐变效果，并提供了代码示例。强调了为了兼容不同浏览器需要使用特定的浏览器前缀。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景渐变

背景渐变简单来说背景颜色不再是单一的色调而是从一种颜色过度到另一种颜色

语法格式

backgroud:linear-gradient(起始位置，起始颜色，结束颜色)

代码实列

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            margin: 200px auto;
            /*linear-gradient背景渐变:不再是单一的颜色而是从一种颜色过度到另一种颜色 */
            background: -webkit-linear-gradient(top, pink 20%, green 30%,blue 50%); /*背景渐变由于兼容性的问题必须加上浏览器的私有前缀*/
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

实例效果

在这里插入图片描述
需要注意的是:背景渐变由于兼容性的问题必须加上浏览器的私有前缀否则一般都是不生效的