如何只刪除箱子陰影的頂部？

我使用border-radius和box-shadow，使周圍的元素的光芒。如何只刪除箱子陰影的頂部？

我可以只刪除box-shadow的頂部嗎？

div { 
    margin-top: 25px; 
    color: #fff; 
    height: 45px; 
    margin-top: -5px; 
    z-index: -10; 
    padding: 26px 24px 46px; 
    font-weight: normal; 
    background: #000; /*#fff;*/ 
    border-top: 0px solid #e5e5e5; 
    border-left: 1px solid #e5e5e5; 
    border-right: 1px solid #e5e5e5; 
    border-bottom: 1px solid #e5e5e5; 
    -webkit-border-radius: 3px; 
    -khtml-border-radius: 3px; 
     -moz-border-radius: 3px; 
      border-radius: 3px; 
    -webkit-box-shadow: rgba(200,200,200,0.7) 0px 0px 10px 0px; 
    -khtml-box-shadow: rgba(200,200,200,0.7) 0px 0px 10px 0px; 
     -moz-box-shadow: rgba(200,200,200,0.7) 0px 0px 10px 0px; 
      box-shadow: rgba(200,200,200,0.7) 0px 0px 10px 0px; 
}

編輯：這個小啄的問題！ enter image description here

來源

2011-08-11 Bakudan

你的CSS正在 – sandeep

這裏的一個完全unproffesional和醜陋的解決方案，應該由任何人使用，並工作：http://jsfiddle.net/kL8tR/55/我只是隱藏在一個絕對定位的黑色元素的頂部邊框。 –

它沒有覆蓋整個頂部邊界。在寬屏上 - 只有一半。 – Bakudan

這有效，但我會承認不知道是否有更好的方法（或者如果它可能沒有添加包裝元素）。使用多個box-shadow s就是一個好主意，但我似乎無法使它看起來是一樣的。

參見：http://jsfiddle.net/thirtydot/8qEUc/3/

HTML：

<div id="bla"> 
    <div> something </div> 
</div>

CSS：

#bla { 
    overflow-y: hidden; 
    padding: 0 10px 10px 10px; 
    margin: 0 -10px 
} 
#bla > div { 
    /* the CSS from your question here */ 
}

來源

2011-08-11 10:55:53 thirtydot

+1因爲它運作良好，雖然我很驚訝沒有一種純粹的css方式來一致地做到這一點。 – tw16

我相信@ kizi的解決方案可以比這個更精美地達到完全相同的效果，並且是純粹的CSS。看一看。 –

@Robin Winslow：是的，@ kizu的解決方案（+1）和它的變體絕對比其他答案更接近。然而，它們並不像我的那樣是「完美」的（儘管顯然我的網頁有可怕的HTML，並且有用'margin'擰的缺點）。比較：http：//i.stack.imgur.com/89In6.png。我可能太挑剔了，而且經常不需要使用漸變（或其他變量）背景。 – thirtydot

你可以嘗試以下。我的方法只使用CSS。

實施例鏈接：http://jsfiddle.net/kL8tR/56/

div{ 
    margin-top: 25px; 
    color: #fff; 
    height: 45px; 

    padding: 26px 24px 46px; 

    border-left: 1px solid #e5e5e5; 
    border-right: 1px solid #e5e5e5; 
    border-bottom: 1px solid #e5e5e5; 
    border-top: none; 

    -moz-box-shadow: 0 0 10px 1px black, 0px -20px black, 0px 1px 10px rgba(255,255,255,0.7); 
    -webkit-box-shadow: 0 0 10px 1px black, 0px -20px black, 0px 1px 10px rgba(255,255,255,0.7); 
    box-shadow: 0 0 10px 1px black, 0px -20px black, 0px 1px 10px rgba(255,255,255,0.7); 

}

基本上我在做什麼，我建立多層陰影，所以第一陰影覆蓋第二層，掩蔽的頂部。

我以前用過這個，這是我參考：

看第 - 分層多重陰影[http://www.css3.info/preview/box-shadow/]

來源

2011-08-11 11:19:30

在穩固的背景下看起來很完美，但是不太好，否則：http://jsfiddle.net/thirtydot/kL8tR/58/ – thirtydot

+1，因爲它適用於此場景。儘管@thirtydot說，由於背景需要一個純色，所以它非常有限。 – tw16

@Marc Uberstein爲什麼你刪除邊界半徑？！？ – Bakudan

@milo;是不是你的上邊框是你給你的代碼

去除頂部發光，你必須確定你的影子的垂直間距shadow。

寫在你的陰影CSS：

box-shadow:0 3px 6px 0 rgba(200, 200, 200, 0.7) ; 
-moz-box-shadow:0 3px 6px 0 rgba(200, 200, 200, 0.7) ; 
-webkit-box-shadow:0 3px 6px 0 rgba(200, 200, 200, 0.7) ; 
-khtml-box-shadow:0 3px 6px 0 rgba(200, 200, 200, 0.7) ;

&你可以從這裏http://css3generator.com/

注意產生：有陰影的四個屬性horizontal, vertical, blur & spread 爲內陰影，你可以爲它

定義 inset

來源

2011-08-11 11:20:06 sandeep

http://jsfiddle.net/thirtydot/kL8tR/59/。這可能夠接近，但並不完美。 box-shadow的頂部仍然隱約可見，頂部的圓角不會看起來很正確（至少在Chrome中）。 – thirtydot

由於您使用了box-shadow，因此您可以使用僞元素來創建它並將其放置在您的div下面，從而僅放置所需的部分是可見：http://jsfiddle.net/kL8tR/60/

有一些重要的注意事項：

僞元素必須z-index: -1
股利本身必須有position: relative並沒有z-index

僞元素+ CSS3 = awesomeness :)

來源

2011-08-11 13:44:01 kizu

我喜歡這個解決方案，它更優雅。雖然我不認爲你需要'z-index：-1'：http://jsfiddle.net/nottrobin/kL8tR/61/。 '：before'在IEs中不起作用<8 - http://caniuse.com/#search=:before - 但正如你所說我們正在使用'box-shadow' - 無論如何 - http://caniuse.com/ ＃搜索=的box-shadow。 –

如果你想要一個效果更像@ thirtydot's，只需展開'：before'元素：http://jsfiddle.net/nottrobin/kL8tR/62/ –

你可以將陰影向下移動（vert iCal的位移），減少陰影半徑，東西沿着線（更換需要的像素數量的星號只是支付與盒子本身）頂部陰影：

box-shadow: 0 *px 10px 0 rgba(200,200,200,0.7);

來源

2012-03-25 06:35:57 Lobabob

加上，這是所有的CSS沒有任何複雜的 – Lobabob

如何只刪除箱子陰影的頂部？

回答

相關問題