трех - тень css

Итак, это мой первый ответ здесь, и потому, что мне нужно было что-то подобное, что я делал с псевдоэлементами для двух внутренних теней и дополнительный 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%;
}

Как отметил Кристиан, хороший контроль над 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.

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

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

Легенда : insetOption leftPosition topPosition blurСтрастность распространенияСкорость цвета

Описание
Ключом к выполнению этого является установка значения размытия <= отрицательного значения спреда (например, вставка 0px 5px -? Px 5px # 000, значение размытия должно быть -5 и ниже), а также сохранить значение размытия > 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);   
}

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

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