clip:rect()

最新推荐文章于 2022-10-12 11:02:29 发布

aizhanqian5077

最新推荐文章于 2022-10-12 11:02:29 发布

阅读量171

点赞数

原文链接：http://www.cnblogs.com/zcynine/p/5590648.html

版权

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

它的用法是

.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>

结果如下

转载于:https://www.cnblogs.com/zcynine/p/5590648.html

优惠劵

aizhanqian5077

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
clip:rect()

写进度条的时候用过这个方法，记录一下它的用法是.test{ clip: rect(<top>, <right>, <bottom>, <>left);}方向是按顺时针走的。具体这四个值代表什么意思，看下面这几张图就明白了。Demo<!doctype html&...
复制链接

扫一扫