最常用方式是用background属性直接设置linear-gradient()或radial-gradient()；必须用background而非background-color，需兼容旧版时双写并加-webkit-前缀。

用 background 直接写线性渐变最常用

HTML5 本身不提供插入渐变的标签，所有渐变都靠 CSS 实现。最直接的方式是给元素（比如 或

）设置 background 属性，值为 linear-gradient() 或 radial-gradient()。

注意：渐变是「图像」类型值，不是颜色，所以不能写成 background-color: linear-gradient(...) —— 这会失效。

• background: linear-gradient(to right, #ff6b6b, #4ecdc4); 是合法的
• background-color: linear-gradient(...) 是无效的，浏览器会忽略
• 推荐用 background 而非 background-image，因为前者能同时覆盖颜色 fallback（如 background: #fff; background: linear-gradient(...);）

兼容旧浏览器要加 -webkit- 前缀

虽然现代 Chrome/Firefox/Safari/Edge 都已原生支持 linear-gradient()，但 iOS Safari 9.3 之前、Android Browser 4.4 之前仍需前缀。只写标准写法，在这些老环境里会退化成纯色或空白。

安全写法是双写：

div {
  background: #f0f0f0;
  background: -webkit-linear-gradient(left, #ff6b6b, #4ecdc4);
  background: linear-gradient(to right, #ff6b6b, #4ecdc4);
}

注意：-webkit-linear-gradient() 的方向参数和标准版不同：left 对应 to right，top 对应 to bottom，别混用。

用 radial-gradient() 做圆形/椭圆渐变

如果要中心发散效果（比如按钮高光、卡片悬浮态），radial-gradient() 更合适。它默认从中心开始，可控制形状、大小和焦点位置。

Knowledge Graph - Csv Graph Loader Generator

从 CSV 数据集生成图数据库加载器和三元组映射。将表格 CSV 数据转换为图数据库可直接使用的节点、边和三元组。

下载

• background: radial-gradient(circle, #ff9a9e, #fad0c4); —— 完美圆形
• background: radial-gradient(ellipse at 20% 30%, #3498db, #2c3e50); —— 椭圆，焦点在距左20%、距顶30%处
• 性能上，radial-gradient 比 linear-gradient 略重，尤其在大范围元素上滚动时可能轻微掉帧

渐变里混用透明色或色标位置要小心

渐变支持 rgba() 和 transparent，但透明叠加容易导致视觉意外。比如 linear-gradient(to bottom, white, transparent) 看起来像“淡出”，但如果父容器没设背景色，底下内容会透出来，未必是你想要的“遮罩”效果。

另外，色标（color stop）位置不写单位会被当成百分比，写了单位（如 50px）则按像素计算——这在响应式布局中极易错位：

/* ❌ 响应式下易断裂 */
background: linear-gradient(to right, #ff6b6b 0, #4ecdc4 200px);
<p>/<em> ✅ 推荐用百分比或关键词 </em>/
background: linear-gradient(to right, #ff6b6b 0%, #4ecdc4 100%);</p>

真正难处理的是多色标 + 透明 + 动画组合，这时候建议先在 CodePen 上调好再嵌入项目，别在生产环境边试边改。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！