clip:rect()

時間 2019-12-13

標籤 clip rect 简体版

原文原文鏈接

寫進度條的時候用過這個方法，記錄一下css

它的用法是html

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

方向是按順時針走的。app

具體這四個值表明什麼意思，看下面這幾張圖就明白了。spa

Demoscala

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

結果以下code

相關標籤/搜索

cliprect