試了下,其實不用那麼麻煩還需要圖片什麼的,利用 border-shadow 就可以輕鬆產生遮罩,並且大小位置可以自訂。 實現 順帶加了個跟著滑鼠移動的效果 Codepen 說明 主要是利用 border-shadow 擴大其陰影範圍,遮蓋住整個圖片範圍,並且顏色設定半透明,就可以模擬遮罩效果。 而圖上的框線則可以用 div 在遮罩內進行拼接,可以看代碼如何實現的。
試了下,其實不用那麼麻煩還需要圖片什麼的,利用
border-shadow
就可以輕鬆產生遮罩,並且大小位置可以自訂。順帶加了個跟著滑鼠移動的效果
Codepen
主要是利用
border-shadow
擴大其陰影範圍,遮蓋住整個圖片範圍,並且顏色設定半透明,就可以模擬遮罩效果。而圖上的框線則可以用
div
在遮罩內進行拼接,可以看代碼如何實現的。