使用CSS面膜和夾子式屬性砍伐拐角的技巧

本文使用CSS mask和clip-path屬性探討了創意的角落切割技術。我們將在先前使用CSS面罩的工作基礎上進行建立，以使用可重複使用的代碼和可調節變量來創建各種角色形狀。在線CSS發電機被引用可視化結果。

檢查了兩種主要切割類型：圓形和角度。每個都允許完整形狀或僅邊框輸出，並選擇轉角選擇。

CSS mask屬性大量使用。如果不熟悉，建議在繼續之前進行快速底漆。

圓形切口

圓形切割採用radial-gradient() 。最初使用四個梯度，一個每個角度。每個梯度覆蓋了元素尺寸的四分之一。樣品梯度：

 <code>radial-gradient(circle 30px at top left, #0000 98%, red) top left;</code>

這會在左上角創建一個30px半徑圓圈，中心透明（＃0000），在其他地方紅色。較小的調整（例如98％而不是100％）可防止鋸齒狀邊緣。

優化代碼使用自定義屬性：

 <code>--g: #0000 98%,#000; --r: 30px; mask: radial-gradient(var(--r) at 0 0 ,var(--g)) 0 0, radial-gradient(var(--r) at 100% 0 ,var(--g)) 100% 0, radial-gradient(var(--r) at 0 100%,var(--g)) 0 100%, radial-gradient(var(--r) at 100% 100%,var(--g)) 100% 100%; mask-size: 51% 51%; mask-repeat: no-repeat;</code>

發電機使用略有不同，更簡潔的語法。

梯度較少？

是的！一個梯度就足夠了。訣竅涉及一個單一的全尺寸radial-gradient() ，其位置調整了以產生四個切角的幻覺。此方法需要了解元素的尺寸。提出了使用百分比和稍小的梯度大小（99.5％）的解決方法，但具有小數尺寸的局限性。最終的優質單級方法使用負偏移來實現相同的效果而無需舍入問題。

通過去除相關梯度並調整剩餘梯度大小來實現角落殘疾。

僅圓形邊界的切口

創建僅邊框形狀需要偽元素以避免掩蓋內容。不同的配置（一個，兩個，三個或四個切割的角）需要不同的組合radial-gradient()和conic-gradient()才能達到所需的邊界效應。本文詳細介紹了這些組合，強調了使用repeat-y來減少某些情況下所需的梯度數量。

傾斜的切口

傾斜的切割利用conic-gradient() ，每個角落。調整每個梯度的from和at ，以創建傾斜的切割。禁用角落遵循與圓形切割相同的原理。 clip-path提供了替代方案，可以用三個點定義每個角落。提供了計算這些點的公式。 90度角情況可以使用單個梯度進行優化。

純邊界的切口

由於復雜性和與梯度的潛在抗降解問題， clip-path方法相比，優於純傾角切割的梯度。該文章概述了clip-path方法，詳細介紹了內部和外部點的計算。 180度的情況允許代碼優化。

結論

該文章展示了CSS mask和clip-path對創建複雜形狀的功能和靈活性。儘管提供了詳細的說明，但隨附的在線生成器簡化了代碼的生成，使這些技術可滿足各種設計需求。

以上是使用CSS面膜和夾子式屬性砍伐拐角的技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！