在CSS中,可以使用border
屬性為圖片添加邊框,或者使用box-shadow
屬性為圖片添加盒子效果。
我們可以使用border
屬性為圖片添加邊框,我們可以給圖片添加一個(gè)寬度為2px,顏色為黑色的邊框:
img { border: 2px solid black; }
我們可以使用box-shadow
屬性為圖片添加盒子效果。box-shadow
屬性可以添加多個(gè)陰影,包括外陰影和內(nèi)陰影,以及指定陰影的顏色、模糊半徑和擴(kuò)展距離,我們可以給圖片添加一個(gè)寬度為10px,顏色為灰色,模糊半徑為5px,擴(kuò)展距離為2px的盒子效果:
img { box-shadow: 10px 10px 5px 2px gray; }
我們還可以使用偽元素::before
和::after
來(lái)創(chuàng)建圖片的盒子效果,我們可以給圖片添加一個(gè)寬度為100%,高度為100%,顏色為灰色的盒子效果:
img { position: relative; z-index: 1; } img::before, img::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; background-color: gray; }
三種方法都可以為圖片添加盒子效果,你可以根據(jù)自己的需求選擇適合的方法。