CSS圓角漸變色矩形是一種常用的UI設計元素，可以讓頁面更加美觀。下面我們來學習如何使用CSS來實現這樣的效果。

.rounded-rectangle {
width: 200px;
height: 100px;
background: linear-gradient(to bottom, #f00, #00f);
border-radius: 10px;
}

首先，我們需要一個class為“rounded-rectangle”的div來作為我們要渲染的圓角漸變色矩形。上述代碼中，我們為這個div設置了寬度和高度，設置了背景漸變色，以及設置了圓角半徑為10px。

對于背景漸變色，我們使用了CSS3中的漸變屬性，通過to bottom來指定從上到下漸變。我們使用了紅色(#f00)和藍色(#00f)兩種顏色作為起始和結束顏色。你可以根據需求更改顏色或者自定義添加更多顏色。

最后，我們還可以為這個div添加一些陰影效果以及其他樣式，使其更加美觀。

總的來說，CSS圓角漸變色矩形是一種非常簡單實用的UI設計元素，通過一些基本的CSS屬性，我們可以輕松實現這個效果，讓我們的網頁更加美觀。