的box-shadow弧CSS

Question

我試圖複製與此類似：

凡從DIV弧線有點底部的陰影，位於中心更高，然後淡出到什麼進一步。

我不知道這是否可以用css中的某種盒子陰影效果來實現。 目前，我有一個箱子的陰影從我的div的底部，沿着整個方向保持平坦。根據要求

當前的box-shadow：

box-shadow: inset 0 -30px 30px -30px #888888; 

知道的任何建議。

Answer 1

您可以創建一個僞選擇器，將一些內容插入到頁面中，使其四捨五入並將框陰影應用於它。注意的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; 
} 

Answer 2

把這個classbox-shadow: 0 10px 6px -6px #777;

Answer 3

下面是一個使用徑向漸變創建陰影的解決方案。 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>