字體美化
text-shadow
- Drop Shadow
- Glow
- Bevel
- Emboss
- Stroke
- Neon
圓角、區塊陰影
border-radius（基本圓角）
- 只設定1個值
- 設定2個值
- 設定3個值
- 設定4個值
border-radius（正圓、橢圓）
- 正圓
- 橢圓1
- 橢圓2
border-radius（以橢圓圓弧製作圓角）
- 圓角長方形
- 扭曲的圓形
- 扭曲的圓形
box-shadow
- Inset Glow
- Spread Shadow
- Multi Shadow
border-images
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
背景圖與漸層效果
background-size
- auto
- cover
- contain
linear-gradient()
- 2Colors（top → bottom）
- 3Colors（left → right）
- 3Colors（left top → right bottom）
radial-gradient()
- （circle）
- （closest-side）
- （at bottom）
repeating-linear-gradient()
- 條紋背景
repeating-radial-gradient()
- 放射狀背景
濾鏡效果
filter
| IE11 | × |
|---|
grayscale()
sepia()
contrast()
brightness()
saturate()
hue-rotate()
invert()
opacity()
blur()