css3中clip属性
?
clip 屬性用來設置元素的形狀。用來剪裁絕對定位元素。
當一幅圖像的尺寸大于包含它的元素時，"clip" 屬性允許規定一個元素的可見尺寸，這樣此元素就會被修剪并顯示在這個元素中。
用這個屬性需要注意以下三點：
1.clip屬性只能用于絕對定位元素，position:absolute或fixed。
2.clip屬性有三種取值：auto ?默認的
?inherit繼承父級的
一個定義好的形狀，但現在只能是方形的?rect()
clip: { shape | auto | inherit } ;
3.shape ? rect(<top>, <right>, <bottom>, <left>)中的四個元素不可省略。
下面看下clip屬性的rect()函數
clip: rect(<top>, <right>, <bottom>, <left>);
具體四個數值表示什么呢？看兩張圖即可理解。
簡單的理解就是：圖片飛高就是bottom-top,寬就是right-left.當然圖片不會是負數。
clip屬性對于多數瀏覽器都可以用，寫法會有點不同
.my-element {
????position: absolute; ????clip: rect(10px? 350px? 170px? 0); /* IE4 to IE7 */ ????clip: rect(10px, 350px, 170px, 0); /* IE8+ & other browsers */ }下面寫一實例
<!doctype html> <html><head><meta http-equiv="Content-type" content="text/html charset=utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" /><title>clip</title><style type="text/css"> img {position:absolute;top:0;left:10px; clip: rect(52px, 280px, 290px, 95px);} </style> </head><body><img src="00.jpg"/></body> </html>原圖和頁面顯示圖片如下
（原圖）
（頁面顯示）
?
參考資料：http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/
轉載于:https://www.cnblogs.com/MissBean/p/4094658.html
總結
以上是生活随笔為你收集整理的css3中clip属性的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 前端基础-html-链接标签的介绍
- 下一篇： 纯js实现分页