Как сделать рамку из текстуры?

[zusicks438]

Возникла необходимость сделать рамку вокруг div'а, примерно вот так: http://miron.in/images/untitl-1319037614.png

Различие в светлых и темных градациях серого можно отбросить, главное сам смысл - текстура с повторяющимся рисунком, обрамляющая блок. Проблема в том, что высота блока заранее неизвестна. Немного подумав (и погуглив) решил попробовать вариант с четыремя вложенными div'ами, каждый из которых можно залить такой текстурой и поставить по периметру. Но тут возникнет другая проблема - ведь текстура может и не совпасть.

Еще читал про border-image, но он в IE вообще не работает.

Что можно попробовать в такой ситуации?

[dostel1]

а 2 дива?

<div style="padding:5px;background:url() repeat;">

<div></div>

</div>

[zSpx]

<div class="a">
  <div class="b">любой контент</div>
</div>

.a {background: url(_ваша_текстурка_);}
.b {margin:10px;background: #fff; }

Не успел)

Edited October 19, 2011 by zSpx

[zusicks438]

Гм...сейчас осмыслю и попробую

[zusicks438]

А, это я тормознул. На самом деле ведь будет еще постепенное увеличение прозрачности внутри рамки, то есть примерно так: http://miron.in/images/untitl-1319040187.png (правда тут не постепенно, но суть та же остается).

И поэтому тут двумя div'ами вроде и не получается

[SelenIT]

Если ориентироваться на IE8+, в принципе, можно и одним дивом обойтись, с градиентом вместе. Но для въедливого заказчика, пожалуй, лучше сделать с оберткой.

[zSpx]

Только что открыл для себя, что IE8 для after и before псевдоэлементов не умеет применять фильтр прозрачности=/

[SelenIT]

IE9, похоже, тоже И ведь не прикопаешься — фильтры в CSS 2.1 не входят, так что заявленная "полная поддержка" как бы и не задета...

[psywalker]

IE9, похоже, тоже И ведь не прикопаешься — фильтры в CSS 2.1 не входят, так что заявленная "полная поддержка" как бы и не задета...

Блин, поскорее бы уже ИЕ10 допилили, там столько вкусненького и интересного...ммм...