教程列表/Tailwind CSS 粘土风设计指南

第一章:什么是粘土风 (Claymorphism)?

学习如何通过 CSS 的 Box-shadow 组合,创造出这种看起来软软的、有弹性的 UI 风格。

视频演示:12:30

核心原理

粘土风的核心其实就是:大圆角 + 双重阴影

你需要两个阴影:一个内部阴影 (Inset Shadow) 营造凹陷或高光感,一个外部阴影 (Drop Shadow) 营造悬浮感。

01

设置背景色

不要用纯白,要用 Cream (#FDFBF7) 或极淡的 Pastel 色系。

02

添加大圆角

起步价 rounded-2xl,胆子大的直接用 rounded-full。

03

叠加阴影

使用 Tailwind 的 shadow-[...] 语法叠加多层阴影。

代码示例


<div className="
  bg-white 
  rounded-3xl 
  shadow-[0_10px_20px_rgba(0,0,0,0.05),_inset_0_-5px_10px_rgba(0,0,0,0.02)]
">
  我是粘土卡片
</div>
                  

学习进度

已完成 1 / 8 节

课程目录

📺01. 什么是粘土风?
12:30
📺02. 实战 Navbar 设计
08:45
📄03. 卡片与按钮的微交互
阅读
📺04. 移动端适配指南
15:20
📄05. 选修:深色模式适配
阅读