1

我在使用 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为大于零，则会出现图像，而不是正常的实心边框。

提前致谢！

4

3 回答 3

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>

于 2017-09-20T17:03:58.307 回答
0

实际上，我可以通过在另一个 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>
于 2017-09-20T18:03:39.693 回答
0

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

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;

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

于 2017-09-20T17:00:31.087 回答