如何为容器添加边框，中间有透明间隙

Question

这是我试图仅用 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

问题是在顶部边框以及徽标上获得间隙。整个容器也必须响应。

任何帮助将不胜感激。

Answer 1

Demo

html

<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 class="one">text</div>
        <div class="two">text</div>
        <div class="three">text</div>
        <div class="four">text</div>
    </div>
    <!-- inner -->
</div>

css

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;
}
.inner {
    position: relative;
    border: 2px solid #fff;
}
.inner div {
    position: absolute;
    height: 30px;
    line-height: 30px;
    width: 50px;
    background: #000;
    color: #fff;
}
.one {
    top: 0;
    bottom: 0;
    margin: auto;
    left: -25px;
    width: 50px;
    text-align: center;
}
.two {
    top: 0;
    bottom: 0;
    margin: auto;
    right: -25px;
    width: 50px;
    text-align: center;
}
.three {
    top: -15px;
    margin: auto;
    left: 25px;
    width: 50px;
    text-align: center;
}
.four {
    bottom: -15px;
    margin: auto;
    right: 25px;
    width: 50px;
    text-align: center;
}

Answer 2

我怀疑是否有原生的方式来切割边框，所以你必须给人一种错觉，它是一个带有更多容器的边框。

像这样应该就足够了。没什么特别的，所以浏览器支持也不是问题：

body {
    background: black;
}
p {
    color: #ffffff;
    font-size: 16px;
    text-align:center;
    padding:30px;
}
.steps-frame-1 {
    position: relative;
    margin-top: 60px;
    width: 50%;
    height: 200px;
    margin-left:auto;
    margin-right:auto;
}
.borderColour {
     background-color: #fff;   
}
.borderTopLeft {
     position: absolute;
    top:0;
    left: 0;
    width: 10%;
    height:2px;
}
.borderTopRight {
    position: absolute;
    top:0;
    right: 0;
    width: 80%;
    height:2px;
}
.borderRightTop {
    position: absolute;
    top:0;
    right: 0;
    width: 80%;
    height:2px;
}
.borderRightTop {
    position: absolute;
    top:0;
    right: 0;
    width: 2px;
    height: 45%;
}
.borderRightBottom {
    position: absolute;
    bottom:0;
    right: 0;
    width: 2px;
    height:45%;
}
.borderLeftTop {
    position: absolute;
    top:0;
    left: 0;
    width: 2px;
    height: 45%;
}
.borderLeftBottom {
    position: absolute;
    bottom:0;
    left: 0;
    width: 2px;
    height:45%;
}
.borderBottom {
    position: absolute;
    bottom:0;
    left: 0;
    width: 100%;
    height:2px;
}

<div class="steps-frame-1">
    <div class="borderColour borderTopLeft"></div>
    <div class="borderColour borderTopRight"></div>
    <div class="borderColour borderRightTop"></div>
    <div class="borderColour borderRightBottom"></div>
    <div class="borderColour borderLeftTop"></div>
    <div class="borderColour borderLeftBottom"></div>
    <div class="borderColour borderBottom"></div>
    <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>
    <!-- inner -->
</div>

http://jsfiddle.net/ddn53xsf/3/

Answer 3

您可以使用多个 linear-gradient 图像作为父 div 容器的背景，如下面的代码片段所示。这是一种无需添加任何额外元素即可实现的方法。

背景不必是纯色。这种方法可以支持透明度。您在这里唯一需要注意的是，由于我们在 linear-gradient 中使用百分比，因此差距会随着 height/width 的增加而增加（反之亦然）。您可以使用 "Full Page" 选项查看。

文本容器上的 transform: translateX(-50%), translateY(-50%) 用于 space.

中内容的垂直和水平居中

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%), linear-gradient(to bottom, beige 45%, transparent 45%, transparent 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>

Answer 4

这是我的解决方案：

在框的每一侧添加一个辅助元素。
将 logo/text 放在辅助元素内。
使用伪元素在logo/text

body {
  color: white;
  background: black;
}
.box {
  position: relative;
  margin: 100px auto 0;
  padding: 80px;
  width: 50%;
}
/**** border helpers ****/
.border {
  position: absolute;
  background-color: rgba(255, 255, 255, .5);
  /* disable these rules to understand what is going on */
  background-color: transparent;
  overflow: hidden;
}
.border-t,
.border-b {
  left: 32px;
  right: 32px;
  height: 64px;
}
.border-t {
  top: 0;
}
.border-b {
  bottom: 0;
}
.border-l,
.border-r {
  top: 32px;
  bottom: 32px;
  width: 64px;
}
.border-l {
  left: 0;
}
.border-r {
  right: 0;
}
/**** logo and text ****/
.border > span {
  position: absolute;
  text-align: center;
}
.border-t span,
.border-b span {
  top: 0;
  left: 10%;
  height: 100%;
}
.border-l span,
.border-r span {
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
}
/**** lines ****/
.border span::before,
.border span::after {
  content: "";
  position: absolute;
}
/**** lines (horizontal) ****/
.border-t span::before,
.border-b span::before,
.border-t span::after,
.border-b span::after {
  top: 50%;
  border-top: 1px solid white;
  width: 999px;
}
.border-t span::before,
.border-b span::before {
  right: 100%;
}
.border-t span::after,
.border-b span::after {
  left: 100%;
}
/**** lines (vertical) ****/
.border-l span::before,
.border-r span::before,
.border-l span::after,
.border-r span::after {
  left: 50%;
  border-left: 1px solid white;
  height: 999px;
}
.border-l span::before,
.border-r span::before {
  bottom: 100%;
}
.border-l span::after,
.border-r span::after {
  top: 100%;
}

<div class="box">
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum finibus ligula sit amet gravida. Sed scelerisque dapibus tempus.</p>
    <p>Curabitur ipsum dui, facilisis at interdum et, feugiat eget tortor. Nunc sodales diam nec nunc sollicitudin, non blandit diam lacinia.</p>
  </div>
  <div class="border border-t"><span><img src="http://lorempixel.com/128/64/abstract/8/"></span></div>
  <div class="border border-b"><span></span></div>
  <div class="border border-l"><span>Integer rhoncus nunc dui, eget.</span></div>
  <div class="border border-r"><span>Curabitur quis mauris eros. In hac habitasse.</span></div>
</div>

如何为容器添加边框，中间有透明间隙

How to add border to a container with transparent gaps in between

html

css

css-shapes

linear-gradients