CSS 3 邊緣打孔透明是一種特殊的樣式效果，它可以讓某一個(gè)區(qū)域的邊緣變得透明，呈現(xiàn)出一種打孔的效果，使得視覺(jué)上具有穿透性。這種效果可以通過(guò)CSS的clip-path屬性來(lái)實(shí)現(xiàn)。

div {
background-color: #F5B041;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 40px));
}

上面的代碼表示一個(gè)div區(qū)域，其中clip-path屬性指定了一個(gè)四邊形路徑，其參數(shù)為polygon(x1 y1, x2 y2, x3 y3, x4 y4)。這個(gè)四邊形的左下角落在(0, 100%)，右下角落在(100%, 100%)，右上角落在(100%, 0)，左上角落在(0, 0)，其中y4的計(jì)算表明，頂部打孔的高度是40px。

如果把這個(gè)div的背景色改成其他顏色，效果如下：

div {
background-color: #3498DB;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 40px));
}

可以看到，這個(gè)div的上部打了一個(gè)40px的孔，看上去就像透明了一樣。實(shí)際上，這個(gè)div上部的內(nèi)容是依然存在的，只是通過(guò)路徑的裁剪，被隱藏起來(lái)了，讓四個(gè)場(chǎng)景呈現(xiàn)透明的效果。

需要注意的是，雖然clip-path屬性如此強(qiáng)大，但是它的瀏覽器支持情況并不是非常好，所以在使用時(shí)需要針對(duì)各個(gè)瀏覽器進(jìn)行兼容性處理。