效果屬性動畫
1.box-shadow(盒子陰影)spa
示例3d
加上 box-shadoworm
內陰影blog
複雜例子ip
陰影的形狀跟原來的形狀是同樣的form
結果:容器
box-shadow 做用:1.營造層次感(立體感)2.充當沒有寬度的邊框(沒有大小,不會佔據位置)3.特殊效果cli
2.text-shadow(文本陰影)transform
做用:1.立體感 2.印刷品質感(邊緣有模糊效果)
比較:
3.border-radius
圓角矩形
圓形
半圓/扇形
只有左上角,其他均爲 0,若刪掉 border 屬性,則爲扇形
橢圓
10px 和 20px 分別爲 x軸 和 Y軸 的半徑,設置橢圓
4.background
多背景疊加、漸變製做圖案和紋理
雪碧圖動畫
鼠標放到上面會上下進行切換
背景圖尺寸適應
背景覆蓋整個容器(cover),同時整個長寬比不會變,超出部分會隱藏
5.clip-path(按路徑進行裁剪)
對容器進行裁剪
圓形裁剪
常見的幾何圖形進行裁剪
支持動畫
自定義路徑裁剪
6.3D 變換
變換 transform
位移/縮放/斜切/旋轉
3D 變換
效果: