CSS3 окна тень вопрос

Question

Используя этот CSS для теней

-moz-box-shadow: 0 0 10px 5px #000; 
-webkit-box-shadow: 0 0 10px 5px #000; 
box-shadow: 0 0 10px 5px #000; 

Как удалить тень от верхних и нижних сторон DIV и оставить только горизонтальную тень? Это возможно?

Answer 1

Существует два способа сделать это, но это зависит от того, ищете ли вы жесткий край или мягкий край.

Метод один:

Хитрость здесь было бы обернуть коробку в контейнер и применить overflow:hidden к контейнеру. Если вы дадите поле справа и слева, то же самое, что и теневое расстояние, тень будет видна только по бокам; он будет обрезаться сверху и снизу.

Вот пример: http://jsfiddle.net/2Luef/1/

Способ второй:

В качестве альтернативы, в зависимости от эффекта, который вы ищете, вы могли бы сделать что-то с несколькими билетных тени, как это: http://jsfiddle.net/2Luef/3/

У него нет обрезки, как показано выше, но это, возможно, более приятный вид. Он также использует только один элемент DOM.

Answer 2

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

box-shadow: 10px 0 10px -10px #000, -10px 0 10px -10px #000; 

Для получения дополнительной информации, проверка этих двух ссылок:

• How can I add a box-shadow on one side of an element?
• http://starikovs.com/2011/11/09/css3-one-side-shadow/

Answer 3

Да и нет. Тень коробки не может быть местами с одной стороны элемента, если только вы не смещаете ее и/или не меняете спред, что, по моему мнению, не совсем то, что вам нужно.

Однако вы можете разместить элемент внутри контейнера с установленным на нем переполнением. Свойство переполнения влияет на тень окна. Here's an example.

Answer 4

Написать так:

CSS:

.parent{ 
height:200px; 
margin:40px; 
    overflow:hidden; 
} 
.child{ 
width:200px; 
height:200px; 
background-color:#e0ffff; 
-moz-box-shadow: 0 0 10px 5px #000; 
-webkit-box-shadow: 0 0 10px 5px #000; 
box-shadow: 0 0 10px 5px #000; 
margin:0 20px; 
} 

HTML

<div class="parent"> 
    <div class="child"></div> 
</div> 

проверить это http://jsfiddle.net/k9kVZ/2/