clip:rect()

写进度条的时候用过这个方法，记录一下

它的用法是

.test{
    clip: rect(<top>, <right>, <bottom>, <>left);
}

方向是按顺时针走的。

 

具体这四个值代表什么意思，看下面这几张图就明白了。

 

 

Demo

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
        <title>Clip</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .wrapper{
                width: 100%;
                position: relative;
            }
            .woodman {
                position: absolute;
                top: 0;
                right: 0;
                clip: rect(52px, 280px, 290px, 95px);
            } 
        </style> 
    </head>
    <body>
        <div class="wrapper">
            <img src="woodman.jpg"/>
            <img src="woodman.jpg" class="woodman"/>
        </div>
    </body>
</html>

结果如下

 

 

posted @ 2016-06-16 12:55  zcynine  阅读(523)  评论(0)  编辑  收藏  举报