CSS3 Clip:
.clip{ position: relative; height: 100px; width: 200px; overflow: hidden; border: 1px solid #ccc; clip: rect(20px,150px,80px,50px); }
CSS3 Clip是CSS3中的一種屬性,可以用來裁剪元素的展示區域。
該屬性值是一個矩形,分別代表top,right,bottom,left四個方向的值。如果該元素的position值為absolute或fixed,則以該元素的左上角為坐標原點,如果position值為relative,則以該元素的父級元素為參照。
通過clip屬性,我們可以實現某些效果,例如:
- 裁剪圖片的展示區域,可以實現圖片的局部展示效果
- 裁剪文本的展示區域,可以實現文字塊的展示效果
- 裁剪動畫或視頻的展示區域,可以實現特效效果
需要注意的是,clip屬性已經被廢棄,取而代之的是clip-path屬性,可以使用SVG path語法來實現更多的裁剪效果。
下一篇css2333_