如何设置边框图像？

Question

我有这个HTML代码，其中通过AJAX生成QR码：

<div class="qr-border">
    <p id="qr" class="ajax_qrcode{if $cart_qties < 1} hidden{/if}"></p>
</div>

我想在QR码周围设置边框图像。我有这张图片：

和右角图片：

所以我在CSS中尝试了这个：

div.qr-border p.ajax_qrcode {

    text-align: center;
    padding-bottom: 1.0em;
    float: center;
    border-image: url('../img/qr-code-border/border.png') 27 27 27 27 stretch stretch;
    border-bottom-right-image: url('../img/qr-code-border/corner.png');
}

但没有任何作用......有人有任何建议吗？

谢谢你的帮助！

Answer 1

border-image是CSS3中的一个非常新的属性，据我所知，没有浏览器本身支持它。

但是，您可以使用专有的-webkit-border-image属性在Chrome和Safari中使用它。

编辑：尝试使用firefox的-moz-border-image。

再次编辑：你的css选择器错了，你的问题就出现了。它应该是这样的：

div.qr-border p.ajax_qrcode

您将qr-border类视为ID。

Answer 2

我认为目前在任何浏览器中都不可能。我不知道任何已实施完整规则的浏览器。例如，Webkit似乎只实现了速记border-image属性。因此，您将无法设置单独的右侧图像。

This site最能解释CSS3 border-image的工作原理。它还有一个interactive demo，我可以从中得到以下引用：

  

CSS3中的border-image属性非常复杂。除了简单的边框之外，它实际上就像是9切片缩放。

我实际上并不认为即使浏览器已经实现完整集，因为单个图像被切片的方式，甚至可以用CSS3 border-image做你想做的事情做边界。

Answer 3

如果您只想要一个直的黑色边框，为什么不将图像放在稍大的盒子（div）中并使背景颜色变黑？盒子外面和QR图像之间的边距应该是黑色的，最终应该提供相同的效果吗？除非二维码与透明度有所不同......