Мне нужна пользовательская граница для блока div. Какие способы применить это?

Question

Проблема в том, что размеры блока div и его расположение будут динамически изменяться с помощью JavaScript, а сам блок должен быть прозрачным на 100%.

Посмотрите на картинку, чтобы понять, что я имею в виду. Насколько я знаю, ничего не может быть сделано с помощью чистого CSS, я прав?

Может быть, вы знаете некоторые приемы, которые могли бы мне помочь (кроме того, когда это сделано с четырьмя ящиками по периметру или когда это сделано с вложенными ящиками)?

http://savepic.org/85113.png

Answer 1

Да, если не считать продвинутого множества фоновых изображений и / или рамочных изображений в CSS 3, вам понадобится несколько вложенных элементов div.

Может быть, что-то вроде этого:

<style type="text/css">
.box-1-top,
.box-1-bottom{height: 5px; font-size: 0;/* Make height work in IE */ background: url(box-1-background.gif) left top repeat-x;}

.box-1-left{padding-left: 5px; background: url(box-1-background.gif) left top repeat-y;}
.box-1-right{padding-right: 5px; background: url(box-1-background.gif) right top repeat-y;}
</style>

<div class="box-1">
    <div class="box-1-top"></div>
    <div class="box-1-left">
        <div class="box-1-right">
            Box content here
        </div>
    </div>
    <div class="box-1-bottom"></div>
</div>

Answer 2

В CSS3 вы можете сделать это, применив

Границы изображения

Перед применением взгляните на

Поддержка браузером свойств CSS3