CSS通过box-shadow和text-shadow属性为元素和文本添加阴影，提升视觉层次。box-shadow适用于盒子元素，支持水平偏移、垂直偏移、模糊半径、扩展半径、颜色及内阴影（inset）参数，可模拟立体感、浮空效果或凹陷质感；text-shadow专用于文本，语法更简单，无扩展半径和inset，常用于发光、描边等文字特效。两者均支持多重阴影（逗号分隔），实现环境光与直射光叠加等真实光照效果。高级用法包括结合transition创建悬停浮起动画，提升交互体验。但需注意性能：大模糊半径和多层动画阴影增加渲染负担，应避免在大量元素上过度使用，优先使用硬件加速属性如transform辅助实现轻量动效，确保页面流畅。
想给你的网页元素或文字加点“深度”和“立体感”？CSS的投影（也就是阴影效果）就是实现这个目的的核心工具。我们主要会用到
box-shadow给盒子模型元素加阴影，以及
text-shadow给文本加阴影。这两个属性通过几个简单的参数，就能帮你调整阴影的偏移、模糊度、扩散范围和颜色，让你的设计瞬间提升好几个档次。
解决方案
CSS中添加阴影效果，主要是通过
box-shadow和
text-shadow这两个属性。它们的基本语法和参数设置是理解和应用的关键。
对于元素（盒子）阴影，我们使用
box-shadow。它允许你为一个元素的边框或背景添加一个或多个阴影。
基本语法：
box-shadow: h-shadow v-shadow blur-radius spread-radius color inset;
h-shadow
：水平方向的阴影偏移量。正值向右偏移，负值向左偏移。v-shadow
：垂直方向的阴影偏移量。正值向下偏移，负值向上偏移。blur-radius
（可选）：模糊半径。值越大，阴影越模糊。默认为0（不模糊）。spread-radius
（可选）：扩展半径。正值使阴影扩大，负值使阴影缩小。默认为0（不扩展）。color
（可选）：阴影的颜色。默认为浏览器默认色（通常是黑色）。inset
（可选）：将外部阴影（outset，默认）改为内部阴影。
示例：
立即学习“前端免费学习笔记（深入）”；
.my-box {
width: 200px;
height: 100px;
background-color: #f0f0f0;
border: 1px solid #ccc;
/* 一个简单的外部阴影：向右下偏移5px，模糊8px，颜色为半透明黑色 */
box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.3);
}
.my-inset-box {
width: 200px;
height: 100px;
background-color: #e9e9e9;
border: 1px solid #bbb;
/* 一个内部阴影：向右下偏移3px，模糊5px，颜色为深灰色 */
box-shadow: 3px 3px 5px #666 inset;
}对于文本阴影，我们使用
text-shadow。它只适用于文本内容，不能给整个元素添加阴影。
基本语法：
text-shadow: h-shadow v-shadow blur-radius color;
h-shadow
：水平方向的阴影偏移量。v-shadow
：垂直方向的阴影偏移量。blur-radius
（可选）：模糊半径。color
（可选）：阴影的颜色。
示例：
立即学习“前端免费学习笔记（深入）”；
.my-text {
font-size: 48px;
color: #333;
/* 一个简单的文本阴影：向右下偏移2px，模糊1px，颜色为灰色 */
text-shadow: 2px 2px 1px #aaa;
}
.glowing-text {
font-size: 60px;
color: #fff;
/* 模拟发光效果的文本阴影：水平垂直不偏移，大模糊半径，亮色 */
text-shadow: 0 0 10px #00f, 0 0 20px #00f, 0 0 30px #00f; /* 多重阴影实现更强发光 */
}如何精细控制CSS元素阴影效果？深入解析box-shadow参数
谈到
box-shadow，我个人觉得它的魅力在于那几个参数的组合，能玩出各种花样。不只是简单的加个影子，它能塑造出按钮的按下感、卡片的浮空感，甚至模拟出一些复杂的UI纹理。
h-shadow和
v-shadow是基础，它们决定了阴影的“位置”。想象一下光源从哪个方向照过来，阴影就往反方向偏。正值意味着阴影在元素的右侧和下方，负值则是左侧和上方。这两个值设得太大会让阴影看起来很“硬”，不够自然。
blur-radius是让阴影变得柔和的关键。值越大，阴影边缘就越模糊，越能模拟出真实世界中光线散射的效果。比如，一个离元素很近、很小的阴影，
blur-radius可以设小点，让它看起来更锐利；而一个模拟浮空感的阴影，
blur-radius通常会设得大一些，让它看起来更柔和、更扩散。有时候我会遇到一个问题，就是阴影模糊了，但总觉得不够“大”，这时候就需要
spread-radius出马了。
spread-radius这个参数，很多初学者容易忽略，但它非常有用。它控制阴影的“大小”。正值会使阴影在模糊之前向外扩展，负值则会向内收缩。举个例子，如果你想做一个看起来像是“光晕”的效果，而不是一个明确的影子，你可能需要一个大的
blur-radius和一个正的
spread-radius。反之，如果你想让阴影只在元素边缘出现一点点，那么一个小的
spread-radius（甚至是负值）配合适度的
blur-radius会很有效。
最后是
color，阴影的颜色选择至关重要。我通常建议使用
rgba()格式，这样可以设置透明度。一个半透明的黑色阴影（例如
rgba(0, 0, 0, 0.2)）通常比纯黑色阴影看起来更自然、更融入背景。当然，你也可以尝试用元素的背景色或主题色来派生阴影色，这样能保持整体视觉的一致性。
inset关键字则完全改变了阴影的性质，它把外部阴影变成了内部阴影。这对于创建凹陷效果、输入框的边框内阴影等非常有用。它能让一个平面元素看起来像是被“按下去”或者“嵌入”了。
我发现一个小技巧，如果你想让阴影看起来更真实，可以尝试将
h-shadow和
v-shadow设为0，只调整
blur-radius和
spread-radius，这样就能得到一个围绕元素均匀分布的“光晕”效果。
text-shadow和box-shadow有何不同？各自适用场景与高级用法
text-shadow和
box-shadow虽然都叫“阴影”，但它们的用途和行为还是有明显区别的。最直观的，
text-shadow顾名思义是给文本加阴影的，而
box-shadow则是给任何盒子模型元素（比如
div、
button、
img等）加阴影。
text-shadow的参数相对简单，只有水平偏移、垂直偏移、模糊半径和颜色。它没有
spread-radius和
inset这两个参数。这意味着你不能让文本阴影像
box-shadow那样“扩大”或“收缩”，也不能让它变成“内部阴影”。这其实也合理，文本阴影更注重的是文字本身的视觉增强，而不是模拟物理对象的凹凸感。
适用场景上，
text-shadow非常适合用于标题、导航文字、特殊字体设计等需要强调或美化文本的地方。比如，给标题加一个微弱的模糊阴影，能让它在背景上“跳出来”；或者用多重
text-shadow来模拟霓虹灯、发光字的效果，这在一些创意设计中很常见。我个人在做一些海报或广告页时，特别喜欢用
text-shadow来给关键信息加点“分量”，让它们不至于淹没在复杂的背景中。
box-shadow则更侧重于UI元素的立体感和交互反馈。比如，一个按钮在鼠标悬停时，可以动态改变
box-shadow的参数，让它看起来像是“浮起来”了，或者在点击时，用
inset阴影模拟“按下”的效果。卡片式布局中，
box-shadow是营造卡片“浮在”页面之上的关键，适当的偏移和模糊能让它们显得轻盈且有层次。
一个我经常用到的高级用法是多重阴影。无论是
box-shadow还是
text-shadow，你都可以通过逗号分隔的方式添加多个阴影层。这能实现很多单一阴影无法达到的效果。
例如，用
box-shadow创建多重阴影：
.complex-shadow-box {
width: 150px;
height: 150px;
background-color: #eee;
/* 一个浅色模糊阴影，模拟环境光 */
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1),
/* 一个更深色、更锐利的阴影，模拟直射光 */
0 2px 3px rgba(0, 0, 0, 0.2);
}这样就能模拟出更真实的光照效果，一个柔和的背景阴影，再加上一个更清晰的投影。
text-shadow的多重阴影则常用于创建描边、3D文字或发光效果：
.outline-text {
font-size: 72px;
color: #fff;
/* 模拟描边效果：多个方向的无模糊阴影 */
text-shadow: 1px 1px 0 #000,
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000;
}通过这种方式，你可以实现非常丰富的文本视觉效果，远超简单的单层阴影。
CSS阴影的高级用法与性能考量：如何实现复杂效果并保持流畅性？
在实际项目中，我们往往不满足于简单的单层阴影。高级用法通常涉及多重阴影和动画化阴影。
多重阴影前面提到了，通过逗号分隔可以为同一个元素添加多个
box-shadow或
text-shadow。这不仅仅是为了增加阴影的数量，更是为了模拟更真实、更复杂的物理光照。比如，你可以用一个大的、模糊的、透明度低的阴影来模拟环境光，再用一个小的、锐利的、透明度高的阴影来模拟直射光。甚至，可以用不同颜色的阴影来创造彩色光晕效果。我发现，这种分层叠加的方式，能让阴影看起来更有层次感，而不是一团模糊的黑色。
动画化阴影则是让用户界面更具动态和交互性的重要手段。例如，当鼠标悬停在一个卡片上时，卡片的
box-shadow可以从一个较小的、模糊的状态平滑过渡到一个更大的、更明显的浮动状态。这通常通过CSS
transition属性来实现。
.card {
/* 初始状态 */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s ease; /* 添加过渡效果 */
}
.card:hover {
/* 悬停状态：阴影变大，模拟浮起 */
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}这种动态效果能显著提升用户体验，让界面感觉更“活泼”。
然而，在追求这些酷炫效果的同时，性能考量是绝对不能忽视的。CSS阴影，尤其是复杂的、多层的或动画化的阴影，可能会对页面渲染性能产生影响。
这是因为阴影的渲染涉及到像素的计算和混合，特别是
blur-radius值越大，需要计算的像素点就越多，对GPU的压力也越大。如果页面上有很多带有复杂阴影的元素，或者阴影频繁地进行动画，用户可能会遇到页面卡顿、掉帧的情况。
为了保持流畅性，我有几个实践经验：
-
适度使用模糊和扩展半径：不要无限制地增大
blur-radius
和spread-radius
。找到一个视觉效果和性能之间的平衡点。 - 避免在大量元素上使用复杂阴影：如果一个页面有上百个小卡片，每个卡片都有一个多层动画阴影，那很可能就会出问题。在这种情况下，考虑简化阴影效果，或者只在关键元素上使用。
-
利用
transform
进行动画：有时候，如果你只是想让元素看起来“浮起”一点，除了阴影，结合transform: translateY(-Xpx)
也会有不错的效果，而且通常transform
的性能开销比box-shadow
动画要小，因为它通常会触发GPU加速。 -
硬件加速：现代浏览器通常会对
box-shadow
进行硬件加速，尤其是在opacity
和transform
属性发生变化时。但即便如此，过度复杂的阴影仍然可能导致性能瓶颈。 -
减少重绘和重排：改变
box-shadow
属性通常会导致浏览器进行重绘（repaint），但不一定会触发重排（reflow），这相对来说性能开销较小。但如果动画过于频繁或涉及大量元素，仍然会累积性能负担。
总的来说，CSS阴影是前端开发中一个非常强大的工具，它能以相对简单的方式为设计增添深度和质感。但作为开发者，我们得像一个老道的工匠，在追求美观的同时，也要时刻警惕性能的“陷阱”，用最恰当、最有效率的方式去实现我们的创意。
