在前端開發中，經常需要為頁面中的某些區域添加圓角效果的圖片。而我們可以使用CSS來實現這一需求。

下面的代碼演示了如何用CSS畫出四個角都為圓角的圖片：

.image {
width: 100px;
height: 100px;
border-radius: 10px;
}

上述代碼中，我們首先定義一個名為"image"的類，寬高分別為100px，并將邊角半徑（border-radius）設為10px。

如果我們想只將左上角和右下角設置為圓角，則可以使用下面的代碼：

.image {
width: 100px;
height: 100px;
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
}

代碼中，我們通過設置border-top-left-radius和border-bottom-right-radius樣式來僅設置左上角和右下角為圓角。

類似地，如果我們想將左下角和右上角設置為圓角，則可以用下列代碼：

.image {
width: 100px;
height: 100px;
border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
}

上述代碼同樣分別使用了border-bottom-left-radius和border-top-right-radius樣式來實現。

除了圓角半徑外，我們還可以為邊框添加樣式，例如設置邊框顏色、寬度等。此外，我們還可以使用偽元素（::before和::after）來實現更多樣式化效果。

總之，通過使用CSS，我們可以輕松地實現各種形狀的圖片效果，更好地應對前端開發中的需求。