從底部移除盒子的陰影

如果我不想在底部有盒子陰影，我該如何更改我的CSS？從底部移除盒子的陰影

我正在使用這個，但我有<sections>，其中部分之間的底部有陰影。我不想那樣，所以我想擺脫僅在底部的陰影。

當前CSS是：

-webkit-box-shadow: 0 5px 19px 2px rgba(0,0,0,0.1); 
-moz-box-shadow: 0 5px 19px 2px rgba(0,0,0,0.1); 
    box-shadow: 0 5px 19px 2px rgba(0,0,0,0.1);

來源

2013-10-22 James Anderson

不可能的，因爲是基於單元的整個邊界上產生的box-shadow - 你無法選擇你不想計算的影子，其界限......除非您願意在y軸上設置負偏移量。 – Terry

使用的內盒個數（有陰影）和外箱（帶溢出：隱藏）：

<div style="height: 30px; width: 30px; overflow: hidden; padding: 10px 10px 0 10px;"> 
    <div style="height: 30px; width: 30px; box-shadow: 0 5px 19px 2px #000;"> 
    </div> 
</div>

http://jsfiddle.net/wQA8D/（對不起，內聯CSS）

來源

2013-10-22 17:28:53

不可能，因爲box-shadow是基於元素的整個邊界生成的 - 您無法選擇不希望計算陰影的邊界......除非您重新願意設定一個負的在y軸偏移：

box-shadow: 0 -19px 19px 2px rgba(0, 0, 0, 0.1);

但是，這將意味着，陰影將在頂部大。另一種方式是掩蓋在與僞元素底部的陰影，但存在幾個問題：

你的背景必須是實心的，統一的顏色（模式將不匹配）
的影子會底部突然結束

此修補程序的CSS將如下（如果更改陰影模糊大小，您可能必須調整像素值）。

div:after { 
    background-color: #fff; 
    height: 20px; 
    content: ""; 
    position: absolute; 
    bottom: -20px; 
    left: -20px; 
    right: -20px; 
}

http://jsfiddle.net/teddyrised/63hhp/

來源

2013-10-22 17:29:45 Terry

這工作完美，但我從左右邊距中移除了-20px以保持寬度準確，並將高度降至5px以使其更加簡潔。 – Hawkee

從底部移除盒子的陰影

回答

相關問題