理解css中的clip屬性

格式以下: css

div {
 position: absolute;
 clip: rect(0, 50px, auto, 0);
}
這裏是詳解:

http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/ html

注意點:
1. 奇皅的rect參數,注意它的right和bottom定義有點反人類。
2. 必須給元素設置position爲absolute和fixed.
3. rect參數只接受數值,不接受百分比(反響應式設計),可是接受一個特別的叫auto的參數,表示100% ui

The rect() function

Now, let’s finally dig into the rect() syntax. It requires four length values, separated by commas: top, right, bottom and left. As for padding or margin shorthands, it’s clockwise. spa

clip: rect(<top>, <right>, <bottom>, <left>);

Now pay attention because it can be tricky. Both the top and the bottom values define the offset from the top border and the left and right values define the offset from the left border. .net

schema-clip

最後 。。MD,,要求position必須是absolute, 而設置成absolute之後,該元素就從正常的文檔流中拿走了。。切記。 設計

相關文章
相關標籤/搜索