logo

CSS 阴影：光影效果

✏️ Editable
Loading...
Live Preview
⌘+Enter Run⌘+R Reset

About This Exercise

在这个实验中，你将学习 CSS 阴影效果，为元素添加深度和立体感。

阴影是现代 UI 设计中最常用的视觉效果之一。

你将学到：

  • 使用 box-shadow 创建盒子阴影
  • 使用 text-shadow 创建文字阴影
  • 创建多层阴影效果
  • 使用 inset 创建内阴影
Beginner⏱ 20-25 min

Learning Objectives

  • 掌握 box-shadow 语法
  • 理解阴影参数的作用
  • 学会创建多层阴影
  • 了解阴影在 UI 中的应用

Scenario

你正在为一个 SaaS 产品设计卡片组件。 需要使用阴影实现： - 卡片的悬浮效果 - 按钮的立体感 - 文字的发光效果

Why Do This

  • CSS is fundamentally about constraining layout and visual hierarchy, not memorizing properties.
  • Clarify the box model and layout rules first, then add visual polish — less rework that way.
  • Writing styles as reusable patterns is more valuable than tweaking a single page.

Hands-on Practice

  • Write the layout skeleton first (display/gap/align), then add colors and shadows.
  • Extract repeated styles into reusable classes.
  • Use validation rules to reverse-engineer the design intent of your current styles.

Common Mistakes

  • Adding margin after margin to fix positioning while ignoring layout containers.
  • Selectors nested too deep, causing style coupling.
  • Only caring about how it looks without considering maintainability.

Deliverable

A reusable component style template (layout rules + visual rules + naming conventions).

My Progress

Completed Steps0 / 4
Total Attempts0
Best Score0%

Completion Criteria (Checkable)

Confirm before completing this Lab

Reflection Questions (Recommended)

What was your main layout decision? Why did you choose it?

What change did you make specifically for maintainability?

What would you prioritize improving next time?

Tags

CSS3ShadowsEffectsDesign