html - 单个div中的不同边框

Question

我在使用 css 在我的 div 中设置不同边框时遇到问题。我需要一张在 div 的左侧、顶部和右侧具有“正常”实心边框的卡片 (div)。但是，在底部，我需要一个特定的边框图像。

我可以在底部边框或三边的“正常”边框中显示图像，但我不知道如何同时显示两者。

当我放置图像时，它会到达所有边界。

我在底部图像边框上使用了以下代码:

border-width: 0px 0px 32px 0px;
-moz-border-image: url(../images/bordas/Recorte.png) 31 25 33 26 repeat;
-webkit-border-image: url(../images/bordas/Recorte.png) 31 25 33 26 repeat;
-o-border-image: url(../images/bordas/Recorte.png) 31 25 33 26 repeat;
border-image: url(../images/bordas/Recorte.png) 31 25 33 26 fill repeat;

你知道有什么方法可以在三个边上有一个正常的实心边框，在底部边框上有一个图像吗？

如果我将 border-width 更改为大于零，则会出现图像，而不是正常的实心边框。

提前致谢!

Answer 1

您可以使用 :after 来模拟这种效果。

div {
  border: 1px solid black;
  border-bottom: 0px;
}
div:after {
  content: '';
  width: calc(100% + 2px);
  margin-left: -1px;
  background: white;
  display:block;
  background-image: url(https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=2bb144720a66);
  background-repeat: repeat;
  height: 10px;
}

<div>test</div>