在css中如何用linear-gradient实现渐变背景

来源：Golang编程网作者：越南程序员头衔：程序员

导读：本期聚焦于小伙伴创作的《在css中如何用linear-gradient实现渐变背景》，敬请观看详情，探索知识的价值。以下视频、文章将为您系统阐述其核心内容与价值。如果您觉得《在css中如何用linear-gradient实现渐变背景》有用，将其分享出去将是对创作者最好的鼓励。

在css中，linear-gradient是用于创建线性渐变背景图像的实用函数，它不需要引入图片资源，直接通过css代码就能让背景颜色沿指定方向平滑过渡。掌握它的写法，对做网页视觉设计很有帮助。

linear-gradient基础语法

linear-gradient的基本语法结构如下，第一个参数表示渐变方向，后面跟着一个或多个颜色及可选的位置断点：

/* 语法：linear-gradient(方向, 颜色 位置, 颜色 位置, ...) */
.background {
  background-image: linear-gradient(to right, #ff0000, #0000ff);
}

上面这段代码会让背景从左侧的红色平滑过渡到右侧的蓝色。方向参数可以写角度如45deg，也可以写关键词如to bottom。

如果不想用方位词，可以用角度精确控制。0deg表示自下而上，90deg表示从左向右，依此类推：

.box {
  /* 45度角渐变，从左下到右上 */
  background: linear-gradient(45deg, #ffcc00, #ff0066);
}

你可以在颜色后面写上百分比或长度，决定该颜色在渐变线上的起始位置：

.bar {
  background: linear-gradient(to right,
    #00c3ff 0%,
    #00c3ff 30%,
    #ffff00 30%,
    #ffff00 100%);
}

上面的写法在30%处形成硬边界，做出两段式色块背景。若百分比连续变化，则是柔和过渡。

linear-gradient支持多个颜色，实现更丰富的背景：

.rainbow {
  background: linear-gradient(to bottom,
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet);
}

渐变背景相比图片更轻量，且能随容器尺寸自适应拉伸，是响应式设计中常用的技巧。

在支持css变量的环境中，可以把颜色提取出来方便维护：

:root {
  --c1: #667eea;
  --c2: #764ba2;
}
.card {
  background: linear-gradient(135deg, var(--c1), var(--c2));
}

css linear-gradient 渐变背景修改时间：2026-07-29 23:03:17

免责声明：已尽一切努力确保本网站所含信息的准确性。网站内容多为原创整理与精心编撰，观点力求客观中立。本站旨在免费分享，内容仅供个人学习、研究或参考使用。若引用了第三方作品，版权归原作者所有。如内容涉及您的权益，请联系我们处理。