如何使用HTML和CSS为网格堆叠添加后置边框？

想要实现如图所示的设计效果——网格堆叠后方带有边框，使网格呈现出从页面中突出的视觉效果。

实现方案 #

通过父容器相对定位，结合子元素的伪元素来创建后方边框，具体代码如下：

HTML结构 #

<div class="contact-form-container">
  <form class="contact-form">
    <input type="text" name="name" placeholder="姓名">
    <input type="email" name="email" placeholder="邮箱">
    <textarea name="message" placeholder="留言"></textarea>
    <button type="submit">提交</button>
  </form>
</div>

CSS样式 #

body {
  margin: 0;
  padding: 0;
}

.contact-form-container {
  position: relative;
  width: 50%;
}

.contact-form {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.contact-form:before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border: 3px solid red;
  z-index: -1;
  border-radius: 10px;
}

关键说明 #

• 父容器 .contact-form-container 设置 position: relative，为伪元素的绝对定位提供坐标参考
• 利用 .contact-form:before 生成一个伪元素，通过负偏移值让它比表单元素向外扩展一圈，z-index: -1 确保它处于表单底层，形成后方边框的视觉效果
• 可根据需求调整伪元素的边框颜色、宽度，以及偏移距离和圆角大小

内容的提问来源于stack exchange，提问作者Collin Porter