Скругление углов (прозрачность под тенью)

[master_alf]

Приветствую!

Поиском решения не нашел... потому прошу помощи.

Задача такая - нужно сделать обычное скругление углов(левый верхний и левый нижний). НО! из-под краев расходится тень, под которой должна быть прозрачность (фон не однородный, без прозрачности очень криво будет). Т.к. картинки углов получаются длиньше, чем само изображение края (тень же) то из-под них начинают просвечивать background-ы родительских div-ов... и непонятно как это убрать.

Картинку можно глянуть тут

Верстал вот так:

<div id="list"><div><div><div><div> </div></div></div></div></div>

div#list 				{ background: white URL("../img/shadow-page-top.png") repeat-x top left;}
div#list > div 				{ background: URL("../img/shadow-page-bot.png") repeat-x bottom left;}
div#list > div > div			{ background: URL("../img/shadow-page-left.png") repeat-y top left; }
div#list > div > div > div		{ background: URL("../img/shadow-page-corner-top.png") no-repeat top left;}
div#list > div > div > div > div	{ background: URL("../img/shadow-page-corner-bot.png") no-repeat bottom left; width: 200px; height: 200px;}

Я вижу только 2 теоретических способа что бы решить это.

1. Поставить дивы с углами выше, чем дивы с краями, и задать отступы таким образом, что бы дочерние дивы (с прямыми границами) оказались меньшего размера и не могли вылазить поверх. Но это не получается. Фон родительских дивов перебивается дочерними, и z-index тут не помогает. (по крайней мере в FF и IE).

2. Каким-то образом сделать дочерние дивы больше родительских... на конкретное количество пикселей... без использования JScript я даже не могу придумать способа...

Может быть кто-то подскажет решение, которое я не увидел?

Заранее спасибо.

[Switch74]

а можно рисунок как должно быть, и я так и не понял что именно куда вылазит и мешает

[master_alf]

Вот как должно быть

Обычное скругление, вопрос лишь в прозрачности...

Хотя, вроде идея появилась как сделать - пробую реализовать. Отпишусь как закончу.

[Switch74]

не вижу проблем с прозрачностью, если нарезать углы и тени таким образом

Пример нарезки

[master_alf]

Именно так и нарезано, но, т.к. блок этот должен быть резиновым, размеры точно задать нельзя.

А при 100% высоте левого края, так же как и при 100% ширине верха и низа, они начинают выглядывать из-под углов, т.к. там прозрачность.

Я именно это и не могу обойти

[Switch74]

надеюсь сработает Пример

картинки должны быть такими, фон сделал чтобы было видно где находятся блоки

shadow_left.png - горизонтальный градиент из прозрачности в тёмный цвет размер 10х1

shadow_right.png - горизонтальный градиент из прозрачности в тёмный цвет размер 10х1

shadow_top.png - вертикальный градиент из прозрачности в тёмный цвет размер 1х10

shadow_bottom.png - вертикальный градиент из тёмного цвета в прозрачность размер 1х10

если не нравится, что тень выходит за границу блока на 10px, можно сделать её полностью внутри блока - это не проблема указав другое позиционирование для теней, но тогда лучше будет для этого блока оставить прозрачный фон и указать padding, при этом фон указывать для дочернего объекта с контентом.

Edited November 11, 2011 by Switch74

[master_alf]

Очень интересное решение, я даже близко до такого не додумался

Но, т.к. времени свободного мало, сделал таблицей.

Очень даже просто, кросс-браузерно и быстро

Привык верстать блоками... и про таблицы вспоминаю крайне редко Не то бы и вопроса не стояло.

В любом случае большое спасибо за помощь.