Question

我在使用css在我的div中有不同的边框时遇到问题。我需要一张卡片（div），它有正常的＆＃34; div左侧，顶部和右侧的实线边框。但是，在底部，我需要一个特定的边框图像。

我可以将图像放在底部边框或“＃34; normal＆＃34;三面边界，但我不知道如何同时兼得。

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

我使用以下代码到底部图像边框：

       S   Q
A  B        
A1 B1  0  10
   B2  0  16
A2 B1  5  24
   B2  0   4

你知道三面都有正常的实心边框，底边有图像吗？

如果我将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;更改为大于零，则会显示图像，而不是正常的实线边框。

提前致谢！

Answer 1

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

＆＃13;

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;
}

＆＃13;

<div>test</div>

＆＃13;

Answer 2

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

auto

在其下方设置顶部，左侧和右侧的其他侧面。

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>

单个div中的不同边框

3 个答案: