我们可以为 div 的每一侧设置不同的边框图像吗？答案

【问题标题】：can we set different border-image for every side of div?我们可以为 div 的每一侧设置不同的边框图像吗？
【发布时间】：2016-05-31 22:51:03
【问题描述】：

我正在尝试使用border-image 属性制作一个带有相框设计的div。
frame.jpg
它是左侧框架图像。谁能建议我如何将它应用到右侧？

我对使用 javascript 来处理它不感兴趣..
请CSS3解决方案...

【问题讨论】：

可能已经回答了。看this
对不起。但这不是我的解决方案
如果您已经在左侧使用了它，为什么还要向我们展示您的代码？
它还没有工作。我刚刚上传了一个左框架的演示图像。

标签： css

【解决方案1】：

虽然您可能认为浏览器会假设“获取此图像并将其平铺”，但您错了。 Border-image 比这更通用，并提供各种方法来切片和切块相同的图像以获得非常不同的结果。 CSS3 border-image 属性对您提供的图像所做的假设并不直观！从阅读本文开始，以获得对边框图像的每个单独属性的出色解释：CSS-Tricks: border-image。

.mydiv {
  padding: 20px 38px;
  border-image-source: url(http://i.stack.imgur.com/LR2X0.jpg);
  border-image-width: auto;
  border-image-repeat: repeat;
}

<div class="mydiv">
  <h1>
    Headline: Breaking News!
  </h1>
</div>

在您对该属性有所了解之前，我建议您单独设置每个部分（而不是使用综合速记属性 - 例如设置边框宽度、边框样式和边框颜色，而不是仅使用边框）。您还可以尝试使用this border-image generator ，这是一种了解浏览器如何对您的图像进行切片和切块的感觉的好方法。

【讨论】：

您已经非常接近答案了。但请看右边。它仍然看起来像左侧......有任何解决方案吗？
您查看了边界生成器链接吗？它显示了您的图像是如何被切片的。为了以您想要的方式对其进行切片（大概是为了使图像翻转到另一侧），您必须提供一个可以翻转的图像。（所以让你的左侧和右侧并排在同一个图像中。你不能告诉它使用这个和使用那个 - 你只得到一个图像源设置。）