CSS: 渐变与阴影
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 在线工具拖拽生成，然后复制代码。你用得越多，渐变的直觉越好。
颜色沿一条直线方向过渡：
▶ 示例
HTML
<style>
.box {
background: linear-gradient(red, blue);
/* 默认从上到下，从红到蓝 */
}
.box {
background: linear-gradient(to right, red, yellow, green);
/* 从左到右，红→黄→绿 */
}
.box {
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
/* 45度角方向 */
}
</style>
<div class="box">这是一个盒子元素，用于展示盒模型相关样式效果</div>
<span class="demo-right">右侧内容</span>
方向值：
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, ...) /* 从上到下（默认） */
颜色节点位置：
▶ 示例
HTML
<style>
.box {
background: linear-gradient(to right, red 0%, yellow 50%, blue 100%);
}
</style>
<div class="box">这是一个盒子元素，用于展示盒模型相关样式效果</div>
<span class="demo-right">右侧内容</span>
<span class="demo-blue">蓝色文本</span>
(3) 径向渐变 radial-gradient
颜色从一个中心点向四周辐射：
▶ 示例
HTML
<style>
.box {
background: radial-gradient(circle, skyblue, blue);
/* 圆形径向渐变 */
background: radial-gradient(ellipse, red, yellow, green);
/* 椭圆形径向渐变（默认） */
}
/* 指定位置 */
.box {
background: radial-gradient(circle at top left, white, #333);
}
</style>
<div class="box">这是一个盒子元素，用于展示盒模型相关样式效果</div>
(4) 锥形渐变 conic-gradient
颜色围绕中心点旋转变化：
▶ 示例
HTML
<style>
.box {
background: conic-gradient(red, yellow, green, cyan, blue, magenta, red);
/* 类似色环 */
}
</style>
<div class="box">这是一个盒子元素，用于展示盒模型相关样式效果</div>
<span class="demo-blue">蓝色文本</span>
(5) 重复渐变
▶ 示例
HTML
<style>
.box {
background: repeating-linear-gradient(
45deg,
#eee 0px,
#eee 10px,
#ccc 10px,
#ccc 20px
); /* 45度条纹图案 */
}
.box {
background: repeating-radial-gradient(
circle,
#ffcccc 0px,
#ffcccc 10px,
#cc9999 10px,
#cc9999 20px
); /* 同心圆环 */
}
</style>
<div class="box">这是一个盒子元素，用于展示盒模型相关样式效果</div>
<circle>Circle</circle>
(6) 渐变的实际应用
渐变按钮：
▶ 示例
HTML
<style>
.btn {
background: linear-gradient(to right, #667eea, #764ba2);
color: white;
padding: 12px 24px;
border: none;
border-radius: 6px;
cursor: pointer;
transition: opacity 0.3s;
}
.btn:hover {
opacity: 0.9;
}
</style>
<button class="btn">Btn</button>
<span class="demo-right">右侧内容</span>
<span class="demo-opacity">不透明度效果</span>
<button class="btn">Btn</button>
渐变遮罩：
▶ 示例
HTML
<style>
.overlay {
background: linear-gradient(
to bottom,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0.7) 100%
);
}
</style>
<div class="overlay">半透明遮罩层覆盖内容</div>
<span class="demo-bottom">底部内容</span>
2. 阴影（Shadow）
CSS 提供了两种阴影：文本阴影和盒子阴影。
(1) 文本阴影 text-shadow
✅ 阴影的层次感： 适度使用阴影能增加页面的层次感。"真实"的阴影通常偏软（blur 值大一点），颜色偏暗但不是纯黑。用
rgba(0,0,0,0.15) 代替纯黑更自然。
▶ 示例
HTML
<style>
.text {
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
/* 水平偏移 垂直偏移 模糊半径 颜色 */
}
/* 无偏移的发光效果 */
.glow {
text-shadow: 0 0 10px rgba(255,255,0,0.8);
}
/* 多层阴影 */
.multi-shadow {
text-shadow: 1px 1px 2px black,
0 0 10px blue,
0 0 20px blue;
}
</style>
<div class="text">普通正文文本内容示例</div>
<div class="glow">发光文字特效</div>
<div class="multi-shadow">多层阴影叠加效果</div>
<span class="demo-blue">蓝色文本</span>
(2) 盒子阴影 box-shadow
📌 阴影分层： 一个元素可以有多个阴影，用逗号分隔。比如
.card { box-shadow: 0 2px 8px rgba(0,0,0,0.1), 0 8px 32px rgba(0,0,0,0.08); } 做出双层阴影的立体效果。
▶ 示例
HTML
<style>
.card {
box-shadow: 2px 4px 8px rgba(0,0,0,0.2);
/* 水平偏移 垂直偏移 模糊半径 扩散半径 颜色 */
}
/* 内阴影 */
.card {
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}
/* 多层阴影 */
.card {
box-shadow: 0 2px 8px rgba(0,0,0,0.1),
0 8px 32px rgba(0,0,0,0.05);
}
</style>
<div class="card">Card</div>
<span class="demo-inset">内嵌边框</span>
box-shadow 参数说明：
CSS
box-shadow: h-offset v-offset blur spread color inset;
| 参数 | 说明 |
|---|---|
| h-offset | 水平偏移量（必填），正数向右 |
| v-offset | 垂直偏移量（必填），正数向下 |
| blur | 模糊半径（可选），越大越模糊 |
| spread | 扩散半径（可选），正数让阴影变大 |
| color | 颜色（可选） |
| inset | 改为内阴影（可选） |
常见阴影效果：
▶ 示例
HTML
<style>
/* 卡片阴影（最常用） */
.card {
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* 悬浮阴影 */
.card:hover {
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
transform: translateY(-2px);
transition: all 0.3s;
}
/* 按钮点击下沉 */
.btn:active {
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
transform: translateY(1px);
}
</style>
<div class="card">Card</div>
<div class="card">Card</div>
<span class="demo-all">全部属性</span>
<button class="btn">Btn</button>
(3) drop-shadow（滤镜阴影）
filter: drop-shadow() 与 box-shadow 不同，它会跟随元素的实际轮廓（包括透明部分）：
▶ 示例
HTML
<style>
.logo {
filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3));
/* 滤镜效果 */
/* 阴影会沿着PNG图片的非透明边缘 */
}
</style>
<div class="logo">网站 Logo</div>
❓ 常见问题
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发光效果。
