- **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 倾斜