1. 程式人生 > >如何在不使用JS的情況下在div中心挖一個洞

如何在不使用JS的情況下在div中心挖一個洞

如何在不使用JS的情況下在div中心挖一個洞


前一段時間,我在論壇上看見一個2015年的帖子,說如何利用css在div中間挖一個洞。這個漸變大家想必都有很多方法辦到,但是這個洞就疑惑了。求助的兄弟如圖。


恰巧我面試的一家要招45k的前端工程師也出了一個這個問題。這家公司出了很多題,不像別的公司一問就是各種js的問題,各種架構,框架……

但是我腦子想了一段時間,覺得canvase就可以完美解決,但是隻讓使用css所以我就有些疑惑了。

這就類似於一個掃碼的手機功能,周圍半透明遮罩相機畫面,中間全透明部分顯示掃描的二維碼。

所以我想到了這個方法,border!

在定義border顏色的時候,我們可以為他加一個border:200px solid rgba(0,0,0,0.7);

這樣就有了類似微信的那種效果。

如果想要那種漸變的可以使用背景圖或者css3漸變來實現