Я пытаюсь воспроизвести нечто подобное:
Там, где тень от нижней части div-дуги несколько изгибается, поднимаясь выше в центре, а затем сужаясь в ничто дальше.
Интересно, можно ли этого добиться с помощью какого-то эффекта тени в css. В настоящее время у меня есть тень блока, поднимающаяся из нижней части моего div, которая остается плоской на всем протяжении.
Текущая тень блока в соответствии с запросом:
box-shadow: inset 0 -30px 30px -30px #888888;
Любые предложения приветствуются.
Вы можете создать псевдоселектор, который вставляет некоторый контент на страницу, делает его скругленным и применяет к нему тень блока. Обратите внимание на z-index, чтобы он шел за родительским элементом:
http://plnkr.co/edit/UhdRAuJ0VIPHrnufkwm9?p=preview
.shadowy {
position: relative;
width: 100%;
height: 40px;
border: 1px solid black;
margin-top: 100px;
background: white;
}
.shadowy:before {
content: '';
position: absolute;
background: transparent;
top: 0;
left: 10%;
width: 80%;
height: 20px;
box-shadow: 0 0 30px black;
border-radius: 100%;
z-index: -1;
}
Вот решение, использующее радиальный градиент для создания тени. Mine использует размеры в пикселях, это можно изменить на процент, если вы хотите, чтобы он занимал всю страницу, а не под ссылками в тексте / меню.
.menu {
height: 100px;
background: radial-gradient(ellipse 100% 7% at 50% 100%, rgba(55, 55, 55, 0.5) 200px, rgba(55, 55, 55, 0.1) 360px, white 380px);
text-align: center;
}
.menu .menu-item {
padding-left: 2%;
padding-right: 2%;
}<header class="menu">
<h1>Rolex</h1>
<span class="menu-item">watches</span>
<span class="menu-item">about rolex</span>
<span class="menu-item">world of rolex</span>
<span class="menu-item">retailers</span>
<span class="menu-item">whishlist</span>
</header>поместите это class box-shadow: 0 10px 6px -6px #777;
