如何在 CSS 覆盖层中创建孔？

在 CSS 叠加层中创建孔

可以创建在叠加层中留下孔的效果，从而允许下面的内容显示出来.

使用 CSS Box Shadow

要实现此效果，请使用具有较大扩展半径的 CSS box-shadow 属性。

box-shadow: 0 0 0 9999px rgba(0, 0, 255, 0.2);

这会在元素周围创建一个大的半透明阴影。

示例

在下面的示例中，在覆盖 div 中创建了一个具有hole类的“洞”：

.hole {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 200px;
  height: 150px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 255, 0.2);
}

<p>Lorem ipsum dolor sit amet, ocurreret tincidunt philosophia in sea, at pro postea ullamcorper.</p>
<p>Has ex idque repudiandae, an mei munere philosophia. Sale molestie id eos, eam ne blandit adipisci.</p>

<div class="hole"></div>

以上是如何在 CSS 覆盖层中创建孔？的详细内容。更多信息请关注PHP中文网其他相关文章！