在CSS中,我們可以使用border-radius
屬性來將圖片設(shè)置為圓角矩形,這個(gè)屬性可以接收四個(gè)值,分別代表四個(gè)角的半徑大小,如果我們只提供一個(gè)值,那么這個(gè)值將會(huì)用于所有四個(gè)角。
如果我們想要將一張圖片設(shè)置為圓角矩形,并且希望每個(gè)角的半徑為20像素,我們可以這樣寫CSS代碼:
img { border-radius: 20px; }
這將會(huì)使圖片的所有四個(gè)角都變?yōu)?0像素的圓角,如果我們希望不同角的半徑不同,我們可以提供四個(gè)值,分別代表每個(gè)角的半徑:
img { border-radius: 20px 40px 60px 80px; }
這將會(huì)使圖片分別變?yōu)?0像素、40像素、60像素和80像素的圓角矩形,注意,border-radius
的值可以是像素、百分比或其他CSS支持的長(zhǎng)度單位。
border-radius
屬性不僅可以用于圖片,還可以用于任何具有邊框的元素,如div、p等,通過調(diào)整border-radius
的值,我們可以輕松地改變?cè)氐男螤?,使其更加符合我們的設(shè)計(jì)需求。