是否可以将border-color与border-image结合在同一个元素中？

Question

在CSS中，完全可以组合背景图像和背景颜色，我经常使用它来为背景颜色设置元素并在其上面放置一个半透明图案，就像我使用导航栏一样：

background-color: #fa4457;
background-image: url(../images/pattern/overlay.png);

或简写

background: #fa4457 url(../images/pattern/overlay.png);

下图显示我的导航栏同时具有背景颜色和背景图像以创建类似纸张的效果，但所选菜单项具有纯色的白色底边。

如果我使用此代码，它看起来像这样

border-image: url(../images/pattern/overlay.png) 0 0 10 repeat;

我能否以某种方式将其与

结合起来

border-bottom: 10px solid #fff;

或者有什么方法不涉及创建额外的元素？

Answer 1

你说不想创建额外的元素，但是可能只是使用伪元素？喜欢：在你的物品之前或之后 http://www.smashingmagazine.com/2011/07/learning-to-use-the-before-and-after-pseudo-elements-in-css/

Answer 2

好的，我已经找到了解决办法。

此：

{{1}}

结果如下：

感谢justtry指向我使用伪元素的正确方向。我仍然不太明白他们为什么会这样做。