Как установить изображение границы?

Question

У меня есть этот HTML-код, в котором QR-код генерируется через AJAX:

<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

Я не думаю, что это возможно в данный момент в любом браузере.Я не знаю ни одного браузера, в котором реализован полный набор правил.Например, только в Webkit реализовано свойство border-image.Таким образом, вы не сможете установить отдельное правильное изображение.

Этот сайт имеет лучшее объяснение того, как работает CSS3 border-image.Он также имеет интерактивную демонстрацию , из которой я беру следующую цитату:

Свойство border-image в CSS3 чертовски сложно.За пределами простой границы это действительно похоже на 9-фрагментное масштабирование.

Я даже не думаю, что с помощью CSS3 border-image даже можно сделать то, что вы хотите, даже если браузер реализовал полный набор из-за способа нарезки отдельного изображения для создания границы.

Answer 2

Если вы просто хотите получить прямую черную рамку, почему бы просто не поместить изображение в немного большую рамку (div) и сделать цвет фона черным? Поле между внешней частью рамки и QR-изображением должно быть черным, и в конечном итоге должно обеспечивать такой же эффект, верно? Если QR-коды не работают по-разному с прозрачностью ...

Answer 3

border-image - это очень новое свойство в CSS3, и, насколько я знаю, ни один браузер не поддерживает его изначально.

Однако вы, вероятно, можете заставить его работать в Chrome и Safari, используя вместо этого собственное свойство -webkit-border-image.

Редактировать: попробуйте также -moz-border-image для firefox.

Снова отредактируйте: ваш селектор CSS неправильный, есть ваша проблема. Это должно выглядеть так:

div.qr-border p.ajax_qrcode

Вы рассматривали класс qr-border как идентификатор.