Создание коробки с CSS

Question

Как я могу сделать эту коробку в CSS?

может увеличиваться в зависимости от содержания.

http://img824.imageshack.us/img824/1953/box.gif

Спасибо

Answer 1

Я бы предложил использовать четыре элемента div и четыре изображения:

HTML:

<div id="container">
    <div id="top"></div>
    <div id="content"></div>
    <div id="bottom"></div>
</div>

CSS:

#container { background: transparent url(shadow-repeat.jpg) repeat-y; }
#top { background: transparent url(top.jpg) no-repeat; }
#content { background: white url(gradient.jpg) repeat-x; }
#bottom { background: transparent url(bottom.jpg) no-repeat; }

• shadow-repeat.jpg - горизонтальный срез размером 1 пиксель от середины (по вертикали) поля, включающий белую рамку и тень
• top.jpg достаточно высок, чтобы покрыть верхние закругленные углы, и включает желтый фон
• градиент.jpg - вертикальный срез размером 1 пиксель, который включает градиент от нижней части top.jpg к белому
• bottom.jpg достаточно высок, чтобы покрыть нижние закругленные углы, и включает белый фон.

Идея состоит в том, что контейнер имеет белую границу и тень на боковых сторонах, которая повторяется вертикально, давая вам вертикальное расширение.

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

Другой трюк - это горизонтально повторяющийся вертикальный срез градиента. Если div содержимого расположен правильно, вы можете выстроить его так, чтобы он по-прежнему выглядел гладким. Поскольку он также имеет белый фон, он покроет все остатки, которые остаются посередине повторяющимся фоном контейнера.

Это может занять немного возиться с полями и позиционированием, чтобы получить права, но это основная идея

Редактировать Обратите внимание, что вам также нужно будет задать ширину всех div и высоту #top и # bottom.

Answer 2

это будет работать в Firefox. в другом браузере есть похожие свойства, которые могут создать тот же эффект. альтернативный текст http://i28.tinypic.com/2d2d6jc.jpg

<div style="-moz-box-shadow: 0 0 2em gray;-moz-border-radius: 5px;border:4px solid white;">
    <div style="-moz-border-radius: 5px;background:-moz-linear-gradient(top,  #ff0,  #fff);">
                aldskfhaklsdhflkashdfklahsdlkfhaklsdhflka <br/>shdflkjhasdklf alksdgh aklsj klsjd<br/>
                aldskfhaklsdhflkashdfklahsdlkfhaklsdhflka <br/>shdflkjhasdklf alksdgh aklsj klsjd<br/>
                aldskfhaklsdhflkashdfklahsdlkfhaklsdhflka <br/>shdflkjhasdklf alksdgh aklsj klsjd<br/>
                aldskfhaklsdhflkashdfklahsdlkfhaklsdhflka <br/>shdflkjhasdklf alksdgh aklsj klsjd<br/>
                aldskfhaklsdhflkashdfklahsdlkfhaklsdhflka shdflkjhasdklf alksdgh aklsj klsjd<br/>
                aldskfhaklsdhflkashdfklahsdlkfhaklsdhflka shdflkjhasdklf alksdgh aklsj klsjd<br/>
    </div>
</div>

Answer 3

Отделите углы от остальной части изображения.Интерьер (который окрашен) должен быть заменен на прозрачный фон.Таким образом, у вас будет 9 слоев.Нижний слой будет содержать повторяющееся градиентное изображение. Следующие 4 слоя будут содержать верхнюю, правую, нижнюю и левую рамку-изображения с повторением и выравниванием.Последние 4 слоя будут содержать углы.Но при использовании этого метода фон этого поля должен быть однородным (без градиента, без изображения), в противном случае вам придется разместить тень в виде полупрозрачного изображения в PNG, которое не будет работать с закругленными углами и рамкой.Это не будет работать с IE6.

Другой способ - нарисовать таблицу 3х3 с каждым изображением.Этот метод будет работать и с IE6.

Другой способ - это расположить 9 div блока рядом и установить размер не-содержимого div, используя Javascript, считав размер центрального содержимого div,Этот метод также будет работать с IE6.

Все 3 метода предоставляют возможность изменять размер окна как по вертикали, так и по горизонтали, используя CSS2.