css圆角矩形填充渐变颜色

要实现CSS圆角矩形填充渐变颜色，可以通过以下步骤进行：

1. 首先，在HTML文件中创建一个div元素，并为其添加一个类或ID作为选择器。

2. 在CSS文件中，使用该选择器来设置div元素的宽度、高度、圆角半径和填充颜色。

3. 使用CSS的background属性和linear-gradient函数来设置填充颜色的渐变效果。linear-gradient函数需要指定渐变的方向和颜色值。

4. 在linear-gradient函数中，可以通过使用关键字"from"和"to"来设置渐变的起点和终点。例如，"from top left"表示从左上角开始，"to bottom right"表示到右下角结束。

5. 使用逗号分隔多个颜色值，以创建多色渐变效果。可以使用关键字"stop"来控制各个颜色值之间的分布比例。

6. 最后，将渐变颜色应用于div元素的背景，通过设置background属性的值为linear-gradient的返回值即可。

以下是一个示例代码：

HTML文件：

<div class="rectangle"></div>

CSS文件：

.rectangle {
  width: 200px;
  height: 100px;
  border-radius: 10px;
  background: linear-gradient(to bottom right, red, yellow);
}

在上述示例中，创建了一个带有类名"rectangle"的div元素。通过CSS设置了该div的宽度、高度和圆角半径，并使用linear-gradient函数给该div的背景设置了从红色到黄色的渐变效果。