CSS3問題：如何在div頂部沒有盒子陰影？

現在，當我這樣做：CSS3問題：如何在div頂部沒有盒子陰影？

-moz-box-shadow: 0 0 200px #00C0FF; 
-webkit-box-shadow: 0 0 200px #00C0FF; 
box-shadow: 0 0 200px #00C0FF;

它給所有側的箱型的影子。我想要三面而不是頂面。如何防止陰影出現在頂部？

來源

2011-04-14 Laila

如果您可以嵌套兩個div，那麼您應該能夠使用邊距和overflow:hidden的組合來「砍掉」頂部陰影，而不會在其他邊緣上丟失所需的效果。

例如，這加價：

<div class="outer"> 
    <div class="inner">hello</div> 
</div>

而這個CSS

.outer { 
    margin-top: 200px; 
    overflow: hidden; 
} 

.inner { 
    width:200px; 
    height: 200px; 
    margin: 0 200px 200px 200px; 
    -moz-box-shadow: 0px 5px 200px #00C0FF; 
    -webkit-box-shadow: 0px 5px 200px #00C0FF; 
    box-shadow: 0px 5px 200px #00C0FF; 
}

給出了這樣的結果 - http://jsfiddle.net/ajcw/SLTE7/2/

來源

2011-04-14 15:17:42 ajcw

這比Syafiq Zianal的答案沒有什麼用處，因爲它需要更多的標記，更多的CSS，如果你沒有完全控制標記，根本不會工作。 – Akrikos 2016-10-27 20:08:28

您也可以使用z-index的相同原理（切除陰影）。我使用z-index作爲我的標籤設置。只要確保你包含位置支撐或z-index沒有任何作用。 – Rokit 2017-04-08 12:41:18

如果你想精確地使用你現有的box-shadow但剪輯它的一部分，這會更有用。（Syafiq的答案會移動陰影以去除「頂部」陰影，如果你對一側的陰影稍微大一些，那麼這個陰影就會起作用） – Secret 2017-10-31 08:58:55

只要有一個vertical offset only：

.shadow { 
    -moz-box-shadow: 0px 5px 200px #00C0FF; 
    -webkit-box-shadow: 0px 5px 200px #00C0FF; 
    box-shadow: 0px 5px 200px #00C0FF; 
}

這將向下移動的影子，使頂部具有更小的陰影。你將不得不按照你想要的方式玩它。 This site對框陰影也有一些很好的信息，比如分層和瀏覽器支持。

來源

2011-04-14 15:10:53 cdeszaq

cdeszaq是正確的。您需要將中心向下移動以改變0 0部分。 – Edwin 2011-04-15 11:46:22

這實際上*不是*正確的，因爲它會導致*底部*陰影然後是5px太大。我認爲OP的目標就是他已經應用的影子尺寸，只是沒有頂部。 – robmclarty 2013-11-26 18:38:15

@robmclarty - 對，我的解決方案並不能爲OP的情況提供確切的解決方案，但改變陰影的想法是最重要的部分。 – cdeszaq 2013-11-26 21:50:09

的box-shadow支持多個逗號這意味着這是可能的，並可如下所示：

box-shadow: 2px 2px 3px #888, -2px 2px 3px #888;

第一組將影子右移&底部，而第二組將影子左移（使用負值）&底部。

跨瀏覽器支持的完整源代碼：

-moz-box-shadow: 2px 2px 3px #888, -2px 2px 3px #888; 
-webkit-box-shadow: 2px 2px 3px #888, -2px 2px 3px #888; 
box-shadow: 2px 2px 3px #888, -2px 2px 3px #888;

來源

2013-06-03 15:26:00

CSS3問題：如何在div頂部沒有盒子陰影？

回答

相關問題