text-shadow和box-shadow分别用于文字和元素阴影，提升视觉层次；前者通过水平、垂直偏移及模糊半径增强文本可读性，如标题发光或描边效果；后者为按钮、卡片等添加外阴影或内阴影，营造立体感；两者结合使用可强化整体设计表现，但需控制透明度与模糊度以避免页面过重。
在CSS初级项目中，text-shadow 和 box-shadow 是两个常用的属性，分别用于为文字和元素添加阴影效果。合理使用它们可以提升页面的视觉层次和交互感。
text-shadow：为文字添加阴影
text-shadow 属性可以让文字产生阴影，常用于标题、LOGO或强调文本，增强可读性和设计感。
语法格式：
text-shadow: 水平偏移 垂直偏移 模糊半径 颜色;四个值均可选，但至少需要指定前两个（水平和垂直偏移）。
常见用法示例：
- text-shadow: 2px 2px 4px rgba(0,0,0,0.5); —— 标准阴影，轻微模糊
- text-shadow: 0 0 5px gold; —— 发光效果，适合高亮文字
- text-shadow: 1px 1px 0 #fff, -1px -1px 0 #000; —— 双层阴影，实现描边感
实际应用中，可以这样写：
.title {text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
}
box-shadow：为元素添加阴影
box-shadow 作用于整个元素框，常用于按钮、卡片、模态框等组件，营造立体感或浮动效果。
语法格式：
box-shadow: 水平偏移 垂直偏移 模糊半径 扩散半径 颜色 inset/none;其中“扩散半径”和“inset”为可选项，“inset”表示内阴影。
常用场景示例：
- box-shadow: 0 4px 8px rgba(0,0,0,0.1); —— 卡片轻微浮起效果
- box-shadow: 0 2px 4px rgba(0,0,0,0.2), 0 4px 8px rgba(0,0,0,0.1); —— 多层阴影更自然
- box-shadow: inset 0 2px 4px rgba(255,255,255,0.6); —— 按钮内阴影，模拟凹陷感
按钮阴影实例：
.btn {padding: 10px 20px;
background: #007bff;
color: white;
border: none;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
border-radius: 4px;
}
结合使用提升视觉效果
在实际项目中，可以同时使用 text-shadow 和 box-shadow 来增强整体表现力。例如一个突出的标题按钮：
.highlight-btn {padding: 12px 24px;
background: linear-gradient(#ff8a00, #da5e00);
color: white;
border: none;
border-radius: 6px;
font-size: 18px;
text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
这样文字更有层次，按钮也显得立体突出。
基本上就这些。掌握这两个属性的参数含义和常见搭配，就能在初级项目中轻松实现美观的阴影效果。注意控制透明度和模糊程度，避免过度使用导致页面沉重。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
