专题 C4：CSS 与设计
现代 CSS 视觉效果：玻璃拟态、渐变等
视觉效果的目标不是装饰越多越好，而是在可读性、性能和品牌表达之间找到稳定边界。
玻璃拟态和渐变要有阅读纪律
半透明面板和 backdrop blur 可以把浮层从复杂背景里分离出来，但如果叠太多层，会直接损伤可读性。
渐变也应该被当成设计 token 管理，用在 hero、描边和重点状态，而不是页面上随处飘。
每个效果都要有性能边界
- 大面积背景降低饱和度，小范围强调再提高对比。
- 模糊、阴影和动画渐变要在受限设备上做实际 profile。
- 为复杂效果准备纯色或更轻量的回退样式。
实用输入/输出示例
输入
Hero 面板叠在噪点背景图上 需求：标题和 CTA 必须清晰可读
输出
panel: rgba(15,23,42,0.45) backdrop-blur: 10px border: 1px rgba(255,255,255,0.18)