CSS中通过box-shadow和text-shadow实现元素阴影与高光，box-shadow用于块级元素的立体感、内阴影和多重阴影效果，支持水平偏移、垂直偏移、模糊半径、扩散半径、颜色及inset内阴影；text-shadow则作用于文本，语法更简洁，常用于提升可读性或创建描边、发光、3D等艺术效果。高光通过浅色阴影配合负偏移或内阴影实现，如左上角添加白色阴影模拟光源照射。多层阴影叠加可增强深度感，例如Neumorphism风格按钮利用亮暗双阴影营造柔软浮雕效果；text-shadow需注意避免过度模糊影响可读性，应确保文本与背景对比度符合WCAG标准。性能方面，复杂阴影尤其大模糊半径可能影响渲染效率，建议减少阴影层数、慎用动画中的扩散与模糊变化。实例包括卡片立体感设计、按钮悬停与按下状态的阴影过渡，以及霓虹灯文字等视觉特效。
CSS中控制元素阴影和高光主要依赖box-shadow和text-shadow这两个属性。通过精确调整它们的颜色、偏移量、模糊半径和扩散半径，我们可以为界面元素赋予从微妙的立体感、浮雕效果到醒目的高光和深度感。
解决方案
要实现元素（如按钮、卡片）的阴影与高光，我们主要使用box-shadow属性。它允许你为元素盒子添加一个或多个阴影。其基本语法是：box-shadow: h-offset v-offset blur-radius spread-radius color inset;。
-
h-offset：水平偏移量，正值向右，负值向左。 -
v-offset：垂直偏移量，正值向下，负值向上。 -
blur-radius：模糊半径，值越大阴影越模糊。 -
spread-radius：扩散半径，正值使阴影扩大，负值使阴影缩小。 -
color：阴影颜色。 -
inset：可选关键字，将阴影变为内阴影。
对于文本的阴影和高光，则使用text-shadow。它的语法类似但更简洁：text-shadow: h-offset v-offset blur-radius color;。它没有spread-radius和inset的概念。
如何实现高光？ 高光效果本质上是“亮色阴影”。我们可以通过以下方式实现：
-
使用浅色阴影：将
box-shadow或text-shadow的颜色设置为白色、浅灰色或其他亮色。 - 负偏移或多重阴影：通过将阴影的水平和垂直偏移量设置为负值，使其出现在元素的左上角，模拟光源从左上方照射的效果。或者，使用多重阴影，一个深色阴影在右下角，一个亮色阴影在左上角，共同营造立体感。
-
inset内阴影：对于box-shadow，使用inset关键字配合亮色，可以创建元素的“内发光”或“凹陷”中的高光效果。
/* 示例：一个带有阴影和高光效果的卡片 */
.card {
width: 200px;
height: 150px;
background-color: #f0f0f0;
border-radius: 8px;
/* 模拟光源从左上角照射，右下角有深色阴影 */
box-shadow:
-5px -5px 10px #ffffff, /* 左上角高光 */
5px 5px 10px rgba(0, 0, 0, 0.2); /* 右下角阴影 */
}
/* 示例：带有高光效果的文本 */
.highlighted-text {
font-size: 2em;
color: #333;
text-shadow:
-1px -1px 2px #ffffff, /* 左上角高光 */
1px 1px 2px rgba(0, 0, 0, 0.3); /* 右下角阴影 */
}
/* 示例：内发光效果 */
.inset-glow {
width: 100px;
height: 50px;
background-color: #eee;
border-radius: 5px;
box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.8), /* 内高光 */
inset 0 0 5px rgba(0, 0, 0, 0.1); /* 辅助内阴影 */
}深入理解：box-shadow与text-shadow的核心差异及最佳实践
在我看来，理解box-shadow和text-shadow的核心差异是运用它们的前提。box-shadow顾名思义，是作用于整个盒子模型，包括元素的内边距和边框，但不包括外边距。它能创建出元素浮起、下沉或内嵌的视觉效果，非常适合按钮、卡片、模态框等块级或行内块级元素。它独有的spread-radius和inset关键字，赋予了它更强的造型能力。spread-radius能让阴影比元素本身更大或更小，而inset则彻底改变了阴影的方向，从外部投射变为内部投射。
立即学习“前端免费学习笔记（深入）”；
text-shadow则专注于文本内容。它不会影响文本的布局，仅仅在文本的视觉层面上添加效果。它的优势在于能增强文本的可读性，尤其是在背景复杂或颜色对比度不高的情况下。同时，它也是实现各种艺术字效果的利器，比如描边字、立体字、霓虹灯字等。然而，过度使用或使用不当的text-shadow反而会降低文本的可读性，这一点在设计时需要特别注意。
最佳实践：
-
box-shadow：- 模拟深度：通常使用多个阴影层，一个较深且扩散的作为底部阴影，一个较浅且模糊的作为环境光。
-
交互反馈：在
hover或active状态下改变阴影参数，提供视觉反馈。 -
Neumorphism风格：利用多个亮色和暗色阴影，配合
border-radius和背景色，实现“软UI”效果。
-
text-shadow：- 提高可读性：为浅色文本在深色背景上，或深色文本在浅色背景上添加一个轻微对比的阴影，使其更易阅读。例如，白色文本加一个1px的黑色模糊阴影。
-
艺术效果：通过多层
text-shadow叠加，可以实现复杂的描边、3D效果或发光效果。但要确保最终效果不影响信息传达。
/* Neumorphism风格的按钮示例 */
.neumorphic-button {
padding: 15px 30px;
border: none;
border-radius: 10px;
background: #e0e0e0;
color: #555;
font-size: 1.1em;
cursor: pointer;
box-shadow:
6px 6px 12px #bebebe, /* 右下角深色阴影 */
-6px -6px 12px #ffffff; /* 左上角浅色阴影 */
transition: all 0.2s ease;
}
.neumorphic-button:hover {
box-shadow:
3px 3px 6px #bebebe,
-3px -3px 6px #ffffff;
}
.neumorphic-button:active {
box-shadow:
inset 2px 2px 5px #bebebe, /* 模拟按下凹陷 */
inset -2px -2px 5px #ffffff;
}
/* 提高可读性的文本阴影 */
.readable-text {
background-color: #555;
color: #fff;
padding: 5px;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); /* 轻微阴影增加对比度 */
}模拟立体感与高光：box-shadow的进阶技巧解析
要让一个平面元素看起来有深度、有立体感，甚至有高光反射，box-shadow是我们的主要工具。这不仅仅是加一个阴影那么简单，它更像是通过光影的配合来欺骗眼睛。我发现，很多时候我们不是在画一个阴影，而是在模拟一个光源。
1. 多层阴影叠加创造深度：
最常见的立体感实现方式是叠加多个box-shadow。一个典型的设置是：
- 第一层（环境光/远处阴影）：较大的模糊半径和扩散半径，颜色较浅，透明度较低，模拟柔和的远距离环境光。
- 第二层（近处阴影）：较小的偏移和模糊半径，颜色稍深，透明度适中，模拟元素与背景之间的直接阴影。
- 第三层（高光）：使用负偏移量，浅色或白色，较小的模糊半径，模拟光源照射下的高光区域。
这种组合能够让元素看起来像是从页面上“浮”起来，并且有一个明确的光源方向。
2. inset阴影模拟凹陷与内发光：inset关键字让阴影从元素内部开始投射。结合亮色，可以模拟出按钮被“按下”的凹陷效果，或者像屏幕边缘的内部发光。例如，一个按钮在active状态时，将外部阴影替换为内部阴影，就能很好地表现出按下的感觉。
3. 高光反射的巧妙运用：
高光不一定非得是独立的一层。有时候，我们可以将高光融入到主阴影中，或者通过调整元素的背景渐变来辅助高光效果。例如，一个按钮顶部边缘使用一个非常小的、白色、无模糊的box-shadow，就能模拟出硬朗的反射光。
性能考量：
虽然box-shadow功能强大，但复杂的阴影（特别是带有大模糊半径的阴影）是GPU密集型操作。在大量元素上使用复杂阴影，或者在动画中频繁改变阴影，可能会导致性能下降，尤其是在移动设备上。为了优化性能，可以考虑：
- 限制阴影数量和复杂度：尽量使用少而精的阴影层。
-
使用
transform: translateZ(0)：有时可以强制浏览器将元素及其阴影放到GPU层进行渲染，从而提高性能（但并非万能）。 -
谨慎动画：对
box-shadow进行动画时，尽量避免动画模糊半径和扩散半径，它们的变化计算量较大。
/* 深度立体感卡片 */
.deep-card {
width: 250px;
height: 180px;
background-color: #f9f9f9;
border-radius: 12px;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.1), /* 基础阴影 */
0 8px 16px rgba(0, 0, 0, 0.15), /* 深度阴影 */
-3px -3px 8px rgba(255, 255, 255, 0.7); /* 左上角高光 */
}
/* 按钮按下时的凹陷效果 */
.pressable-button {
padding: 10px 20px;
background-color: #ddd;
border: none;
border-radius: 5px;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
transition: box-shadow 0.1s ease;
}
.pressable-button:active {
box-shadow:
inset 2px 2px 5px rgba(0, 0, 0, 0.2), /* 内部阴影 */
inset -2px -2px 5px rgba(255, 255, 255, 0.7); /* 内部高光 */
}
text-shadow的精妙运用：从可读性到艺术效果的平衡
text-shadow这东西，用好了是点睛之笔，用不好就是灾难。我见过太多文本阴影把字弄得一团糟，反而影响阅读。所以，在我看来，它的核心在于平衡：在追求视觉效果的同时，绝不能牺牲可读性。
1. 增强可读性的微妙阴影：
这是text-shadow最基础也是最重要的应用。当文本颜色与背景颜色对比度不够高，或者背景图案复杂时，一个轻微的text-shadow能让文本“浮”出来。
-
深色背景上的浅色文本：加一个细微的深色阴影，例如
text-shadow: 1px 1px 2px rgba(0,0,0,0.5); -
浅色背景上的深色文本：加一个细微的浅色阴影，例如
text-shadow: 1px 1px 2px rgba(255,255,255,0.7);关键在于blur-radius要小，offset也要小，让阴影看起来像一个微妙的轮廓，而不是一个独立的形状。
2. 艺术字效果：描边、发光与3D文本：
这才是text-shadow真正展现创意的地方。通过叠加多个阴影，我们可以模拟出各种复杂的艺术字效果。
-
文本描边 (Stroke)：通过多个无模糊、不同偏移的阴影来实现。例如，
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;这样就能在文本周围创建一圈黑色描边。 -
发光 (Glow)：一个大模糊半径、亮色的阴影。例如，
text-shadow: 0 0 10px #00f, 0 0 20px #00f;叠加两个相同颜色的阴影，第二个模糊半径更大，可以增强发光效果。 - 3D文本：通过叠加多个颜色渐变、偏移量逐渐增加的阴影，模拟文本的深度。这需要一些耐心和尝试，但效果往往令人惊艳。
3. 可访问性考量：
无论多么酷炫的text-shadow效果，都不能以牺牲可访问性为代价。
- 对比度：确保文本颜色与背景颜色，以及文本颜色与阴影颜色之间有足够的对比度。WCAG标准通常要求至少4.5:1的对比度。
-
避免过度模糊：太大的
blur-radius会让文本变得难以辨认。 - 测试：在不同的屏幕尺寸、分辨率和光照条件下测试文本的可读性。
/* 文本描边效果 */
.stroke-text {
font-size: 3em;
color: #fff; /* 文本颜色 */
text-shadow:
-2px -2px 0 #000, /* 左上 */
2px -2px 0 #000, /* 右上 */
-2px 2px 0 #000, /* 左下 */
2px 2px 0 #000, /* 右下 */
0px 0px 5px rgba(0,0,0,0.5); /* 稍微加点深度 */
}
/* 霓虹灯发光效果 */
.neon-text {
font-size: 3em;
color: #fff;
text-shadow:
0 0 7px #fff, /* 内发光 */
0 0 10px #fff,
0 0 21px #fff,
0 0 42px #0fa, /* 外部彩色光 */
0 0 82px #0fa,
0 0 92px #0fa,
0 0 102px #0fa,
0 0 151px #0fa;
}
/* 简单的3D文本效果 */
.three-d-text {
font-size: 2.5em;
color: #ccc;
text-shadow:
1px 1px #aaa,
2px 2px #999,
3px 3px #888,
4px 4px #777,
5px 5px #666; /* 逐渐加深的阴影模拟深度 */
} 
