CSS3 box shadow shadow

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

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

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

Answer 2

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

Метод первый:

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

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

Метод второй:

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

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

Answer 3

Напишите так:

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/

Answer 4

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

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

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

• Как добавить тень для коробкина одной стороне элемента?
• http://starikovs.com/2011/11/09/css3-one-side-shadow/