CSS效果小結

效果屬性

1.box-shadow（盒子陰影）

示例

加上 box-shadow

內陰影

複雜例子

陰影的形狀跟原來的形狀是同樣的

 

結果：

box-shadow 做用：1.營造層次感（立體感）2.充當沒有寬度的邊框（沒有大小，不會佔據位置）3.特殊效果

 

2.text-shadow（文本陰影）

做用：1.立體感  2.印刷品質感（邊緣有模糊效果）

比較：

3.border-radius

圓角矩形

圓形

半圓/扇形

只有左上角，其他均爲 0，若刪掉 border 屬性，則爲扇形

橢圓

10px 和 20px 分別爲 x軸 和 Y軸 的半徑，設置橢圓

4.background

 多背景疊加、漸變製做圖案和紋理

雪碧圖動畫

鼠標放到上面會上下進行切換

背景圖尺寸適應

背景覆蓋整個容器（cover），同時整個長寬比不會變，超出部分會隱藏

5.clip-path(按路徑進行裁剪）

對容器進行裁剪

圓形裁剪

常見的幾何圖形進行裁剪

支持動畫

自定義路徑裁剪

6.3D 變換

 變換 transform

 

位移/縮放/斜切/旋轉

3D 變換

 效果：