CSS Box Shadow - только верх и низ

Возможный дубликат:
снижать тень только снизу css3

Я не могу найти примеры того, как это сделать, но как добавить тень окна только к вершине и дну элемента?

Ответ 1

Как отметил Кристиан, хороший контроль над z-значениями часто решает ваши проблемы.

Если это не сработает, вы можете взглянуть на CSS Box Shadow Bottom Only на использование переполнения, скрытого для скрытия избыточной тени.

Я также хотел бы иметь в виду, что свойство box-shadow может принимать список теней, разделенных запятыми:

box-shadow: 0px 10px 5px #888, 0px -10px 5px #888;

Это даст вам некоторый контроль над "количеством" тени в каждом направлении.

Посмотрите http://www.css3.info/preview/box-shadow/ для получения дополнительной информации о box-shadow.

Надеюсь, это было то, что вы искали!

Ответ 2

После некоторого эксперимента я обнаружил, что четвертое значение в строке контролирует разброс (по крайней мере, в FF 10). Я выступал против вертикальных смещений и дал им отрицательный спред.

Здесь рабочее перо: http://codepen.io/gillytech/pen/dlbsx

<html>
<head>
<style type="text/css">

#test {
    width: 500px;
    border: 1px  #CCC solid;
    height: 200px;

    box-shadow: 
        inset 0px 11px 8px -10px #CCC,
        inset 0px -11px 8px -10px #CCC; 
}
</style>
</head>
<body>
    <div id="test"></div>
</body>
</html>

Это отлично работает для меня!

Ответ 3

Итак, это мой первый ответ здесь, и потому, что мне нужно что-то подобное, что я сделал с псевдоэлементами для 2 внутренних теней и дополнительный DIV для верхней внешней тени. Не знаю, являются ли это лучшими решениями, но, возможно, это поможет кому-то.

HTML

<div class="shadow-block">
 <div class="shadow"></div>
  <div class="overlay">
  <div class="overlay-inner">
    content here
  </div>
 </div>
</div>

CSS

.overlay {
    background: #f7f7f4;
    height: 185px;
    overflow: hidden;
    position: relative;
    width: 100%; 
}

    .overlay:before {
        border-radius: 50% 50% 50% 50%;
        box-shadow: 0 0 50px 2px rgba(1, 1, 1, 0.6);
        content: " ";
        display: block;
        margin: 0 auto;
        width: 80%;
    }

    .overlay:after {
        border-radius: 50% 50% 50% 50%;
        box-shadow: 0 0 70px 5px rgba(1, 1, 1, 0.5);
        content: "-";
        display: block;
        margin: 0 auto;
        position: absolute;
            bottom: -65px;
            left: -50%;
            right: -50%;
        width: 80%;
    }

    .shadow {
        position: relative;
        width:100%;
        height:8px;
        margin: 0 0 -22px 0;
        -webkit-box-shadow: 0px 0px 50px 3px rgba(1, 1, 1, 0.6);
        box-shadow: 0px 0px 50px 3px rgba(1, 1, 1, 0.6);
        border-radius: 50%;
    }

Ответ 4

Я играл с ним, и я думаю, что у меня есть решение. В следующем примере показано, как установить Box-Shadow, чтобы он отображал только тень для вставки сверху и снизу элемента.

Легенда: insetOption leftPosition topPosition blurStrength spreadStrength color

Описание
Ключом к выполнению этого является установка значения размытия как <= отрицательного значения спреда (например, вставка 0px 5px -? Px 5px # 000, значение размытия должно быть -5 и ниже), а также сохранить размытие value > 0 при вычитании из основного значения позиционирования (например, с использованием примера сверху, значение размытия должно быть -9 и выше, что дает нам оптимальное значение для размытия между -5 и -9).

Решение

.styleName {   
/* for IE 8 and lower */
background-color:#888; filter: progid:DXImageTransform.Microsoft.dropShadow(color=#FFFFCC, offX=0, offY=0, positive=true);  

/* for IE 9 */ 
box-shadow: inset 0px 2px -2px 2px rgba(255,255,204,0.7), inset 0px -2px -2px 2px rgba(255,255,204,0.7); 

/* for webkit browsers */ 
-webkit-box-shadow: inset 0px 2px -2px 2px rgba(255,255,204,0.7), inset 0px -2px -2px 2px rgba(255,255,204,0.7); 

/* for firefox 3.6+ */
-moz-box-shadow: inset 0px 2px -2px 2px rgba(255,255,204,0.7), inset 0px -2px -2px 2px rgba(255,255,204,0.7);   
}

Ответ 5

по существу тень - это форма окна, только что смещенная за фактическим полем. для того, чтобы скрыть части тени, вам нужно создать дополнительные divs и установить их z-индекс над затененным полем, чтобы тень не была видна.

Если вы хотите иметь особый контроль над своими тенями, создайте их как изображения и создайте контейнеры div с нужным количеством дополнений и полей. Затем используйте png fix, чтобы убедиться, что тени правильно отображаются во всех браузерах