CSS: 渐变与阴影
最后更新：2026-10-13
1. 渐变（Gradient）
渐变是在两种或多种颜色之间平滑过渡的效果。CSS 提供了线性渐变、径向渐变和锥形渐变。
(1) 渐变与阴影属性速查表
| 属性/函数 | 常用值 | 作用 |
|---|---|---|
linear-gradient() |
red, blue, to right, #f00, #00f, 45deg, #ff0, #f0f |
线性渐变（方向+色标） |
radial-gradient() |
circle, red, blue, ellipse at center, #fff, #333 |
径向渐变（从中心向外扩散） |
conic-gradient() |
from 0deg, red, yellow, green |
锥形渐变（从中心旋转） |
box-shadow |
2px 2px 5px rgba(0,0,0,0.3) |
盒子阴影（水平+垂直偏移+模糊+颜色） |
text-shadow |
1px 1px 2px rgba(0,0,0,0.5) |
文本阴影（水平+垂直偏移+模糊+颜色） |
(2) 线性渐变 linear-gradient
💡 渐变工具推荐： 手写渐变比较难记角度和色标位置，推荐用 cssgradient.io 在线工具拖拽生成，然后复制代码。你用得越多，渐变的直觉越好。
颜色沿一条直线方向过渡：
▶ 示例
▶ 试一试方向值：
CSS
/* 使用关键字 */
linear-gradient(to top, ...) /* 从下往上 */
linear-gradient(to right, ...) /* 从左往右 */
linear-gradient(to bottom right, ...) /* 从左上到右下 */
/* 使用角度（更精确） */
linear-gradient(0deg, ...) /* 从下到上（相当于 to top） */
linear-gradient(90deg, ...) /* 从左到右（相当于 to right） */
linear-gradient(180deg, ...) /* 从上到下（默认） */
颜色节点位置：
▶ 示例
▶ 试一试(3) 径向渐变 radial-gradient
颜色从一个中心点向四周辐射：
▶ 示例
▶ 试一试(4) 锥形渐变 conic-gradient
颜色围绕中心点旋转变化：
▶ 示例
▶ 试一试(5) 重复渐变
▶ 示例
▶ 试一试(6) 渐变的实际应用
渐变按钮：
▶ 示例
▶ 试一试渐变遮罩：
▶ 示例
▶ 试一试2. 阴影（Shadow）
CSS 提供了两种阴影：文本阴影和盒子阴影。
(1) 文本阴影 text-shadow
✅ 阴影的层次感： 适度使用阴影能增加页面的层次感。"真实"的阴影通常偏软（blur 值大一点），颜色偏暗但不是纯黑。用
rgba(0,0,0,0.15) 代替纯黑更自然。
▶ 示例
▶ 试一试(2) 盒子阴影 box-shadow
📌 阴影分层： 一个元素可以有多个阴影，用逗号分隔。比如
.card { box-shadow: 0 2px 8px rgba(0,0,0,0.1), 0 8px 32px rgba(0,0,0,0.08); } 做出双层阴影的立体效果。
▶ 示例
▶ 试一试box-shadow 参数说明：
CSS
/* box-shadow 参数：水平偏移 垂直偏移 模糊半径 扩散半径 颜色 内阴影 */
box-shadow: h-offset v-offset blur spread color inset;
| 参数 | 说明 |
|---|---|
| h-offset | 水平偏移量（必填），正数向右 |
| v-offset | 垂直偏移量（必填），正数向下 |
| blur | 模糊半径（可选），越大越模糊 |
| spread | 扩散半径（可选），正数让阴影变大 |
| color | 颜色（可选） |
| inset | 改为内阴影（可选） |
常见阴影效果：
▶ 示例
▶ 试一试(3) drop-shadow（滤镜阴影）
filter: drop-shadow() 与 box-shadow 不同，它会跟随元素的实际轮廓（包括透明部分）：
▶ 示例
▶ 试一试❓ 常见问题
Q 渐变颜色写起来很复杂，有什么工具推荐？
A 推荐 cssgradient.io 和 webgradients.com，在线拖拽生成渐变代码，直接复制使用。多看看别人的渐变配色方案，慢慢就有感觉了。手写渐变的难点主要在角度和色标位置的直觉。
Q box-shadow 可以做多个阴影吗？
A 可以，用逗号分隔多个阴影值。比如
box-shadow: 0 2px 8px rgba(0,0,0,0.1), 0 8px 32px rgba(0,0,0,0.08); 做出双层阴影效果。多个阴影按声明顺序叠加，先写的在上层。Q text-shadow 和 box-shadow 有什么区别？
A text-shadow 作用于文字本身，没有扩散（spread）参数，不支持内阴影。box-shadow 作用于元素的整个盒子，有 spread 参数，支持 inset 内阴影。两者的语法类似但能力不同。
📖 小节
- 渐变和阴影是提升页面视觉品质的两大利器
linear-gradient最常用- 适合制作按钮、背景、遮罩；
box-shadow能给元素增加立体感 - 卡片悬浮时加阴影是最常见的用法；
text-shadow则用来装饰文字 - 两者结合使用，可以让页面看起来更精致、更有层次
📝 作业
- 使用
linear-gradient创建一个渐变按钮——从左侧颜色渐变为右侧颜色，鼠标悬停时渐变方向改变。 - 制作一个"悬浮卡片"效果——卡片默认有轻微阴影，鼠标悬停时阴影加深并上移，产生"抬起来"的立体感。
- 使用
repeating-linear-gradient创建条纹背景图案。 - 给一个 PNG 图标或文字添加
text-shadow或drop-shadow发光效果。
