CSS效果小結

效果屬性動畫

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 變換

 效果:

相關文章
相關標籤/搜索