CSS長方形圖片變圓角的方法

在CSS中，要將長方形圖片變?yōu)閳A角，可以使用border-radius屬性，這個(gè)屬性可以設(shè)置一個(gè)元素的圓角半徑，從而使其呈現(xiàn)圓角形狀，對(duì)于圖片，可以將border-radius設(shè)置為圖片寬度和高度的一半，這樣就可以得到一個(gè)完整的圓角圖片。

假設(shè)有一張200px200px的圖片，想要將其變?yōu)閳A角，可以使用以下CSS代碼

img {
  border-radius: 100px;
}

這將使圖片的四個(gè)角都變?yōu)閳A角，半徑為100px，可以根據(jù)需要調(diào)整radius的值，以得到不同大小的圓角。

需要注意的是，如果圖片的寬度和高度不一致，那么圓角的大小也會(huì)有所不同，在這種情況下，建議將border-radius設(shè)置為較小的值，以確保圓角的大小不會(huì)過大或過小。

還可以將border-radius設(shè)置為不同的值，以得到不同樣式的圓角效果，將border-radius設(shè)置為20px 20px 30px 30px，可以得到一個(gè)左上角和右上角為20px圓角，左下角和右下角為30px圓角的圖片效果。

使用border-radius屬性可以輕松地實(shí)現(xiàn)CSS長方形圖片變圓角的效果。