在CSS中,我們可以使用border-radius
屬性來(lái)將圖片的角弄圓,這個(gè)屬性可以設(shè)置一個(gè)元素四個(gè)角的圓角程度,下面是一個(gè)簡(jiǎn)單的例子:
<img src="image.jpg" style="border-radius: 10px;">
在這個(gè)例子中,圖片image.jpg
的四個(gè)角都會(huì)被弄圓,圓角的大小由border-radius
的值來(lái)決定,這個(gè)值可以是像素(px)、百分比(%)或者em單位。
如果你只想弄圓圖片的兩個(gè)角,可以使用border-top-left-radius
和border-top-right-radius
(或者border-bottom-left-radius
和border-bottom-right-radius
)來(lái)控制:
<img src="image.jpg" style="border-top-left-radius: 10px; border-top-right-radius: 10px;">
這樣,圖片image.jpg
的左上角和右上角就會(huì)被弄圓。
需要注意的是,border-radius
屬性會(huì)改變圖片的大小,因?yàn)樗鼘?shí)際上是在圖片周?chē)砑恿艘粋€(gè)圓角邊框,如果你不希望改變圖片的大小,可以使用object-fit
屬性來(lái)保持圖片的原始大?。?/p>
<img src="image.jpg" style="border-radius: 10px; object-fit: cover;">
這樣,圖片image.jpg
的四個(gè)角就會(huì)被弄圓,而不會(huì)改變圖片的大小。