CSS 渐变：炫彩 Hero 区域

✏️ Editable

Loading...

Live Preview

⌘+Enter Run⌘+R Reset

Current StepStep 1/4

Unlocked Steps1/4

Next Suggestion

Complete current Step 1 first

1) Current Task & Steps

Current task: Step 1 - 创建基础线性渐变
使用 linear-gradient 为 Hero 区域添加从蓝色到紫色的渐变背景。

Write your code in `script.js` for the current Step.
Click "Run Validation" to check if rules pass.
Once current Step passes, the next step unlocks automatically.
You need to pass Step 1 first to unlock Step 2.

Step Deliverables (Check these)

Write the minimum runnable version first, then iterate based on validation hints.

2) Beginner Explanation (Current Step)

Step task: 使用 linear-gradient 为 Hero 区域添加从蓝色到紫色的渐变背景。

3) Starter Template (Type along)

// Write the minimum runnable version first, then complete the logic

4) Rule Validation & Hints

📋 当前任务 - Step 1

添加渐变背景
设置最小高度

💡 步骤提示

🔐 学习提示

📖 快速参考

使用多个背景可以叠加渐变效果：

background:
  radial-gradient(circle at 20% 30%, rgba(255,255,255,0.2), transparent 40%),
  linear-gradient(135deg, #667eea, #764ba2);

注意：先写的在上层，后写的在下层。

About This Exercise

在这个实验中，你将学习 CSS 渐变，这是创建现代化背景效果的必备技能。

渐变可以让你的设计更加生动有趣，从简单的双色过渡到复杂的多色效果都能轻松实现。

你将学到：

使用 linear-gradient 创建线性渐变
控制渐变的方向和角度
使用 radial-gradient 创建径向渐变
创建多色渐变和重叠效果

Beginner⏱ 15-20 min

Learning Objectives

掌握 linear-gradient 语法
学会控制渐变方向
理解 radial-gradient 的用法
创建复杂的多层渐变效果

Scenario

你正在为一个科技公司设计着陆页的 Hero 区域。设计要求： - 使用渐变背景让页面更有视觉冲击力 - 渐变需要从左上角到右下角 - 添加微妙的光晕效果增强氛围 - 确保文字在渐变背景上清晰可读

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

All rules for the current step passDesktop and mobile views both look correctStyle naming is clear and structure is maintainable

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?

Structure and semanticsLayout and responsivenessNaming and reusability