的box-shadow弧CSS

我試圖複製與此類似：的box-shadow弧CSS

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

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

當前的box-shadow：

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

知道的任何建議。

來源

2015-12-08 Aphire

請分享你已經嘗試他們使用的代碼（HTML和CSS） –

和[圖]（http://www.rolex.com/etc/designs/rolex/rolexcom/ clientlib_base/css/images/nav-border-down.png） –

確實如此，但是有沒有辦法在沒有圖像的情況下複製它？ – Aphire

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

來源

2015-12-08 11:20:14 Greg

這看起來像我需要開始。乾杯，你是個紳士。 – Aphire

@Aphire如果你也對底部的箭頭感興趣，我也做了一個模擬http://jsfiddle.net/link2twenty/bvrmdvfk/ –

這很棒，非常感謝 – Aphire

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

來源

2015-12-08 11:21:56

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

來源

2015-12-08 11:36:28 Persijn

的box-shadow弧CSS

回答

相關問題