css两个是圆角的矩形

CSS是一种操作样式的语言，被广泛应用于网站设计中。其中，圆角的矩形被视为一种常见的设计元素，本文将介绍如何使用CSS实现两个是圆角的矩形。

/* CSS代码：两个圆角矩形 */
.rectangle{
 width: 200px; /* 宽度 */
 height: 100px; /* 高度 */
 background-color: #cccccc; /* 背景颜色 */
 border-radius: 10px; /* 圆角半径 */
 border: 1px solid #000000; /* 边框大小及颜色 */
 Box-shadow: 5px 5px 5px #888888; /* 阴影效果 */
 margin: 20px; /* 外边距 */
 padding: 10px; /* 内边距 */
}

.rectangle2{
 width: 150px; /* 宽度 */
 height: 50px; /* 高度 */
 background-color: #ffffff; /* 背景颜色 */
 border-radius: 5px; /* 圆角半径 */
 border: 2px dashed #ff0000; /* 边框大小及颜色 */
 margin: 5px; /* 外边距 */
 padding: 5px; /* 内边距 */
}

上述代码实现了两个不同大小的圆角矩形，其中rectangle和rectangle2分别表示两个矩形。在CSS中，我们可以设置元素的宽度、高度、边框、内外边距、背景颜色和圆角半径等参数。

为了使矩形看起来更为立体，我们可以使用Box-shadow属性添加阴影效果。此外，在第二个矩形中，我们还通过border-style选项将边框设置为虚线，border-color选项设置为红色。

通过以上CSS样式设置的应用，我们可以轻松实现两个圆角矩形的排版和设计。在实际应用中，我们可以根据具体需求对这些属性进行调整，进一步丰富矩形的外观和效果。