只將陰影應用於邊框頂部？

例如，我有以下代碼：

header nav { 
    border-top: 1px solid #202020; 
    margin-top: 25px; 
    width: 158px; 
    padding-top:25px; 
}

我想陰影（1px的1px的1px的#cdcdcd）僅適用於邊框頂部。

達到此目的的最佳方法是什麼？

編輯

實際上，這就是我要找的

div { 
    border-top: 1px solid #202020; 
    margin-top: 25px; 
    margin-left:25px; 
    width: 158px; 
    padding-top:25px; 
    -webkit-box-shadow: 0px 1px 1px rgba(50, 50, 50, 0.75); 
    -moz-box-shadow: 0px 1px 1px rgba(50, 50, 50, 0.75); 
    box-shadow:   0px 1px 1px rgba(50, 50, 50, 0.75); 
}

然而，陰影似乎是由填充受到影響。無論如何，無需調整填充就可以將陰影貼在邊框上嗎？

來源

2012-03-20 AMC

這樣的事情？

div { 
    border: 1px solid #202020; 
    margin-top: 25px; 
    margin-left:25px; 
    width: 158px; 
    height: 158px; 
    padding-top:25px; 
    -webkit-box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.75); 
    -moz-box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.75); 
    box-shadow:   0px -4px 3px rgba(50, 50, 50, 0.75); 
}

http://jsfiddle.net/FrEnY/

來源

2012-03-20 18:40:04 danblundell

基本上，是的。但是，我需要它在邊界的底部。這可能嗎？ – AMC 2012-03-20 18:49:26

啊，那很好。我編輯了danblundell的小提琴，以使用使插入陰影的'inset'屬性。看看這個：http://jsfiddle.net/FrEnY/4/這比我之前使用:: before的其他建議更簡單。 – 2012-03-21 22:02:25

簡單的答案是，你不能。 box-shadow僅適用於整個元素。您可以使用不同的方法，並在CSS中使用:: before將一個1像素高的元素插入到header nav中，然後設置box-shadow。

來源

2012-03-20 18:41:00

你能舉個例子嗎？我對這一切都很陌生，對不起。 – AMC 2012-03-20 19:05:32

請記住，儘管W3想要使用雙冒號（':: before'）符號來區分僞元素，但IE似乎仍然存在問題並且需要單冒號版本（'：before'）。 – 2012-03-20 19:08:07

謝謝@David。它總是IE不是嗎？ – 2012-11-30 11:17:54

我發現使用這些互動工具幫助實現可視化所發生的事情，並且什麼可能

http://css3gen.com/box-shadow/

http://www.cssmatic.com/box-shadow

http://css3generator.com/

編輯：檢查出其他工具與其他發電機試驗和組合。我必須提醒自己，有時候只是因爲你可以，並不意味着你應該 - 容易被偷走！

來源

2013-12-28 19:11:57 shipwreck

多箱陰影爲我做了。

box-shadow: 
     inset 0 -8px 4px 4px rgb(255,255,255), 
     inset 0 2px 4px 0px rgba(50, 50, 50, 0.75);

http://jsfiddle.net/kk66f/

來源

2014-05-08 17:37:15 shaunw

如果你想申請的陰影元素（inset）內，但只希望它出現在一個單一的方面，你可以定義一個負值到「傳播」參數（第二個例子中的第五個參數）。

要將其完全去除，請將其與陰影模糊（第二個示例中的第四個參數）的大小相同，但爲負值。

還記得添加的偏移量y位置（第三參數在第二個例子），以便執行以下操作：

box-shadow:   inset 0px 4px 3px rgba(50, 50, 50, 0.75);

變爲：

box-shadow:   inset 0px 7px 3px -3px rgba(50, 50, 50, 0.75);

檢查該更新的小提琴：http://jsfiddle.net/FrEnY/1282/以及更多關於這裏的箱子陰影參數：http://www.w3schools.com/cssref/css3_pr_box-shadow.asp

來源

2014-06-10 11:44:26 dnlmzw

.item .content{ 
    width: 94.1%; 
    background: #2d2d2d; 
    padding: 3%; 
    border-top: solid 1px #000; 
    position: relative; 
} 
.item .content:before{ 
     content: ""; 
     display: block; 
     position: absolute; 
     top: 0px; 
     left: 0; 
     width: 100%; 
     height: 1px; 
     -webkit-box-shadow: 0px 1px 13px rgba(255,255,255,1); 
     -moz-box-shadow: 0px 1px 13px rgba(255,255,255,1); 
     box-shadow: 0px 1px 13px rgba(255,255,255,1); 
     z-index: 100; 
}

我喜歡用它這樣的東西。

來源

2015-05-06 21:48:45

只將陰影應用於邊框頂部？

回答

相關問題