CSS渐变属性通过linear-gradient和radial-gradient实现无图平滑过渡。线性渐变支持方向与颜色节点设置，如to bottom或45deg；径向渐变从中心点扩散，可定义形状、大小与位置；结合透明色、多色停止点及备用背景色，可创建按钮、卡片等视觉效果，提升页面表现力且无需图片资源。
CSS 的背景渐变属性让网页设计更加生动，无需图片就能实现平滑的颜色过渡。其中 linear-gradient（线性渐变）和 radial-gradient（径向渐变）是最常用的两种方式。掌握它们的基本语法和常见用法，能快速提升页面视觉效果。
linear-gradient：创建线性渐变背景
线性渐变沿着一个方向平滑地改变颜色，方向可以是水平、垂直或对角线。
基本语法：
background: linear-gradient(direction, color-stop1, color-stop2, ...);说明：
立即学习“前端免费学习笔记（深入）”；
- direction：指定渐变方向，如 to right（从左到右）、to bottom right（从左上到右下），也可以用角度表示，如 45deg
- color-stop：颜色值及可选的位置，比如 red 0%, blue 100%
示例：
/* 从上到下的蓝紫渐变 */background: linear-gradient(to bottom, #3498db, #8e44ad);
/* 45度角的渐变 */
background: linear-gradient(45deg, yellow, orange);
radial-gradient：创建径向渐变背景
径向渐变从一个中心点向外扩散，形状可以是圆形或椭圆，适用于光晕、焦点等视觉效果。
基本语法：
background: radial-gradient(shape size at position, color-stop1, color-stop2, ...);说明：
立即学习“前端免费学习笔记（深入）”；
- shape：circle（圆形）或 ellipse（椭圆）
- size：渐变的大小，如 closest-corner、farthest-side 等
- position：中心点位置，默认居中，也可设为 left top 等
示例：
/* 圆形渐变，中心发散 */background: radial-gradient(circle, #ff6b6b, #c44d56);
/* 椭圆渐变，起点在左上角 */
background: radial-gradient(ellipse at left top, white, black);
实用技巧与注意事项
使用渐变时，有几个小技巧能让效果更自然、兼容性更好：
- 添加备用纯色背景，确保老浏览器有基本显示：
background: #ccc;
background: linear-gradient(...); - 控制颜色过渡点，实现多段渐变：
background: linear-gradient(to right, red 0%, yellow 50%, green 100%); - 结合透明色（transparent）做遮罩或淡出效果：
background: linear-gradient(to top, transparent, white); - 用于按钮、卡片、全屏背景都很合适，减少图片加载
基本上就这些。掌握 linear-gradient 和 radial-gradient 后，大多数渐变需求都能通过几行 CSS 实现，简洁又高效。
