Question

我试图通过使用border-image属性来制作带有相框设计的div。
frame.jpg
它是左侧帧图像。任何人都可以建议我如何将它应用到右侧？

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

Answer 1

虽然您可能认为浏览器会假设“拍摄此图像并将其全部放在一边”，但您错了。边框图像比这更通用，并提供各种方法来切割和切割相同的图像以获得非常不同的结果。 CSS3 border-image属性对您提供的图像的假设并不直观！首先阅读本文，以获得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 ，这是一种很好的方式来了解浏览器如何切割和切割图像。

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

1 个答案: