一、CSS圆角矩形代码

要创建一个圆角矩形，首先需要使用CSS的 border-radius 属性。border-radius 属性规定元素的边角的形状。通过设置 border-radius 的值，我们可以为一个元素设置圆角矩形。

.rounded-rectangle {
  border-radius: 10px;
}

其中 10px 是圆角的半径，可以根据需要进行修改。需要注意的是，如果需要设置不同角落的半径不相同，可以使用“/”符号进行分隔。

.rounded-rectangle {
  border-radius: 10px 20px 30px 40px;
}

上述代码中，第一个值为左上角的半径，第二个值为右上角的半径，第三个值为右下角的半径，第四个值为左下角的半径。

二、CSS圆角矩形边框

除了用 border-radius 属性来设置圆角矩形，我们还可以使用 border-style、border-color 和 border-width 来设置边框的样式、颜色和宽度。

.rounded-rectangle {
  border: 2px dashed #999;
  border-radius: 10px;
}

上述代码中，我们创建了一个 2 像素宽的虚线边框，颜色为 #999，并设置了 10 像素的边角半径。

三、CSS圆角矩形半径

圆角矩形的半径越小，圆角越尖锐，半径越大，圆角越平滑。以下是不同半径设置下的圆角矩形：

/* 半径为0 */
.rounded-rectangle {
  border-radius: 0;
}
/* 半径为5像素 */
.rounded-rectangle {
  border-radius: 5px;
}
/* 半径为10像素 */
.rounded-rectangle {
  border-radius: 10px;
}
/* 半径为20像素 */
.rounded-rectangle {
  border-radius: 20px;
}
/* 半径为50% */
.rounded-rectangle {
  border-radius: 50%;
}

四、CSS圆角矩形怎么设置

如上所述，我们可以通过设置 border-radius 属性来创建一个圆角矩形。除此之外，我们也可以使用伪元素 :before 和 :after 来创建一个完整的圆角矩形。

.rounded-rectangle {
  position: relative;
}
.rounded-rectangle:before {
  content: '';
  position: absolute;
  left: -10px;
  top: -10px;
  right: -10px;
  bottom: -10px;
  border-radius: 10px;
  background: #f0f0f0;
}

在上述代码中，我们在原始元素的前面添加了一个伪元素 :before，并且将其设置为绝对定位，并铺满整个父元素。然后，我们设置了一个 10 像素的圆角半径，并为其添加了一个背景色。

五、HTML圆角矩形按钮

我们可以将上述 CSS 圆角矩形的代码应用于按钮上，从而创建一个圆角矩形按钮。

<button class="rounded-rectangle">点击</button>

六、CSS设置圆角矩形

除了使用 border-radius 属性外，我们还可以设置一些其他的 CSS 属性，例如 box-shadow、background-color 和 padding 等，以使圆角矩形的样式更加丰富。

.rounded-rectangle {
  border-radius: 10px;
  background-color: #f0f0f0;
  box-shadow: 1px 1px 5px #ccc;
  padding: 10px;
}

上述代码中，我们设置了圆角半径为 10 像素，背景色为 #f0f0f0，添加了一个 1 像素的灰色阴影，以及 10 像素的内边距。

七、CSS圆角样式

除了常规的 border-radius 属性外，还有一些其他的 CSS 圆角样式，例如 inset 和 outset。

.rounded-rectangle {
  border-radius: 10px;
  border: 2px inset #999;
}

上述代码中，我们将边框设置为内凹效果，并将半径设置为 10 像素。

八、如何在 HTML 中设置圆角矩形

实际上，在 HTML 中设置圆角矩形并不需要太复杂的代码。我们只需要为元素添加一个 class 即可。

<div class="rounded-rectangle">
  <p>这是一个圆角矩形。</p>
</div>

上述代码中，我们为一个 div 元素添加了一个 class：rounded-rectangle，从而创建了一个圆角矩形。

CSS圆角矩形详解