трех - тень css
CSS Box Shadow-только верх и низ (4)
Итак, это мой первый ответ здесь, и потому, что мне нужно было что-то подобное, что я делал с псевдоэлементами для двух внутренних теней и дополнительный 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%;
}
Возможный дубликат:
тень только снизу css3
Я не могу найти примеры того, как это сделать, но как добавить тень окна только к вершине и дну элемента?
Как отметил Кристиан, хороший контроль над 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, чтобы убедиться, что тени отображаются правильно во всех браузерах