Html 如何在：：after上实现具有全高（父元素）的边框

我在我的图像旁边创建了这个“类似票证”的边框，并且使

边框底部的
工作正常（参见下图）


有必要（我认为）使用：：after伪类实现border，因为border必须具有偏移量。下面是当前用于底部边框的代码：


#imagePanel.panel{
背景色：#28c3d7；
位置：相对位置；
文本对齐：居中；
身高：100%；
填充底部：80px；
}
#imagePanel.panel>div:第一个子项：之后{
位置：相对位置；
显示：块；
宽度：100%；
高度：22px；
利润上限：-11px；
内容：''；
边框顶部：22px点#fff；
z指数：2；
}

像这样试试

css

#imagePanel .panel {
  background-color: #28c3d7;
  position: relative;
  text-align: center;
  height: 100%;
  padding-bottom: 80px;
}
#imagePanel .panel > div:first-child:after {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  margin-top: -11px;
  content: '';
  border-top: 22px dotted #fff;
  z-index: 2;
  position: absolute;
bottom: 0;
left: 0;
}

这是一个具有多重背景的想法


.box{
位置：相对位置；
显示：内联块；
}
.盒子：之后{
内容：“；
位置：绝对位置；
底部：0；
左：0；
右：0；
高度：50px；
填充顶部：10px；/*与半径相同*/
框大小：边框框；
背景：
径向梯度（半径为*的圆圈10px/*10px，蓝色98%，透明100%）
-10px 0/*控制初始位置*/
/40px 20px/*40px控制圆之间的距离，20px=2*10px*/
重复-x，
蓝色内容框；
}
img{
显示：块；
}
您是否同时只需要两个边框？如果是这样的话，您可以使用
：：before
伪元素。@Konrud无论如何都没有-在任何给定的时间只有一个边框<代码>边框底部
如果屏幕宽度>992px，则切换到
边框右侧
。谢谢！最后使用了可变版本，因为我实际上在这里有一个例子，我必须在每个面板上用不同的颜色制作边框。这确实会导致“部分循环”的发生，但对我来说，这并不是一个交易破坏者。@ProDexorite添加了另一个没有部分循环的版本