如何用CSS幫有透明背景的圖片加上白邊？ / How to Add White Borders to Images With Transparent Parts via CSS?

5月 17, 2023 CSS , DropShadow , Filter 1 Comments Edit Copy Download

請多善用drop-shadow。

帶透明部分的圖片 / Image with transparent parts

(圖片來源：FlatIcon https://www.flaticon.com/free-icon/psychology_8915898?term=test&page=1&position=23&origin=search&related_id=8915898 )

當我們想要為圖片加上白邊的時候，一開始的想法應該都是直接在CSS加上「border: 2px solid white」吧？不過這對有透明部分的圖片來說可就不行了。

https://codepen.io/pulipuli/pen/PodxepW

如上圖所示，白色的部份只會在<img>標籤的外圍，並不會隨著圖片透明的部分調整。這是border本來的特性。

加上陰影 / Add white drop shadows

https://stackoverflow.com/a/70470266 

Tamal Chowdhury對這個問題提出了很好的解法，那就是使用filter中的drop-shadow。舉例來說，以下語法會為圖片加上寬度為5px的白色邊緣：

img {
  filter: drop-shadow(5px 0 0 white) 
           drop-shadow(0 5px 0 white)
           drop-shadow(-5px 0 0 white) 
           drop-shadow(0 -5px 0 white);
}

https://codepen.io/pulipuli/pen/MWqzGvq

加入之後的效果如上圖，可以看到白邊真的隨著圖片而改變了，非常成功。

下次有需要為圖片加上白邊的話，可以試試看這招喔。

你還知道什麼CSS小技巧嗎？

歡迎在下面分享喔。