- **box-shadow**：[投影](https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-shadow)
- 营造层次感（立体感）
- 充当没有宽度的边框
- 特殊效果（如：画一只机器猫）
- **text-shadow**：[投影-文字](https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-shadow)
- 立体感
- 印刷品质感
- **border-radius**： [边框圆角](https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-radius)
- 圆角矩形
- 圆形
- 半圆 / 扇形
- 一些奇怪的角角
- **background**：[背景](https://developer.mozilla.org/zh-CN/docs/Web/CSS/background)
- 纹理、图案
- 渐变
- 雪碧图动画
- 背景图尺寸适应
- **clip-path**：[裁剪](https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path)
- 对容器进行裁剪（可配合 svg 进行裁剪）
- 动画
- 常见的几何图形
- 自定义路径
- **transform**：[变换](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform)
- perspective: 500px; // 设置 z 坐标轴的高度
- transform-style: preserve-3d; // 3D 变换
- translate 位移
- scale 缩放
- rotate 翻转
- skew 倾斜
