如何实现div元素内的镂空孔洞效果（仅使用HTML元素）

要实现你需要的效果——让container里的子div变成能透出下层behind蓝色的孔洞，其余区域保持红色，不用SVG的话，可以用CSS的box-shadow结合overflow:hidden来实现，下面是具体方案：

完整代码 #

HTML

<div id="behind">
   <div id="container">
       <div></div>
       <div></div>
       <div></div>
       <div></div>
   </div>
</div>

CSS

#behind{
    width:100px;
    height:100px;
    background:blue;
    position: relative;
}
#container{
    width:100px;
    height:100px;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}
#container div{
    width:20px;
    height:20px;
    margin:2px;
    background: transparent;
    box-shadow: 0 0 0 100vmax red;
    float: left;
}

实现思路 #

• 调整层级：给#behind设置position: relative，让#container绝对定位覆盖在它上方，保证两者完全重合。
• 用阴影模拟背景：不给#container直接设置红色背景，而是让每个子div生成超大范围的红色阴影——100vmax的扩散半径足够填满任何容器，再通过#container的overflow:hidden裁剪阴影，让阴影刚好铺满容器，形成红色背景的效果。
• 透明子div实现孔洞：把子div的背景设为透明，这样它们所在的位置就会直接透出下层#behind的蓝色，看起来就像红色容器上开了洞。
• 子div横向排列：加上float: left让四个子div横向排列，更清晰呈现孔洞布局。

内容的提问来源于stack exchange，提问作者mnwer