CSS中,我們可以很方便地給圖片添加邊框。下面讓我們來(lái)看一下具體的實(shí)現(xiàn)。
首先,在HTML中插入圖片時(shí),需要給圖片一個(gè)類名或者id,方便在CSS中選中它。比如:接下來(lái),在CSS中,我們可以通過(guò)以下代碼給圖片加上邊框:
.my-img { border: 1px solid #ccc; }其中,1px為邊框的粗細(xì),solid表示為實(shí)線邊框,#ccc為邊框的顏色。我們也可以通過(guò)其他方式來(lái)指定邊框的顏色,比如使用rgb、rgba、hsl、hsla等。 此外,我們還可以使用border-radius屬性來(lái)實(shí)現(xiàn)圖片的圓角效果。
.my-img { border: 1px solid #ccc; border-radius: 50px; }其中,50px指定圖片的四個(gè)角都為50像素的圓角。我們也可以只指定某一個(gè)角的圓角程度:
.my-img { border: 1px solid #ccc; border-radius: 50px 20px 10px 5px; }其中,分別代表左上角、右上角、右下角、左下角的圓角程度。 總之,CSS中給圖片添加邊框非常簡(jiǎn)單,只需要幾行代碼即可實(shí)現(xiàn)。通過(guò)添加邊框,可以讓圖片的展示效果更加突出,也可以讓頁(yè)面更有層次感。