在CSS中,要為圖片添加兩個(gè)邊框,可以使用border
屬性來(lái)實(shí)現(xiàn),以下是一個(gè)示例代碼,展示如何為圖片添加兩個(gè)邊框:
img { border: 5px solid #ff0000; /* ***個(gè)邊框 */ border-radius: 5px; /* 邊框圓角 */ padding: 10px; /* 邊框與圖片之間的空間 */ box-shadow: 0 0 10px #000000; /* 第二個(gè)邊框,使用box-shadow實(shí)現(xiàn) */ }
在這個(gè)示例中,圖片元素(img
)首先被賦予了一個(gè)5像素寬的紅色實(shí)線邊框(#ff0000
),通過(guò)border-radius
屬性,邊框的四個(gè)角被設(shè)置為圓角。padding
屬性用于在邊框和圖片之間添加一些空間,使得圖片不會(huì)緊貼在邊框上。box-shadow
屬性用于在圖片的下方添加另一個(gè)10像素寬的黑色陰影邊框(#000000
),這可以看作是第二個(gè)邊框。
通過(guò)這種方法,你可以在一個(gè)圖片元素上添加兩個(gè)邊框,***個(gè)邊框是實(shí)線,第二個(gè)邊框是陰影,這種方法不僅美觀,而且提供了額外的樣式層次。