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