如何仅使用 CSS 从矩形中切出圆形？

在 CSS 中从矩形剪出圆形

创建此效果的一种方法是使用元素组合和巧妙的使用边界半径。然而，这种技术存在潜在的缺点，例如不规则的标记和某些浏览器中难看的间隙。

替代方法

幸运的是，有一种替代方法采用单个元素和伪元素。这种方法利用了父元素的径向渐变背景的力量，而伪元素充当透明圆形切口。

考虑以下代码片段：

div:before {
  /* creates the red circle */
  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;  
  
  /* only the below creates the transparent gap and the fill */
  background: radial-gradient(50px 50px at 50% -30px, rgba(0, 0, 0, 0) 49.5px, rgba(0, 0, 0, .8) 50.5px);
}

说明

• div 元素定义了矩形形状，并带有圆角
• 在 div 内部，伪元素 :before 使用绝对定位和实心红色边框创建圆形切口。
• 透明间隙和填充效果是通过应用径向来实现的div 元素上的渐变背景。渐变在中心创建一个透明区域，与伪元素的圆重叠，从而产生剪切效果。

这种技术具有许多优点：

• 它消除了对额外元素的需求，简化了标记。
• 它在浏览器中一致地工作，没有任何明显的影响
• 使用简单的计算就可以将圆精确地居中于矩形内。

通过实现这种替代方法，您可以在 CSS 中有效地从矩形形状中切出一个圆，实现所需的视觉效果，而没有以前方法的复杂性和陷阱。

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