为块绘制这样的边框的选项和方法是什么?
此边框位于具有背景图像(非均匀背景)的块内。距离边缘 15 像素。内部透明。边界被打破。
.box {
position: relative;
margin-bottom: 20px;
padding: 15px;
}
.box-inner {
width: 100%;
height: 100%;
background-clip: padding-box;
border: solid 2px transparent;
}
.box:after {
content: '';
position: absolute;
top: 15px;
left:15px;
right: 15px;
bottom: 15px;
background: linear-gradient(to right, red, orange);
}
.box-1 {
width: 200px;
height: 200px;
background: url(https://picsum.photos/200/300);
}
.box-2 {
width: 200px;
height: 500px;
background: url(https://picsum.photos/200/300);
}
<div class="box box-1">
<div class="box-inner"></div>
</div>
<div class="box box-2">
<div class="box-inner"></div>
</div>
background-clip: padding-box;
不起作用。
呃……如果我
<img>
保留伪元素,那么代码会更短。直到那时:要将帧中断放置在另一侧,您需要更改渐变的大小、位置和方向(斜率):
尝试比较不同边的梯度参数,依次取消注释/注释掉属性,
background
一切都会变得清晰。对于一些中断,除了位置和大小之外,您需要自己调整渐变:
如果您另外使用径向渐变,您可以进一步使设计多样化:
举个例子: