单个 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>

Answer 2

您可以先设置底部图像的边框，然后再设置其他边。

border-image:url("http://example.com/image1.png");

/* setting borders for other sides */
border-top:1px solid #000;
border-left:1px solid #000;
border-right:1px solid #000;

在其下方设置为其他边的顶部、右侧和左侧。

Answer 3

我实际上可以通过在另一个 div 中添加一个 div 来做到这一点。

.div-outside-class {
border-width: 1px 1px 0px 1px;
border-style: solid;
border-color: #e6e9ee;
border-radius: 10px;
}

.div-inside-class {
border-style: solid;
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;
margin-bottom: -16px;
}

HTML 代码是这样的：

<div class="div-outside-class">
    <div class="div-inside-class>
    </div>
</div>