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

Question

在 CSS 中，结合背景图像和背景颜色是完全可能的，我经常使用它来为具有背景颜色的元素设置样式并在其上放置半透明图案，就像我做的那样使用我的导航栏：

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

或shorthand

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

你说不想创建额外的元素，但也许只是使用伪元素？像 :before 或 :after 在你的物品上， http://www.smashingmagazine.com/2011/07/learning-to-use-the-before-and-after-pseudo-elements-in-css/

Answer 2

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

这个：

background: white url(../images/pattern/overlay.png) repeat;
border-bottom: 10px solid rgba(0,0,0,0);

结果：

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

Is it possible to combine border-color with border-image in same element?