css制作矩形

使用CSS制作矩形

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

使用width和height属性

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

设置宽度和高度后，通过background-color填充颜色即可生成矩形。

使用边框属性

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

通过border属性添加边框，可生成空心矩形。

使用伪元素

.pseudo-rectangle::before {
  content: "";
  display: block;
  width: 150px;
  height: 75px;
  background-color: #2ecc71;
}

通过伪元素创建矩形，适合需要动态内容的场景。

圆角矩形

.rounded-rectangle {
  width: 200px;
  height: 100px;
  background-color: #9b59b6;
  border-radius: 10px;
}

通过border-radius属性可制作圆角矩形，调整数值可控制圆角大小。

响应式矩形

.responsive-rectangle {
  width: 50%;
  height: 0;
  padding-bottom: 25%;
  background-color: #f1c40f;
}

使用百分比宽度和padding-bottom创建宽高比例固定的响应式矩形。

进阶效果

渐变矩形

.gradient-rectangle {
  width: 200px;
  height: 100px;
  background: linear-gradient(to right, #1abc9c, #3498db);
}

通过linear-gradient实现颜色渐变效果。

阴影效果

.shadow-rectangle {
  width: 200px;
  height: 100px;
  background-color: #e67e22;
  box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
}

使用box-shadow为矩形添加投影增强立体感。

这些方法可根据实际需求组合使用，实现各种矩形效果。