html – 如何添加边框到一个容器之间有透明的间隙

这是一个使用CSS实现的设计图像.

如何为容器div实现这样的边框,以便我可以在间隙之间放置透明标志和文本.这个设计将在视频背景下进行.黑色背景仅供说明之用.

到目前为止,我试图实现像这样的测试：

body {
  background: black;
}
p {
  color: #ffffff;
  font-size: 16px;
  text-align: center;
  padding: 30px;
}
.steps-frame-1 {
  margin-top: 60px;
  width: 50%;
  height: 200px;
  margin-left: auto;
  margin-right: auto;
}
.steps-frame-1 {
  border: 0;
  position: relative;
}
.steps-frame-1::after,.steps-frame-1::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 45%;
  border: 2px solid #fff;
}
.steps-frame-1::before {
  bottom: 0;
  border-top: 0;
}
.steps-frame-1::after {
  border-bottom: 0;
  top: 0;
}

<div class="steps-frame-1">
  <div class="inner">
    <p>content Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy.</p>
  </div>
</div>

jsFiddle

问题是在标志的顶部边界上获得差距.此外,这整个容器必须有响应.

任何帮助将不胜感激.

解决方法

您可以使用多个线性渐变图像作为父div容器的背景,如下面的代码片段所示.这是实现它的一种方法,而不添加任何额外的元素.

背景不一定是纯色.这种方法可以支持透明度.您唯一需要注意的是,由于我们在线性梯度中使用百分比,因此高度/宽度增加(反之亦然)将会增加间隙.您可以使用“完整页面”选项看到这一点.

文本容器上的变换：translateX(-50％),translateY(-50％)用于在空间内的内容的垂直和水平居中.

body {
  background-image: radial-gradient(circle,#3F9CBA 0%,#153346 100%);
}
p {
  color: #ffffff;
  font-size: 16px;
  text-align: center;
  padding: 30px;
}
.steps-frame-1 {
  position: relative;
  height: 30vw;
  width: 75vw;
  margin: 20px;
  background-image: linear-gradient(to right,beige 5%,transparent 5%,transparent 20%,beige 20%),linear-gradient(to bottom,beige 45%,transparent 45%,transparent 55%,beige 55%),beige 55%);
  background-size: 100% 2px,2px 100%,2px 100%;
  background-position: top left,top left,top right;
  background-repeat: no-repeat;
  border-bottom: 2px solid beige;
}
.left-text,.right-text {
  position: absolute;
  top: 50%;
  height: 20px;
  color: beige;
}
.left-text {
  left: 0%;
  transform: translateX(-50%) translateY(-50%);
}
.right-text {
  right: 0%;
  transform: translateX(50%) translateY(-50%);
}
.top-text {
  position: absolute;
  top: 0%;
  left: 12.5%;
  content: url(http://www.planetcassandra.org/wp-content/uploads/2014/03/GitHub_logo.png);
  width: 15%;
  transform: translateX(-50%) translateY(-50%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="steps-frame-1">
  <div class="inner">
    <p>content Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy.</p>
  </div>
  <div class='top-text'></div>
  <div class='left-text'>Text</div>
  <div class='right-text'>Text</div>
</div>