css制作矩形

使用CSS创建矩形

通过CSS可以轻松创建矩形，以下是几种常见方法：

使用div元素

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

.rectangle {
  width: 200px;
  height: 100px;
  background-color: #3498db;
}

使用边框属性

通过border属性可以创建带有边框的矩形：

.bordered-rectangle {
  width: 150px;
  height: 80px;
  border: 2px solid #e74c3c;
}

使用伪元素

伪元素也能用来生成矩形：

.element::before {
  content: "";
  display: block;
  width: 120px;
  height: 60px;
  background: #2ecc71;
}

圆角矩形

添加border-radius属性可创建圆角矩形：

.rounded-rectangle {
  width: 180px;
  height: 90px;
  background: #9b59b6;
  border-radius: 10px;
}

响应式矩形

使用百分比或视口单位创建响应式矩形：

.responsive-rectangle {
  width: 50vw;
  height: 30vh;
  background: #f1c40f;
}

带阴影的矩形

添加box-shadow属性增强视觉效果：

.shadow-rectangle {
  width: 160px;
  height: 80px;
  background: #1abc9c;
  box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
}

这些方法可以根据需要组合使用，创建各种风格的矩形元素。