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

概述这是一个使用CSS实现的设计图像. 如何为容器div实现这样的边框,以便我可以在间隙之间放置透明标志和文本.这个设计将在视频背景下进行.黑色背景仅供说明之用. 到目前为止,我试图实现像这样的测试： body { background: black;}p { color: #ffffff; font-size: 16px; text-align: center; paddin 这是一个使用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 >  <div >    <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 >  <div >    <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>

总结

以上是内存溢出为你收集整理的html – 如何添加边框到一个容器之间有透明的间隙全部内容，希望文章能够帮你解决html – 如何添加边框到一个容器之间有透明的间隙所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。