CSS盒子陰影 - 頂部和底部只有

可能重複：
drop shadow only bottom css3 CSS盒子陰影 - 頂部和底部只有

我無法找到如何做到這一點的任何例子，但我怎麼能只加一箱陰影元素的頂部和底部？

來源

2011-07-12 Cofey

重複的關於有在一個盒子裏只有特定邊框陰影（見相關欄 - >）其他許多問題 – BoltClock

[這個小提琴]（http://jsfiddle.net/masondesu/FsnnZ/）可能對某些人有用。 – L84

與多個陰影：http://stackoverflow.com/a/20596554/1491212 您可能想要適應它的頂部/底部，但你會得到的要點 –

118

正如Kristian指出的那樣，對z值的良好控制通常可以解決您的問題。

如果這樣做不起作用，您可以查看CSS Box Shadow Bottom Only關於使用隱藏的溢出來隱藏多餘的陰影。

我也必須記住，box-shadow屬性可以接受的陰影像這樣的逗號分隔的列表：

box-shadow: 0px 10px 5px #888, 0px -10px 5px #888;

這會給你在每個陰影的「量」一定的控制方向。

查看http://www.css3.info/preview/box-shadow/瞭解有關box-shadow的更多信息。

希望這是你正在尋找的！

來源

2011-07-12 22:18:04 Teodor

本質上，陰影是盒子形狀恰好抵消實際盒子的後面。爲了隱藏陰影部分，您需要創建額外的div並在陰影框上方設置它們的z-index，以便陰影不可見。

如果您想對陰影進行非常具體的控制，請將它們構建爲圖像並使用適當的填充和邊距創建容器div ..然後使用png修補以確保陰影正確呈現在所有瀏覽器中

來源

2011-07-12 21:28:47 Kristian

是這可能，但在盒子後面使用無縫背景？如果我添加另一個盒子並給它一個bg顏色，它看起來不正確，因爲圖案bg不會出現。據我所知， – Cofey

，那是行不通的。 – Kristian

我玩過它，我想我有一個解決方案。以下示例顯示如何設置Box-Shadow，以便它僅顯示元素頂部和底部的插入陰影。

傳說：insetOption leftPosition topPosition blurStrength spreadStrength顏色

說明
來實現這一點的關鍵是模糊值設置爲< =傳播價值的否定（如插圖0像素爲5px - ？px 5px＃000;模糊值應該是-5和更低），並且在從主要定位值減去時也保持模糊值> 0（例如，使用上面的示例，模糊值應該是-9和以上，因此給我們模糊的最佳值在-5和-9之間）。

解

.styleName { 
/* for IE 8 and lower */ 
background-color:#888; filter: progid:DXImageTransform.Microsoft.dropShadow(color=#FFFFCC, offX=0, offY=0, positive=true); 

/* for IE 9 */ 
box-shadow: inset 0px 2px -2px 2px rgba(255,255,204,0.7), inset 0px -2px -2px 2px rgba(255,255,204,0.7); 

/* for webkit browsers */ 
-webkit-box-shadow: inset 0px 2px -2px 2px rgba(255,255,204,0.7), inset 0px -2px -2px 2px rgba(255,255,204,0.7); 

/* for firefox 3.6+ */ 
-moz-box-shadow: inset 0px 2px -2px 2px rgba(255,255,204,0.7), inset 0px -2px -2px 2px rgba(255,255,204,0.7); 
}

來源

2011-10-14 21:04:14 aheinke

Firefox 33.1.1聲明這些標籤上的屬性值不正確。無論我使用box-shadow還是-moz-box-shadow，我都無法模擬您的解決方案的基本租戶，即使用負值模糊值。 – Jon

一些實驗後，我發現，在線路的第四值控制所述擴散（至少在FF 10）。我反對垂直偏移，並給他們一個負面的傳播。

這裏的工作筆：http://codepen.io/gillytech/pen/dlbsx

<html> 
<head> 
<style type="text/css"> 

#test { 
    width: 500px; 
    border: 1px #CCC solid; 
    height: 200px; 

    box-shadow: 
     inset 0px 11px 8px -10px #CCC, 
     inset 0px -11px 8px -10px #CCC; 
} 
</style> 
</head> 
<body> 
    <div id="test"></div> 
</body> 
</html>

這完全適用於我！

來源

2012-04-14 04:05:24 gillytech

這隻會導致兩個內嵌框陰影。我錯過了什麼嗎？ –

@Jakobud這是原始問題的基礎......如何在div的頂部和底部添加插入框陰影。我錯過了什麼嗎？ – gillytech

這是一個無破解且乾淨的解決方案。應該被標記爲正確的一個恕我直言。（儘管當前選擇的答案提到了這一點）。 – yogee

所以這是我的第一個答案在這裏，因爲我需要類似我做了僞元素2個內陰影，和上外的影子額外的DIV的東西。不知道這是否是最好的解決方案，但可能會幫助某人。

HTML

<div class="shadow-block"> 
    <div class="shadow"></div> 
    <div class="overlay"> 
     <div class="overlay-inner"> 
      content here 
     </div> 
    </div> 
</div>

CSS

.overlay { 
    background: #f7f7f4; 
    height: 185px; 
    overflow: hidden; 
    position: relative; 
    width: 100%; 
} 

.overlay:before { 
    border-radius: 50% 50% 50% 50%; 
    box-shadow: 0 0 50px 2px rgba(1, 1, 1, 0.6); 
    content: " "; 
    display: block; 
    margin: 0 auto; 
    width: 80%; 
} 

.overlay:after { 
    border-radius: 50% 50% 50% 50%; 
    box-shadow: 0 0 70px 5px rgba(1, 1, 1, 0.5); 
    content: "-"; 
    display: block; 
    margin: 0 auto; 
    position: absolute; 
    bottom: -65px; 
    left: -50%; 
    right: -50%; 
    width: 80%; 
} 

.shadow { 
    position: relative; 
    width:100%; 
    height:8px; 
    margin: 0 0 -22px 0; 
    -webkit-box-shadow: 0px 0px 50px 3px rgba(1, 1, 1, 0.6); 
    box-shadow: 0px 0px 50px 3px rgba(1, 1, 1, 0.6); 
    border-radius: 50%; 
}

來源

2012-09-19 22:07:24

CSS盒子陰影 - 頂部和底部只有

回答

相關問題