[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>
個人簡介
我是歌謠，歡迎和大家一起交流前后端知識，放棄很容易，
但堅持一定很酷，歡迎大家一起討論
主目錄
與歌謠一起通關前端面試題
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/259754.html
標籤：其他
上一篇：什么是Critique會議？
下一篇：小白的Node-Red學習系列