[css] 你有用过clip-path吗？说说你对它的理解和它都有哪些运用场景？

[css] 你有用过clip-path吗？说说你对它的理解和它都有哪些运用场景？

    clip-path属性可以创建一个只有元素的部分区域可以显示的剪切区域

    它的值可以为以下几种
        : 用 表示剪切元素的路径
        : 一种形状，其大小和位置由<几何盒>值定义。如果没有指定几何框，则边框将用作参考框
        : 如果同 一起声明，它将为基本形状提供相应的参考框盒。通过自定义，它将利用确定的盒子边缘包括任何形状边角（比如说，被 border-radius 定义的剪切路径）
        none: 不创建的剪切路径

    demo

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .demo {
        margin: 15px auto;
        width: 400px;
        height: 400px;
        background: #000000;
    }

    .clip {
        /* clip-path: url(#cross); */
        /* clip-path: circle(40%); */
        clip-path: view-box;
    }
</style>
<div class="demo clip"></div>
<svg height="0" width="0">
    <defs>
        <clipPath id="cross">
            <rect y="110" x="137" width="90" height="90" />
            <rect x="0" y="110" width="90" height="90" />
            <rect x="137" y="0" width="90" height="90" />
            <rect x="0" y="0" width="90" height="90" />
        </clipPath>
    </defs>
</svg>

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题