当前位置：首页 > CSS

css方块制作

2026-01-28 03:53:47CSS

使用 div 元素创建基础方块

通过 HTML 的 <div> 元素结合 CSS 样式可以快速创建方块。设置 width 和 height 为相同值实现正方形，不同值则为长方形。背景色通过 background-color 定义，边框可选添加。

<div class="square"></div>

.square {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  border: 2px solid #2980b9;
}

利用伪元素生成装饰性方块

通过 ::before 或 ::after 伪元素可以在不修改 HTML 结构的情况下添加装饰性方块。需设置 content: "" 并指定定位方式，适合创建悬浮效果或背景装饰。

css方块制作

.element::before {
  content: "";
  display: block;
  width: 50px;
  height: 50px;
  background-color: #e74c3c;
  position: absolute;
  top: -10px;
  left: -10px;
}

实现渐变或图案填充的方块

使用 CSS 渐变或 repeating-linear-gradient 可以创建具有复杂图案的方块。通过调整渐变角度和色标位置，能够模拟条纹、棋盘等效果。

css方块制作

.pattern-square {
  width: 120px;
  height: 120px;
  background: repeating-linear-gradient(
    45deg,
    #2c3e50,
    #2c3e50 10px,
    #34495e 10px,
    #34495e 20px
  );
}

制作响应式比例方块

通过 padding-bottom 百分比技巧实现宽高比例固定的方块。这种方法在响应式设计中特别有用，方块会随容器宽度等比缩放。

.ratio-box {
  width: 100%;
  padding-bottom: 100%; /* 1:1 比例 */
  position: relative;
  background-color: #9b59b6;
}

/* 内部内容需绝对定位 */
.ratio-box > .content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

添加 3D 立体效果的方块

结合 transform 属性和 box-shadow 可以创建具有立体感的方块。rotateX 和 rotateY 控制视角，多层阴影增强深度。

.3d-cube {
  width: 80px;
  height: 80px;
  background: #f39c12;
  transform: rotateX(15deg) rotateY(-15deg);
  box-shadow: 
    5px 5px 0 rgba(0,0,0,0.1),
    10px 10px 0 rgba(0,0,0,0.05);
}