如何在上下排列的3个div周围添加弧形虚线（附示例图）

嘿，我来帮你实现这个弧形虚线框效果！用纯CSS就能轻松搞定，不用复杂的脚本，下面是具体的实现方案和代码示例：

HTML结构 #

首先我们需要一个父容器包裹三个div元素，结构很简单：

<div class="container">
  <div class="box">Div 1</div>
  <div class="box">Div 2</div>
  <div class="box">Div 3</div>
</div>

CSS样式 #

通过父容器的伪元素来绘制弧形虚线框，核心是利用border-radius来实现上下的弧形效果：

/* 父容器，用来定位虚线框 */
.container {
  position: relative;
  width: 220px; /* 可根据需求调整宽度 */
  margin: 60px auto; /* 居中并留出上下空间 */
  padding: 15px; /* 让内部div和虚线框保持间距 */
}

/* 绘制弧形虚线框的核心伪元素 */
.container::before {
  content: "";
  position: absolute;
  top: -30px; /* 向上偏移，露出顶部弧形 */
  left: 0;
  right: 0;
  bottom: -30px; /* 向下偏移，露出底部弧形 */
  border: 2px dashed #333; /* 设置虚线的宽度和颜色 */
  border-radius: 50% / 30px 30px 30px 30px; /* 水平半径50%，垂直半径30px，形成上下弧形 */
  pointer-events: none; /* 避免虚线框干扰内部元素的交互 */
}

/* 内部div的基础样式 */
.box {
  width: 100%;
  height: 60px;
  background-color: #f0f0f0;
  margin: 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px; /* 可选，给div加圆角更美观 */
}

参数调整说明 #

你可以根据自己的需求修改这些参数，让效果更贴合你的设计：

• 修改border-radius里的30px数值：数值越大，上下的弧形越圆润；数值越小，弧形越平缓。
• 调整border的2px和#333：可以改变虚线的粗细和颜色。
• 修改container的width、box的height：适配你实际的布局尺寸。
• 调整top和bottom的-30px：控制弧形虚线框的上下位置，确保弧形刚好包裹住三个div的上下区域。

内容的提问来源于stack exchange，提问作者Hemanth Hemszz