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