如何在 CSS 中建立倒圓角？

使用CSS 實作倒圓角

在CSS 中，您可以使用邊框將元素的左上角定義為圓角- radius- topleft 屬性。但是，如果您想反轉這個角，創建反轉效果怎麼辦？

傳統上，反轉圓角對於標準 CSS 來說是不可行的。然而，現代瀏覽器引入了具有 mask-image 屬性的解決方案。

解決方案：

要反轉圓角，請使用 mask-image 定義徑向漸變，建立一個圓形切口。

#aux-container {
  width: 100px;
  height: 100px;
  background: #f00;
  -webkit-mask-image: radial-gradient(circle 10px at 0 0, transparent 0, transparent 20px, black 21px);
}

在此範例中，具有紅色背景的容器被徑向漸變遮蓋，該漸變創建了左上角有 10 像素的圓形切口。透明區域逐漸過渡為黑色，覆蓋剩餘的角。

透過使用遮罩圖像，您可以有效地反轉圓角，為您的設計帶來獨特且視覺上吸引人的觸感。

以上是如何在 CSS 中建立倒圓角？的詳細內容。更多資訊請關注PHP中文網其他相關文章！