如何在邊框底部製作陰影？

Question

我需要通過CSS3在邊框底部應用邊框陰影。我只想在底部應用CSS3陰影。這可能嗎？

Answer 1

嘗試：

div{ 
 
-webkit-box-shadow:0px 1px 1px #de1dde; 
 
-moz-box-shadow:0px 1px 1px #de1dde; 
 
box-shadow:0px 1px 1px #de1dde; 
 
    }

<div>wefwefwef</div>

它通常把從盒子的底部1px的模糊陰影1px的

box-shadow: [horizontal offset] [vertical offset] [blur radius] [color]; 

Answer 2

使用box-shadow沒有水平偏移量。

http://www.css3.info/preview/box-shadow/

例如，

div { 
 
    -webkit-box-shadow: 0 10px 5px #888888; 
 
    -moz-box-shadow: 0 10px 5px #888888; 
 
    box-shadow: 0 10px 5px #888888; 
 
}

<div>wefwefwef</div>

將有在側面上的輕微陰影具有大模糊半徑（在上述的例子5像素）

Answer 3

的問題是影子走出包含div的一面。爲了避免這種情況，模糊值必須等於擴展值的絕對值。

div { 
 
    -webkit-box-shadow: 0 4px 6px -6px #222; 
 
    -moz-box-shadow: 0 4px 6px -6px #222; 
 
    box-shadow: 0 4px 6px -6px #222; 
 
}

<div>wefwefwef</div>

在深度覆蓋here

Answer 4

新方法的老問題

好像在回答提供的問題一直是如何該框邊框可以在對象的左側和右側顯示，或者您必須將其插入到目標位置，否則它不會正確遮蔽容器的整個長度。

本示例使用:after僞元素以及具有透明度的線性漸變，以便將陰影投影到完全延伸到要陰影元素兩側的容器上。

值得注意與此解決方案是，如果您使用填充您希望投影的元素，它將無法正確顯示。這是因爲after僞元素將其內容直接追加到元素內部內容之後。所以如果你有填充，陰影會出現在框中。這可以通過消除外部容器上的填充（應用陰影）以及使用內部容器來應用所需的填充來克服。

例與填充和背景顏色的陰影DIV：

如果要更改陰影的深度，只需增加height風格在after僞元素。您也可以明顯地使線條漸變樣式變暗，變亮或更改顏色。

body { 
 
    background: #eee; 
 
} 
 

 
.bottom-shadow { 
 
    width: 80%; 
 
    margin: 0 auto; 
 
} 
 

 
.bottom-shadow:after { 
 
    content: ""; 
 
    display: block; 
 
    height: 8px; 
 
    background: transparent; 
 
    background: -moz-linear-gradient(top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */ 
 
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */ 
 
    background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0); /* IE6-9 */ 
 
} 
 

 
.bottom-shadow div { 
 
    padding: 18px; 
 
    background: #fff; 
 
}

<div class="bottom-shadow"> 
 
    <div> 
 
    Shadows, FTW! 
 
    </div> 
 
</div>