如何在 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中文网其他相关文章！