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

使用 CSS 在矩形上切一个圆形孔

在追求特定的视觉效果时，许多开发人员会遇到标记和兼容性问题的挑战，特别是在尝试时使用 CSS 在矩形内创建圆形切口。

为了解决这些问题并增强对 CSS 技术的理解，让我们探索一个替代方法来达到预期的结果。通过在父元素上使用径向渐变背景和圆形切口的伪元素，我们可以简化标记并消除 IE 10/11 中的 1px 间隙问题。

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 表示的元素定义了红色圆形切口。它在父 div 内绝对定位并水平居中，反映了我们想要实现的圆孔。背景颜色和边框半径属性设置其视觉外观。

父 div 相对定位以包含切口并提供矩形背景。边框半径将其角变圆，在切口和矩形之间创建平滑过渡。

父 div 上的径向渐变背景对于实现透明间隙和填充效果至关重要。径向渐变从圆的中心点（50px 50px at 50% -30px）开始向外扩展，创建从透明到半透明黑色的柔和过渡。通过仔细调整渐变的半径，我们创建了切入矩形的圆孔的错觉。

与使用多个元素相比，这种方法提供了更简单的标记，并消除了 IE 10/ 中遇到的 1px 间隙问题11.它仅依靠 CSS 属性来实现所需的视觉效果，增强了可维护性和跨浏览器兼容性。

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