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（spread）   RGBA（0,0,0，0.8）（彩色）

所以你想要做的就是改变阴影的方向。通过给出垂直a减去它将高于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;
     }

底部的盒子阴影

3 个答案: