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

您可以使用多个线性渐变图像作为父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%), 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%);

}

content Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy.

Text

Text