css clip剪裁元素.html

学无止境慢慢来

已于 2022-05-28 14:44:41 修改

阅读量344

点赞数

分类专栏： CSS 文章标签： css

于 2020-08-05 14:39:46 首次发布

CSS 专栏收录该内容

71 篇文章

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>clip剪裁元素</title>
    
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        img {
            position: absolute;
            border: 1px dashed blue;
            clip: rect(0px 100px 153px 0px)
        }

        div {
            position: absolute;
            top: 160px;
            width: 200px;
            height: 200px;
            background: rgba(0, 0, 0, 0.4);
            border: 1px dashed red;
            clip: rect(0px, 203px, 203px, 0px);
        }
    </style>

    <script>
        /*参考：https://www.w3school.com.cn/cssref/pr_pos_clip.asp
        * 知识点：
        *   1.clip 属性剪裁绝对定位的元素。
        *       "clip" 属性允许您规定一个元素的可见尺寸，这样此元素就会被修剪并显示为这个形状。
        *           显示的区域是矩形，是四个参数围成的区域。
        *           4个参数都是相对该元素自身，以左上角为原点。
        *       可能的值：
        *           shape，设置元素显示的区域。唯一合法的形状值是：rect (top, right, bottom, left)
        *           auto   默认值。不应用任何剪裁。
        *           inherit    规定应该从父元素继承 clip 属性的值。
        * */
    </script>
</head>
<body>

<img src="https://www.w3school.com.cn/i/eg_bookasp.gif" alt="img" width="120" height="151">
<div></div>

</body>
</html>