如何仅使用 CSS 在矩形中创建圆形切口？

使用 CSS 从矩形创建圆形切口

提出的问题寻求一种在矩形内实现圆形切口的替代方法。最初的解决方案使用元素和边框的组合，效果令人满意，但缺乏干净的标记，并且在某些浏览器中遇到错误。

替代方法

更多优雅的解决方案涉及利用单个元素（以及伪元素）并采用径向渐变背景。这是修改后的 CSS：

div:before {
  position: absolute;
  content: '';
  width: 90px;
  height: 90px;
  top: -75px;
  left: calc(50% - 45px);
  background-color: red;
  border-radius: 50%;
}
div {
  position: relative;
  margin: 100px auto 0 auto;
  width: 90%;
  height: 150px;
  border-radius: 6px;
  
  background: radial-gradient(50px 50px at 50% -30px, rgba(0, 0, 0, 0) 49.5px, rgba(0, 0, 0, .8) 50.5px);
}

说明

• 伪元素 (:before) 创建一个尺寸为 90px 的圆形红色切口并将其定位在父元素内部。
• 父元素有一个透明的径向渐变，填充剩余区域，创建具有切口的矩形形状。
• 透明渐变的半径略大于切口的半径，从而在边缘周围留有薄薄的透明间隙。
• 圆的中心和透明间隙是通过径向渐变中心点的位置来控制的。

此更新的方法解决了干净标记问题和初始版本中遇到的浏览器错误 解决方案。它仅使用 CSS 从矩形形状提供无缝且视觉上令人愉悦的圆形切口。

以上是如何仅使用 CSS 在矩形中创建圆形切口？的详细内容。更多信息请关注PHP中文网其他相关文章！