3-сторонняя тень от верхней части двухсторонней тени - PullRequest
Новая
       10

3-сторонняя тень от верхней части двухсторонней тени

0 голосов
/ 10 марта 2012

Я пытаюсь создать двухстороннюю тень от двух отдельных элементов, зажатую трехсторонней тенью снизу и трехсторонней теней сверху. Как на картинке ниже:

enter image description here

Я близок, но, как вы видите, между 3-м и 4-м элементами есть небольшая проблема с пространством, и верхняя тень по какой-то причине останавливается посередине ... вот CSS, который у меня есть : 

#tile1{
-webkit-box-shadow: 7px 0 5px  #319a00 , -7px 0 5px  #319a00, 0 -2px 5px 5px #319a00;
 }

  #tile2{
-webkit-box-shadow: 7px 0 5px  #319a00 , -7px 0 5px  #319a00;
  }

 #tile3{
-webkit-box-shadow: 7px 0 5px  #319a00 , -7px 0 5px  #319a00;
 }

 #tile4{
 -webkit-box-shadow: 7px 0 5px  #319a00 , -7px 0 5px  #319a00, 0 3px 5px 5px #319a00;
}

Есть идеи, как это сделать? Я не могу просто поставить тень на весь div, потому что у меня будет возможность переключать эти элементы.

1 Ответ

0 голосов
/ 21 марта 2012

Вы МОЖЕТЕ нанести тень на весь div, даже если собираетесь переключать эти внутренние элементы. Все, что вам нужно сделать, - это добавить свойство min-height (сделать его равным высоте, когда все блоки выключены) в вашем div вместо свойства height, и оно будет работать.

...