CSS通过background或background-image实现渐变，使用linear-gradient创建线性渐变，radial-gradient创建径向渐变，repeating-linear-gradient生成重复条纹，支持多色与透明度，兼容性良好。
CSS 中并没有 background-gradient 这个属性，渐变效果是通过 background 或 background-image 来实现的。你可以使用 CSS 的 linear-gradient()、radial-gradient() 等函数来创建渐变背景。
最常见的渐变类型是从一种颜色平滑过渡到另一种颜色，方向可以是水平、垂直或对角线。
语法：background: linear-gradient(direction, color-stop1, color-stop2, ...);
示例：
立即学习“前端免费学习笔记（深入）”；
从上到下的蓝色渐变：
.box {
background: linear-gradient(blue, lightblue);
}从左到右的红色到黄色：
.box {
background: linear-gradient(to right, red, yellow);
}对角线渐变：
.box {
background: linear-gradient(to bottom right, purple, pink);
}颜色从一个中心点向外扩散，形成圆形或椭圆形渐变。
语法：background: radial-gradient(shape size at position, start-color, ..., last-color);
示例：
立即学习“前端免费学习笔记（深入）”；
.box {
background: radial-gradient(circle, yellow, green);
}你也可以指定位置：
.box {
background: radial-gradient(at top left, white, black);
}如果你想要条纹或重复图案，可以用 repeating-linear-gradient 或 repeating-radial-gradient。
示例：创建彩色条纹背景
.stripes {
background: repeating-linear-gradient(
45deg,
red,
red 10px,
yellow 10px,
yellow 20px
);
}渐变支持任意数量的颜色节点，还可以结合透明色（如 rgba 或 transparent）做淡出效果。
示例：带透明度的渐变遮罩
.fade-overlay {
background: linear-gradient(
to bottom,
rgba(0,0,0,0),
rgba(0,0,0,0.8)
);
}基本上就这些。只要用对函数和语法，渐变背景在现代浏览器中兼容性很好，不复杂但容易忽略细节。
以上就是如何用css设置元素背景渐变background-gradient的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
290
收藏
