clip:rect()

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

它的用法是

.test{

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

}

方向是按顺时针走的。

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

clip:rect()

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>

结果如下

clip:rect()

相关文章