CSS3框陰影在最前，左，右，只有

我想一個CSS3框陰影僅應用於上，右，並與的結果相匹配的半徑留下了DIV的以下CSS（減去底部陰影）

#div { 
    -webkit-box-shadow: 0px 0px 10px #000; 
    -moz-box-shadow: 0px 0px 10px #000; 
    box-shadow: 0px 0px 10px #000; 
}

什麼是最好的方法來實現這一目標？

謝謝！

UPDATE 該陰影將應用於頁面上的導航欄，該欄位於主容器DIV的頂部。我試圖完成的工作是將主DIV的盒形陰影繼續放置在位於其上方的導航欄上，但沒有導航欄上的底部陰影。看看site itself看看我在說什麼，比在這裏添加所有的HTML和CSS更容易。

更新2 由於我一起工作的DIV是單數，而不是試圖把每個導航裏的過客，我當選爲它更改爲以下：

-webkit-box-shadow: 0px -4px 7px #e6e6e6; 
    -moz-box-shadow: 0px -4px 7px #e6e6e6; 
    box-shadow: 0px -4px 7px #e6e6e6;

這使得陰影頂部非常明顯，但這是我想要完成的 - 如果有人知道一種方法來保持陰影與容器DIV外觀相同，請讓我知道。謝謝！

來源

2011-02-05 NightMICU

好的，而不是做一個又一個編輯 - 稍微調整一下，現在距離很近 - '0px -2.6px 7px＃e6e6e6;`。我希望在張貼之前我已經更多地擺弄了定位，但我對CSS3還很陌生。 – NightMICU 2011-02-05 22:00:14

如果你只是用另一個div覆蓋底部部分，你會得到一致的陰影效果。

#servicesContainer { 
    /*your css*/ 
    position: relative; 
}

它是固定的！像魔術一樣！

來源

2011-02-06 21:49:30 Duopixel

謝謝:)接受的解決方案，因爲它在技術上修復了導航下出現在`＃DIV mainContainer`陰影的問題，但它實際上最終產生了另一個問題 - 從'影子＃mainContainer`重疊導航欄。同樣的問題，不同的位置大聲笑。噢，好吧 – NightMICU 2011-02-07 01:38:18

我沒有看到它，可能是因爲我在Chrome上查看它。你可以在#servicesContainer的頂部添加一個新的div，給它一個＃2A0808的背景顏色;和適用位置：相對於新的div。它將達到相同的效果而不會重疊陰影。 – Duopixel 2011-02-07 01:47:52

添加一個單獨的答案，因爲它完全不同。

您可以使用rgba並將alpha通道設置得較低（以獲得透明度），以使您的投影更加明顯。

嘗試是這樣的（與.5玩）

-webkit-box-shadow: 0px -4px 7px rbga(230, 230, 230, .5); 
-moz-box-shadow: 0px -4px 7px rbga(230, 230, 230, .5); 
box-shadow: 0px -4px 7px rbga(230, 230, 230, .5);

希望這有助於！

來源

2011-02-06 15:16:59 jdhartley

謝謝:)客戶使用Firefox，我檢查了你的建議，不幸的是它使它更明顯。我想我最終結束了（見我的問題的評論）是我將要得到的最接近的結果。但是我會稍微嘗試一下你的答案，可能對未來的項目有用。再次感謝:) – NightMICU 2011-02-06 20:12:23

支持box-shadow的瀏覽器也支持rgba！：P – 2012-05-30 10:18:11

良好的通話，更新 – jdhartley 2012-05-30 18:37:26

使用推廣價值...

的box-shadow具有以下值

box-shadow: x y blur spread color;

，所以你可以使用類似..

box-shadow: 0px -10px 10px -10px black;

UPDATE：我加入一個jsfiddle

來源

2012-02-28 21:46:22 Orlando

您可以到箱陰影財產
如

