CSS中的box-shadow和text-shadow属性通过颜色与透明度的配合，可为元素和文本添加立体阴影效果。1. box-shadow用于块级元素，语法包含偏移、模糊、扩展和颜色，如div卡片使用rgba(0,0,0,0.2)实现自然投影；2. text-shadow用于文本，提升可读性或创造霓虹灯等视觉风格，如白色文字配深色阴影增强对比；3. 颜色协调技巧包括使用相近色调、rgba控制透明度、深背景用浅影、浅背景避纯黑；4. 多层阴影外层模糊大透明低，内层清晰偏移小；5. 实际应用如按钮悬停时通过增大阴影和上移模拟“抬起”交互反馈。合理控制模糊与透明度能使界面更具质感且不失自然。
在网页设计中，颜色和阴影的合理搭配能显著提升视觉层次与用户体验。CSS 提供了 box-shadow 和 text-shadow 两个属性，分别用于为元素框和文本内容添加阴影效果。结合颜色的透明度、明暗变化，可以创造出丰富而自然的立体感。
box-shadow：为元素添加立体边框阴影
box-shadow 可以为块级元素（如 div、按钮等）添加投影，增强页面的层次感。其语法结构包含水平偏移、垂直偏移、模糊半径、扩展半径和颜色。
常用格式：- box-shadow: 水平偏移 垂直偏移 模糊程度 颜色;
- 可设置多个阴影，用逗号分隔
例如，创建一个带有柔和灰色阴影的卡片：
div {
width: 200px;
height: 100px;
background: #4a90e2;
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
border-radius: 8px;
}
这里使用 rgba(0,0,0,0.2) 定义带透明度的黑色，使阴影更自然。配合亮蓝色背景，形成轻盈的浮起效果。
立即学习“前端免费学习笔记（深入）”；
text-shadow：为文字增添视觉深度
text-shadow 用于给文本添加阴影，常用于标题、强调文字或特殊视觉风格。语法与 box-shadow 类似，但不支持扩展半径。
基本写法：- text-shadow: 水平偏移 垂直偏移 模糊半径 颜色;
- 适合用于提升可读性或营造艺术感
比如让白色文字在复杂背景上更清晰：
h1 {
color: white;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}
也可创造霓虹灯效果：
h2 {
color: #ff4d4d;
text-shadow:
0 0 5px #fff,
0 0 10px #ff4d4d,
0 0 20px #ff4d4d;
}
颜色与阴影的协调技巧
要让阴影看起来真实或富有设计感，颜色选择至关重要。
- 使用与主体颜色相近的深色或浅色，保持色调统一
- 借助 rgba 或 hsla 设置透明度，避免阴影过重
- 深色背景上可用浅色阴影突出文字；浅色背景建议用深灰而非纯黑
- 多层阴影叠加时，外层模糊大、透明度低，内层清晰、偏移小
实际应用场景示例
常见用途包括按钮悬停效果、卡片式布局、标题特效等。
.btn {
padding: 10px 20px;
background: #6b4f9a;
color: white;
border: none;
border-radius: 6px;
box-shadow: 2px 2px 6px rgba(107, 79, 154, 0.3);
transition: all 0.3s;
}
.btn:hover {
box-shadow: 0 4px 12px rgba(107, 79, 154, 0.4);
transform: translateY(-2px);
}
通过动态调整 box-shadow 大小模拟“抬起”效果，增强交互反馈。
基本上就这些。掌握颜色与阴影的搭配逻辑，能让界面更有质感，又不会显得花哨过度。关键是控制好模糊与透明度，让视觉效果自然融入整体设计。
