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

個人簡介

我是歌謠，歡迎和大家一起交流前后端知識。放棄很容易，
但堅持一定很酷。歡迎大家一起討論

主目錄

與歌謠一起通關前端面試題

總結

以上是生活随笔為你收集整理的[css] 你有用过clip-path吗？说说你对它的理解和它都有哪些运用场景？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。