圖片邊框圓角（CSS樣式） 在網頁設計中，美化圖片邊框是一個常見的需求。其中一個常用的美化效果就是為圖片設置圓角的邊框。在CSS中，我們可以使用border-radius屬性來實現這一效果。 border-radius的語法如下： ``` CSS border-radius: 上左 下右/ 橢圓半徑上/橢圓半徑下; ``` 其中，上左下右分別表示邊框的四個角，可以用px、em、pt、%等單位來設置；橢圓半徑分別表示x軸和y軸的半徑，也可以用px、em、pt、%等單位來設置。 如果上左下右四個角的值都相等，則可以簡寫為： ``` CSS border-radius: 圓角大小; ``` 接下來，讓我們看幾個例子。 1. 圓角邊框 ``` CSS img { border: 3px solid #cccccc; border-radius: 50%; } ``` 上面的代碼中，我們為圖片設置了一個3像素寬的實線邊框，同時將邊框的四個角設置為50%的圓角。 2. 橢圓邊框 ``` CSS img { border: 3px solid #cccccc; border-radius: 50% 20%; } ``` 上面的代碼中，我們仍然為圖片設置了一個3像素寬的實線邊框，同時將上、下兩個角設置為50%的圓角，左、右兩個角設置為20%的圓角，從而實現了橢圓形的效果。 3. 不規則邊框 ``` CSS img { border: 3px solid #cccccc; border-radius: 50% 0 50% 0 / 0 50% 0 50%; } ``` 上面的代碼中，我們仍然為圖片設置了一個3像素寬的實線邊框。不同的是，我們將左上角和右下角設置為50%的圓角，而將左下角和右上角設置為切掉一半的圓角，從而實現了不規則邊框的效果。 總結 通過使用border-radius屬性，我們可以輕松實現圖片邊框圓角的效果。除了上述例子，我們還可以通過設置border-radius的四個角的不同值來創造出更多不同的形狀。