如何使用CSS创建边界角间距,如下图所示？内容的高度不固定.
解决方法
使用
border-image：
我们可以利用border-image在所有四个边上分配线性渐变作为边界图像.我们需要一个伪元素(与父容器重叠),因为渐变只能在一个方向上进行.梯度可以支持基于百分比的值,因此可以适应不同的容器尺寸.这可以通过将鼠标悬停在代码段中的div来验证.
这种方法的主要缺点是border-image属性有low browser support.但是当只需要支持IE11时它非常有用,因为与Box-shadow不同,它不需要固定的尺寸,也不像clip-path那样复杂.还为其他潜在用途留下了备用伪元素.
.border-spacing{
position: relative;
height: 100px;
width: 300px;
padding: 10px;
background: rgb(187,103,224);
background-clip: content-Box;
border-image: linear-gradient(to bottom,transparent 25%,black 15%,black 75%,transparent 75%);
border-image-slice: 4;
border-image-width: 4px;
border-image-repeat: round;
/* Just for demo */
text-align: center;
line-height: 100px;
color: white;
}
.border-spacing:after{
position: absolute;
content: '';
top: -2px; /* half of border-image-slice */
left: -2px; /* half of border-image-slice */
height: calc(100% - 20px); /* 100% - 2 * padding */
width: calc(100% - 20px); /* 100% - 2 * padding */
padding: 10px;
border-image: linear-gradient(to right,transparent 75%);
border-image-slice: 4;
border-image-width: 4px;
border-image-repeat: round;
}
/* Just for demo */
.border-spacing{
transition: all 1s;
}
.border-spacing:hover{
height: 150px;
width: 450px;
line-height: 150px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <div class="border-spacing">Content div</div>
我们可以利用background-image在所有四个边上分配线性渐变作为边界图像.我们需要一个伪元素(与父容器重叠),因此可以适应不同的容器尺寸.这可以通过将鼠标悬停在代码段中的div来验证.
这种方法的缺点也与之前的方法非常相似,因为linear-gradient仅受IE10支持.优点与前面提到的相同.
.border-spacing{
position: relative;
height: 100px;
width: 300px;
padding: 10px;
background-image: linear-gradient(to bottom,transparent 75%),linear-gradient(to bottom,linear-gradient(to right,transparent 75%);
background-size: 4px 100%,4px 100%,100% 4px,100% 4px;
background-position: 0px 0px,100% 0px,0px 0px,0px 100%;
background-repeat: no-repeat;
/* Just for demo */
text-align: center;
line-height: 100px;
color: white;
}
.border-spacing:after{
position: absolute;
content: '';
top: 10px;
left: 10px;
height: calc(100% - 20px);
width: calc(100% - 20px);
z-index: -1;
background: rgb(187,224);
}
/* Just for demo */
.border-spacing{
transition: all 1s;
}
.border-spacing:hover{
height: 150px;
width: 450px;
line-height: 150px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <div class="border-spacing">Content div</div>
