轮廓与盒阴影
使用 outline 和 box-shadow 为元素添加焦点轮廓和阴影效果。
轮廓与盒阴影 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。
outline 属性
outline 会在边框外部绘制线条。它不会影响布局——周围的元素不会因此移动。其简写格式与 border 类似：宽度、样式、颜色。
<button class="focus-demo">Focused Button</button>
outline-offset
outline-offset 会将轮廓线从边框边缘移开。正值会将其向外推，负值会将其向内移（产生裁剪效果）。
<button class="focus-demo">Keyboard-focused Button</button>
outline 与 border
主要区别：
- 轮廓线不会影响布局流
- 轮廓线不能按边分别设置（没有 outline-top）
- 轮廓线可以不是矩形（在某些浏览器中会跟随焦点环的形状）
- 轮廓线始终位于边框外部
:focus-visible 与 :focus
对于键盘焦点环，建议使用 :focus-visible。只有在焦点通过键盘获得时，它才会显示轮廓线；鼠标点击获得焦点时不会显示。这样既能避免给指针用户造成视觉干扰，又能保留可访问性。
<button class="focus-demo">Keyboard focus vs mouse click</button>
box-shadow 基础
box-shadow 会在元素周围添加阴影效果。其简写格式为：水平偏移、垂直偏移、模糊半径、扩展半径、颜色。
<div class="card">Card with soft shadow</div>
box-shadow 值详解
box-shadow 中的各个值：
- offset-x：水平偏移（负值 = 向左）
- offset-y：垂直偏移（负值 = 向上）
- blur-radius：柔和程度（0 = 清晰）
- spread-radius：增大或缩小阴影尺寸
- color：阴影颜色（建议使用 RGBA）
<div class="raised">Raised</div>
<div class="deep">Deep</div>
inset 阴影
添加 inset 关键字可以在元素内部绘制阴影，形成按下或凹陷的外观。
<input class="input focus-demo" type="text" value="Focused input" />
多个盒阴影
使用逗号分隔多个阴影。它们会按照从前到后的顺序叠加：
<span class="badge">3</span>
box-shadow 与 filter: drop-shadow
box-shadow 只遵循盒子的形状。filter: drop-shadow() 会遵循包括透明区域在内的渲染形状，非常适合带透明背景的 PNG 图标。
<div class="icon">★</div>
使用 box-shadow 构建层级系统
Material Design 及类似系统会为视觉层级定义多个阴影级别。将 CSS 变量映射到阴影值：
<div class="elevation-sm">sm</div>
<div class="elevation-md">md</div>
<div class="elevation-lg">lg</div>
高效地为 box-shadow 添加动画
为 box-shadow 添加动画会在每一帧触发重绘。为了提高性能，可以为伪元素阴影的 opacity 添加动画，或使用能够进行合成的 filter: drop-shadow()。
快速检查
哪个 box-shadow 关键字会在元素内部绘制阴影？
回顾
outline 会在边框外部绘制线条且不影响布局，可用于焦点指示器。box-shadow 通过偏移、模糊、扩展和颜色添加具有深度感的阴影。使用 inset 创建内部阴影。可以使用逗号叠加多个阴影。
常见问题解答
「轮廓与盒阴影」课时是免费的吗？
是的 — 「轮廓与盒阴影」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。
「轮廓与盒阴影」这节课中我会学到什么？
使用 outline 和 box-shadow 为元素添加焦点轮廓和阴影效果。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。
「轮廓与盒阴影」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 CSS Academy 课中编写并运行代码吗？
能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。