当前位置：首页 > CSS

css方框制作留空

2026-04-02 18:24:27CSS

制作留空方框的方法

在CSS中制作留空方框通常指边框内部有透明或空白区域的效果。以下是几种常见实现方式：

使用透明背景和边框

通过设置透明背景和实线边框，可以创建留空效果：

.box {
  width: 200px;
  height: 200px;
  background-color: transparent;
  border: 2px solid #000;
}

使用outline属性

outline不会占据布局空间，适合创建不干扰内容的留空框：

.outline-box {
  width: 200px;
  height: 200px;
  outline: 2px dashed #333;
  outline-offset: 5px; /* 控制留空距离 */
}

使用伪元素创建双层边框

通过伪元素实现更复杂的留空效果：

.double-border {
  position: relative;
  width: 200px;
  height: 200px;
  background: white;
}
.double-border::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border: 1px solid #000;
}

使用box-shadow创建虚框

box-shadow可以创建不占据空间的留空效果：

.shadow-box {
  width: 200px;
  height: 200px;
  box-shadow: 0 0 0 5px rgba(0,0,0,0.1), 
              0 0 0 10px rgba(0,0,0,0.1);
}

使用透明边框和背景裁剪

结合background-clip属性实现精确控制：

css方框制作留空

.clip-box {
  width: 200px;
  height: 200px;
  padding: 20px;
  border: 10px solid rgba(0,0,0,0.5);
  background-color: white;
  background-clip: content-box;
}