如何用CSS幫有透明背景的圖片加上白邊？ / How to Add White Borders to Images With Transparent Parts via CSS?
請多善用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小技巧嗎？
歡迎在下面分享喔。
