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

个人简介

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

主目录

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