理解 text-shadow 和 box-shadow 属性的基本语法及其参数含义
学会控制阴影的偏移量、模糊半径、扩散半径及颜色
掌握利用阴影创建立体按钮、悬浮卡片及艺术字效果的方法
能够通过 JavaScript 动态修改阴影属性，实现交互反馈
理解阴影在提升用户界面（UI）层次感和视觉吸引力中的作用
在现代网页设计中，扁平化设计虽然流行，但适当的阴影效果能为界面增加“深度”和“层次感”，引导用户的视觉焦点。CSS 提供了两个强大的属性来实现这一目标：
text-shadow：用于给文本添加阴影，常用于标题或强调文字。
box-shadow：用于给元素盒子（如 div、图片、按钮）添加阴影，是构建卡片式布局和悬浮效果的关键。
这些属性无需使用图片，完全由代码生成，性能好且易于维护。
text-shadow 属性允许开发者为文字添加一个或多个阴影层，从而产生立体感、发光效果或复古风格。
基本语法：
text-shadow: offsetX offsetY blurRadius color;参数详解：
offsetX（水平偏移）：阴影相对于文本的水平距离。正值向右，负值向左。
offsetY（垂直偏移）：阴影相对于文本的垂直距离。正值向下，负值向上。
blurRadius（模糊半径）：可选参数。定义阴影的模糊程度。值越大，阴影越柔和、扩散范围越广；值为 0 时，阴影边缘清晰。
color（颜色）：阴影的颜色。可以是任何有效的 CSS 颜色值（如 red, #333, rgba(0,0,0,0.5)）。
示例代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Text Shadow 示例</title>
<style>
.shadow-text {
color: #2e7d32; /* 深绿色文字 */
font-size: 48px;
font-weight: bold;
/* 水平右移 3px, 垂直下移 3px, 模糊 3px, 浅绿色阴影 */
text-shadow: 3px 3px 3px #90ee90;
}
.glow-text {
color: #fff;
background-color: #333;
padding: 20px;
font-size: 32px;
/* 模拟发光效果：无偏移，大模糊半径 */
text-shadow: 0 0 10px #fff, 0 0 20px #ff00de, 0 0 30px #ff00de;
}
</style>
</head>
<body>
<h1 class="shadow-text">技术社区：计算机科学的门户</h1>
<br><br>
<div class="glow-text">霓虹灯发光效果</div>
</body>
</html>
效果说明：
.shadow-text 展示了经典的立体阴影，文字看起来像是浮在背景之上。
.glow-text 展示了多重阴影叠加产生的霓虹灯发光效果，通过设置多个 text-shadow 值（用逗号分隔）实现。
box-shadow 属性用于给任何块级元素（如 div、img、button）添加阴影。它比 text-shadow 多了一个参数，用于控制阴影的扩散范围。
基本语法：
box-shadow: offsetX offsetY blurRadius spreadRadius color;参数详解：
offsetX & offsetY：同文本阴影，控制阴影位置。
blurRadius：模糊半径。值越大，阴影边缘越模糊。
spreadRadius（扩散半径）：特有参数。正值会让阴影向四周扩大，负值会让阴影收缩。默认为 0。
color：阴影颜色。推荐使用带透明度的 rgba 颜色，使阴影更自然。
进阶用法：
内阴影：在颜色前添加 inset 关键字，阴影将出现在元素内部，产生凹陷效果。
多重阴影：同样支持逗号分隔的多个阴影值，可创建复杂的光影效果。
示例代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Box Shadow 示例</title>
<style>
#card {
width: 220px;
height: 80px;
background-color: #2e7d32; /* 深绿色背景 */
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: bold;
margin-top: 20px;
transition: box-shadow 0.3s ease; /* 添加过渡动画 */
cursor: pointer;
}
/* 鼠标悬停时的阴影效果（纯 CSS 实现） */
#card:hover {
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.4);
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<h2>盒子阴影演示</h2>
<button onclick="addShadow()">点击添加阴影 (JS)</button>
<div id="card">
技术社区
</div>
<script>
// 使用 JavaScript 动态添加阴影
function addShadow() {
const card = document.getElementById("card");
// 设置：右偏 5px, 下偏 5px, 模糊 5px, 扩散 0, 灰色
card.style.boxShadow = "5px 5px 5px 0px gray";
}
</script>
</body>
</html>
效果说明：
初始状态下，绿色卡片没有阴影。
点击按钮后，JavaScript 会为卡片添加一个明显的右下方向阴影。
此外，代码中还添加了 :hover 伪类，当鼠标悬停在卡片上时，会通过 CSS 自动显示柔和的阴影，这是现代 UI 设计中常见的交互反馈。
为了更清晰地理解两个属性的区别，以下是参数对比：
设计建议：
避免过度使用：过重的阴影会让页面显得脏乱。通常使用低透明度（如 rgba(0,0,0,0.1) 到 0.3）的黑色阴影最为自然。
注意性能：虽然 CSS 阴影性能较好，但在大量元素上同时使用高模糊半径（blur-radius 很大）的阴影可能会影响渲染性能，特别是在移动端。
一致性：保持全站阴影的光源方向一致（例如所有阴影都偏向右下方），以维持视觉逻辑的统一。
CSS 阴影属性是提升网页视觉品质的低成本高回报工具。
text-shadow：专注于文字装饰，通过偏移和模糊创造立体字或发光字。
box-shadow：专注于布局层次，通过偏移、模糊和扩散创造悬浮卡片、按钮状态及内凹效果。
核心参数：记住 X 偏移、Y 偏移、模糊、扩散（仅盒子）、颜色 的顺序。
交互性：结合 :hover 或 JavaScript 动态改变阴影，可以极大地增强用户的操作反馈感。
如果你想制作一个看起来“凹陷”进去的输入框（input），应该如何使用 box-shadow 属性？需要用到哪个关键字？
text-shadow 的模糊半径（blur radius）设置为 0 和设置为 10px 时，视觉效果有什么本质区别？分别在什么场景下使用？
在使用 box-shadow 时，为什么通常建议使用 rgba 颜色而不是纯色（如 black）？这对设计的细腻度有什么影响？