-moz-box-shadow: 0px 10px 12px 0px #000, 
        0px -10px 12px 0px #000; 
-webkit-box-shadow: 0px 10px 12px 0px #000, 
        0px -10px 12px 0px #000; 
box-shadow: 0px 10px 12px 0px #000, 
      0px -10px 12px 0px #000;

它是陰影，以左邊給多個值和只有只，你c在它適應您的要求

來源

2012-11-13 13:43:26

這是偉大的，這就隱藏了我的底部陰影（覆蓋白色的影子在其上）的box-shadow：0像素加上了8px 0像素-1px #FFFFFF，0像素0像素1rem 0像素RGBA（0，0，0，0.26）; – 2017-02-10 10:13:38

我找到了一種方法來覆蓋陰影「：後」，這裏是我的代碼：

#div:after { 
    content:""; 
    position:absolute; 
    width:5px; 
    background:#fff; 
    height:38px; 
    top:1px; 
    right:-5px; 
}

來源

2013-03-14 08:23:48 yichengliu

下面的代碼爲我做作出的陰影插圖右側：

-moz-box-shadow: inset -10px 0px 10px -10px #000; 
-webkit-box-shadow: inset -10px 0px 10px -10px #000; 
box-shadow: inset -10px 0px 10px -10px #000;

希望這將有助於!!!!

來源

2013-03-21 07:14:14

我有同樣的問題，並正在尋找一個可能的想法來解決這個問題。

我有一些CSS已經到位了我的標籤，這是對我工作：

（注特別是padding-bottom: 2px;內#tabs #selected a {那整齊地隱藏了底部box-shadow和我用下面的CSS偉大的工作。）

#tabs { 
    margin-top: 1em; 
    margin-left: 0.5em; 
} 
#tabs li a { 
    padding: 1 1em; 
    position: relative; 
    top: 1px; 
    background: #FFFFFF; 
} 
#tabs #selected { 
    /* For the "selected" tab */ 
    box-shadow: 0 0 3px #666666; 
    background: #FFFFFF; 
} 
#tabs #selected a { 
    position: relative; 
    top: 1px; 
    background: #FFFFFF; 
    padding-bottom: 2px; 
} 
#tabs ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 
#tabs li { 
    float: left; 
    border: 1px solid; 
    border-bottom-width: 0; 
    margin: 0 0.5em 0 0; 
    border-top-left-radius: 3px; 
    border-top-right-radius: 3px; 
}

以爲我會把它作爲另一個可能的解決方案，讓任何人都可以爲此做好準備。

來源

2015-03-12 00:17:36 Mikolaj

我知道這是非常古老的，但這些答案都沒有幫助我，所以我添加了我的答案。這就像@ yichengliu的回答一樣，使用了僞::after元素。

#div { 
    position: relative; 
} 



#div::after { 
    content: ''; 
    position: absolute; 
    right: 0; 
    width: 1px; 
    height: 100%; 
    z-index: -1; 

    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,1); 
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,1); 
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,1); 
} 

/*or*/ 

.filter.right::after { 
    content: ''; 
    position: absolute; 
    right: 0; 
    top: 0; 
    width: 1px; 
    height: 100%; 
    background: white; 
    z-index: -1; 

    -webkit-filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 1)); 
    filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 1)); 
}

Fiddle

如果您決定更改陰影的X（該drop-shadow或box-shadow的第一像素測量），改變寬度將有助於所以它看起來並不像有一個白色的div和shadow之間的差距。

如果您決定更改投影的Y（drop-shadow或box-shadow或box-shadow的第二像素尺寸），更改高度將有助於出於上述相同的原因。

來源

2016-01-17 02:06:53 Jaketr00

#div:before { 
content:""; 
position:absolute; 
width:100%; 
background:#fff; 
height:38px; 
top:1px; 
right:-5px; 
}

來源

2016-10-21 08:01:29

CSS3框陰影在最前，左，右，只有

回答

相關問題