当前位置：首页 > CSS

css制作方框

2026-04-01 12:57:11CSS

使用 border 属性创建方框

通过设置 border 属性可以快速创建方框。border 是 border-width、border-style 和 border-color 的简写属性。

.box {
  border: 2px solid #000;
  width: 200px;
  height: 200px;
}

调整方框的圆角

使用 border-radius 属性可以让方框的角变圆。值越大，圆角越明显。

.rounded-box {
  border: 2px solid #000;
  width: 200px;
  height: 200px;
  border-radius: 10px;
}

添加方框阴影

box-shadow 属性可以为方框添加阴影效果，增强立体感。

.shadow-box {
  border: 2px solid #000;
  width: 200px;
  height: 200px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

使用伪元素创建复杂方框

通过 ::before 或 ::after 伪元素，可以叠加多个方框或创建特殊效果。

.fancy-box {
  position: relative;
  width: 200px;
  height: 200px;
  background: #fff;
  border: 2px solid #000;
}

.fancy-box::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border: 1px dashed #666;
}

制作渐变边框方框

结合 background-clip 和 padding 可以模拟渐变边框效果。

css制作方框

.gradient-border-box {
  width: 200px;
  height: 200px;
  padding: 2px;
  background: linear-gradient(45deg, red, blue);
}

.gradient-border-box > div {
  width: 100%;
  height: 100%;
  background: white;
}