CSS - Как настроить тень тени градиента?

У меня есть тень градиента, которая использует два разных изображения. Один с каждой стороны. Как установить OutsideContainer относительно размера Center? Таким образом, когда расширяется содержимое Центра, увеличивается OutsideContainer.CSS - Как настроить тень тени градиента?

Таким образом, мои градиенты отображаются во всей области содержимого.

.Left 
{ 
    background-image:url(themes/Light/images/BorderLeft.gif); 
    background-repeat:repeat-y; 

    float:left; 
    background-color:#FF0000;/*Colors work in place of having the picture*/ 
    height:100%; 
    width:8px; 
} 
.Center 
{  
    float:left;  
    background-color:#FFFFFF; 
    width:745px; 
} 
.Right 
{ 
    background-image:url(themes/Light/images/BorderRight.gif); 
    background-repeat:repeat-y; 
    float:left; 
    background-color:#00FF00;/*Colors work in place of having the picture*/ 
    height:100%; 
    width:8px; 
} 
.OutsideContainer 
{ 
    margin:0 auto; 
    width:761px; 
    height:200px; 
} 

<body> 
<div class="OutsideContainer"> 
    <div class="Left"></div> 
    <div class="Center">blah blah <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />blah<br /></div> 
    <div class="Right"></div> 
</div> 
</body>

источник

2011-08-11 P.Brian.Mackey

Лучший способ делать то, что вы пытаетесь сделать, это дать отступы для внешней коробки ширины left и right удалить левый и правый дивы и использовать фоновое изображение с обеих сторон, установленных в ваша установленная внешняя ширина div с прозрачным фоном, где находится фактический div. что-то вроде этого:

enter image description here

И CSS будет выглядеть так:

.Center 
{  
    float:left;  
    background-color:#FFFFFF; 
    width:771px; 
} 
.OutsideContainer 
{ 
    padding: 0px 8px 0px 8px; 
    background: url('picture.png') repeat-y; 
    margin:0 auto; 
    width:761px; 
    overflow: hidden; 
}

HTML:

<body> 
<div class="OutsideContainer"> 
    <div class="Center">blah blah <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />blah<br /></div> 
</div> 
</body>

Это может быть единственным способом сделать это с помощью CSS.

источник

2011-08-11 20:50:54 Nayish

Если я убираю ширину, я теряю центрирование, созданное OutsideContainer (думаю, что div просто игнорируется). Если я укажу min-height вместо высоты, я потеряю «Left» и «Right». Я добавил «переполнение». Я все еще не могу добиться результата. Я хочу фиксированную ширину, динамическую высоту. –

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

У меня уже есть фиксированная высота, которая рассчитывается от родителя, «OutsideContainer». Я не вижу, как перемещение высоты до «Левого» и «Правого» решает что угодно. Вы пытаетесь сказать, что это просто невозможно? –

CSS - Как настроить тень тени градиента?

ответ

Смежные вопросы