CSS 滤镜效果
✏️ Editable
Loading...
Live Preview
⌘+Enter Run⌘+R Reset
About This Exercise
CSS filter 属性可以让你不使用图片编辑软件就能实现各种视觉效果。
通过本 Lab，你将学会：
- blur() 模糊效果
- grayscale() 灰度效果
- brightness() 和 contrast() 调节
- 组合多个滤镜
Beginner⏱ 15-20 min
Learning Objectives
- 掌握 blur() 模糊滤镜
- 掌握 grayscale() 灰度滤镜
- 掌握 brightness() 亮度调节
- 掌握 contrast() 对比度调节
- 学会组合多个滤镜效果
Scenario
你正在为一个图片画廊添加悬停效果，使用 CSS filter 来创建各种视觉效果。
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
CSSFilter视觉效果图片处理