我如何设置边框图像？ [英] How do I set a border-image?

问题描述

我有这个通过AJAX生成QR码的HTML代码：

 < div class =qr -border> 
< p id =qrclass =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伸展伸展; 
 border-bottom-right-image：url（'../ img / qr-code-border / corner.png'）; 
} 
  

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

感谢您的帮助！

解决方案

我不认为这是可能的在任何浏览器中的时刻。我不知道任何已经实施了全套规则的浏览器。例如，Webkit似乎只实现了简写 border-image 属性。因此，您将无法设置单独的右图。

这个网站对CSS3边框图像的工作方式有最好的解释。它还有一个交互式演示，我从中获取以下报价：

CSS3中的border-image属性非常复杂。超越一个简单的边界，它真的像9切片缩放。

我并不认为甚至有可能做到即使浏览器有实现了全套设置，由于单个图像被切分为边框的方式，您还是希望使用CSS3边框图像。

I have this HTML code in which a QR-code is generated via AJAX :

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

and I would like to set a border image around the QR-code. I have this image :

and a right corner image :

So I tried this in the 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');
}

but nothing works... Do someone has any suggestion ?

thank you for your help !

解决方案

I don't think it's possible at the moment in any browser. I don't know of any browser that has implemented the full set of rules. Webkit, for example only seems to have implemented the shorthand border-image property. So you will not be able to set a separate right image.

This site has the best explanation of how CSS3 border-image works. It also has an interactive demo from which I take the following quote:

The border-image property in CSS3 is freakin' complicated. Way beyond a simple border, it is really like 9-slice scaling.

I don't actually think it's even possible to do what you want with CSS3 border-image even if a browser had implemented the full set due to the way in which a single image is sliced up to make a border.

这篇关于我如何设置边框图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！