html - 底部的盒子阴影

Question

使用此代码，我可以在窗口顶部应用阴影：http: //jsbin.com/awedir/1/edit

但我希望它在底部。那么我该如何实现呢？

body:before 
{ 
   content: "";
   position: fixed;
   top: -10px;
   left: 0;
   width: 100%;
   height: 10px;
   z-index: 100;
   -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
   -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
   box-shadow: 0px 0px 10px rgba(0,0,0,.8);
   }

Answer 1

好的，从评论延伸：

只需“反转”您的处理方式::before：

http://jsbin.com/uyosuk/1

body::after
{ 
   content: "";
   position: fixed;
   bottom:-10px;
   left: 0;
   width: 100%;
   height: 10px;
   z-index: 100; 
   box-shadow: 0px 0px 10px rgba(0,0,0,.8);
}

Answer 2

从上到下更改。

这就是box-shadow。

box-shadow：水平垂直模糊传播颜色

框阴影：0px（水平）0px（垂直）10px（模糊）10px（传播）rgba（0,0,0,.8）（颜色）

所以你想要做的是改变阴影的方向。通过给垂直一个减号，它将高于 vorm。所以是这样的：box-shadow: 0px -10px 10px rgba(0,0,0,.8);

Answer 3

body{
     border:3px; 
     box-shadow:0px 10px 8px rgba(0,0,0,8); 
     position:fixed; 
     width:100;
     margin-left:0px;
     margin-right:0px;
     margin-top:0px;
     margin-bottom:0px;
     }