CSS沒有邊界的裁剪路徑實例分析

今天小編給大家分享一下CSS沒有邊界的裁剪路徑實例分析的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

　　在深入研究之前，我們應該先看看基本的形狀和clip-path。裁剪路徑可以將CSS Shapes如circle()、ellipse(), inset()或自由變化的polygon()應用于任何元素。元素中不在形狀邊界內的任何內容都將被裁剪刪除掉。

　　使用多邊形函數，我們可以創建三角形、星形或其他形狀，雖然在可以使用px等固定單位，但百分比將提供更大的靈活性并自適應于元素的尺寸。

　　所以對于一個八邊形，我們可以設置八組x，y點坐標來定義。在這種情況下，對于第一個x，我們從盒子寬度的30%開始，對于y，我們從盒子的頂部開始，然后順時針設置各個點。可見區域就是通過將這些點用直線連接而形成的形狀。

　　clip-path: polygon(

　　30% 0%,

　　70% 0%,

　　100% 30%,

　　100% 70%,

　　70% 100%,

　　30% 100%,

　　0% 70%,

　　0% 30%

　　);

　　看不見的頂點

　　上面實現一個八邊形，我們設置了八個點的坐標。但是，我們可以跳出元素框的限制去思考，也就是說要跳出0% - 100%的這個范圍。

　　元素的盒邊框是裁剪后內容的顯示邊界，但我們仍然可以為元素定義超出盒邊框的點。

　　通過定義超過0%-100%范圍的點，我們可以把一個有三個點的多邊形變成四邊形、五邊形或六邊形。在這個例子中，都是定義clip-path: polygon()函數的三個點，但是由于超出了元素框的邊界，我們可以看到一個三角形和兩個五邊形。

　　于是，上面的八邊形只用四個點就可以實現。

　　一條裁剪路徑，多個形狀

　　我們可以利用超出元素邊界的這種能力用一個polygon()創建多個裁剪形狀。

　　根據元素的位置，我們可以直接制作出每個形狀，但是因為我們知道裁剪坐標點可以在元素框之外的空間中移動，所以可以繪制額外的線來幫助我們找到下一個點的位置。

　　它還可以幫助我們分割元素。結合CSS自定義屬性，我們可以處理重疊的元素，并將每個元素裁剪成交替的條帶。下面的例子是兩個重疊的圓角矩形，每個被分成不規則的矩形動畫。

　　不同的填充規則不同的形狀

　　polygon()函數不僅僅是一組坐標點的集合，它還有另外的一個參數 — [填充規則] ，我們一直使用的默認值是nonzero，它還有另外一個值是evenodd，這兩個值它們確定形狀的內部和外部的規則是不同的。

　　當使用evenodd規則時，我們可以通過從任意的點繪制光線來確定點是在邊界內還是在邊界外。如果光線穿過裁剪路徑線的和為偶數，則該點被視為外部，如果光線穿過裁剪路徑線的和為奇數，則該點位于內部。

　　順序

　　要注意的是，有許多CSS屬性例如CSS Filters, Blend Modes等都會影響元素的外觀。而這些效果會按下面的順序應用到元素上：

　　CSS Filters (例如 filter: blur(2px))

　　Clipping (本文所講的)

　　Masking (類似與裁剪)

　　Blend Modes (例如 mix-blend-mode: multiply)

　　Opacity

　　如果我們需要一個模糊的星星形狀，模糊效果會發生在裁剪之前。由于模糊效果會參照元素的邊框，但是我們將元素邊框裁剪掉了，于是前一個星星的模糊效果會丟失。

　　如果我們想模糊星星，可以選擇將剪裁后的元素包裹在模糊的父元素中。內部元素將首先呈現其星星的形狀，然后父元素將正常模糊其內容。

　　通過動畫來顯示內容

　　CSS Shapes是可以添加動畫效果的，它允許我們在不影響元素內容的情況下改變元素的可視區域。例如，我們可以從內容隱藏（完全裁剪）開始，并增大裁剪路徑以顯示其中的內容。要注意的是，clip-path: polygon()動畫形的一個重要條件是每個關鍵幀的坐標點數以及填充規則都必須相同。否則，瀏覽器將沒有足夠的信息來插入中間值。

以上就是“CSS沒有邊界的裁剪路徑實例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。