引导者

一、 创建基本矩形最简单的矩形只需要设置元素的`width`和`height`属性。 我们可以使用像素(px)、百分比(%)、em等多种单位。```html

f0f0f0; /* 设置背景颜色 */ } ```这段代码创建一个宽200像素，高100像素，背景颜色为浅灰色的矩形。

二、 圆角矩形通过`border-radius`属性，我们可以轻松创建圆角矩形。 `border-radius`属性接受一个或四个值，分别控制四个角的圆角半径。* **单个值:** 所有四个角的圆角半径相同。 * **两个值:** 第一个值设置左上角和右下角的圆角半径，第二个值设置右上角和左下角的圆角半径。 * **三个值:** 第一个值设置左上角的圆角半径，第二个值设置右上角和左下角的圆角半径，第三个值设置右下角的圆角半径。 * **四个值:** 分别设置左上角、右上角、右下角和左下角的圆角半径。```html

f0f0f0;border-radius: 10px; /* 所有角都是10px的圆角 */ } ```这段代码创建一个具有10像素圆角的矩形。 你可以尝试修改`border-radius`的值来调整圆角大小，甚至可以设置为`50%`来创建一个完美的圆形。

三、 添加边框和阴影我们可以使用`border`属性添加边框，使用`box-shadow`属性添加阴影，使矩形更具视觉效果。```html

f0f0f0;border: 2px solid

000; /* 2像素黑色实线边框 */border-radius: 5px;box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); /* 添加阴影 */ } ```这段代码创建一个带有黑色边框和阴影的圆角矩形。 `box-shadow`属性的四个值分别代表水平偏移、垂直偏移、模糊半径和颜色。

四、 响应式矩形为了使矩形在不同屏幕尺寸下都能良好显示，我们可以使用百分比作为`width`和`height`的单位，或者使用媒体查询来根据屏幕大小调整矩形的尺寸和样式。```css .responsive-rectangle {width: 50%; /* 占据父元素宽度的一半 */height: 150px;background-color:

f0f0f0; }@media (max-width: 768px) {.responsive-rectangle {width: 100%; /* 在小屏幕上占据父元素的全部宽度 */} } ```这段代码展示了一个响应式矩形，它在较大的屏幕上占据父元素宽度的一半，而在小屏幕上则占据全部宽度。通过以上方法，我们可以灵活运用CSS创建各种样式的矩形，满足不同的网页设计需求。 记住根据你的设计需要调整属性值来达到最佳效果。