Css 仅在底部插入框阴影时存在问题

我正在使用框阴影创建一个内部阴影

box-shadow: inset 0 0 10px #000000;
-moz-box-shadow:    inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;

---

…但希望内部阴影仅从底部进入。我已经尝试了几种方法，试图使这项工作，但不能。。。如何使用长方体阴影进行此操作？

对定义扩展距离的第四个长度使用负值。这一点经常被忽略，但所有主流浏览器都支持这一点。看看这个结果

div{
背景：红色；
高度：100px；
宽度：200px；
-moz盒阴影：插入0-10px 10px-10px 000000；
-webkit盒阴影：插入0-10px 10px-10px 000000；
框阴影：插入0-10px 10px-10px 000000；
}

仅在顶部：

-moz-box-shadow:    inset  0  10px 10px -10px grey;
-webkit-box-shadow: inset  0  10px 10px -10px grey;
 box-shadow:        inset  0  10px 10px -10px grey;

-moz-box-shadow:    inset  0 -10px 10px -10px grey;
-webkit-box-shadow: inset  0 -10px 10px -10px grey;
 box-shadow:        inset  0 -10px 10px -10px grey;

-moz-box-shadow:    inset  0  10px 10px -10px grey, 
                    inset  0 -10px 10px -10px grey;
-webkit-box-shadow: inset  0  10px 10px -10px grey, 
                    inset  0 -10px 10px -10px grey;
 box-shadow:        inset  0  10px 10px -10px grey, 
                    inset  0 -10px 10px -10px grey;

仅在底部：

-moz-box-shadow:    inset  0  10px 10px -10px grey;
-webkit-box-shadow: inset  0  10px 10px -10px grey;
 box-shadow:        inset  0  10px 10px -10px grey;

-moz-box-shadow:    inset  0 -10px 10px -10px grey;
-webkit-box-shadow: inset  0 -10px 10px -10px grey;
 box-shadow:        inset  0 -10px 10px -10px grey;

-moz-box-shadow:    inset  0  10px 10px -10px grey, 
                    inset  0 -10px 10px -10px grey;
-webkit-box-shadow: inset  0  10px 10px -10px grey, 
                    inset  0 -10px 10px -10px grey;
 box-shadow:        inset  0  10px 10px -10px grey, 
                    inset  0 -10px 10px -10px grey;

仅在顶部和底部：

-moz-box-shadow:    inset  0  10px 10px -10px grey;
-webkit-box-shadow: inset  0  10px 10px -10px grey;
 box-shadow:        inset  0  10px 10px -10px grey;

-moz-box-shadow:    inset  0 -10px 10px -10px grey;
-webkit-box-shadow: inset  0 -10px 10px -10px grey;
 box-shadow:        inset  0 -10px 10px -10px grey;

-moz-box-shadow:    inset  0  10px 10px -10px grey, 
                    inset  0 -10px 10px -10px grey;
-webkit-box-shadow: inset  0  10px 10px -10px grey, 
                    inset  0 -10px 10px -10px grey;
 box-shadow:        inset  0  10px 10px -10px grey, 
                    inset  0 -10px 10px -10px grey;

快速示例

。阴影顶部{
-moz盒阴影：嵌入0 10px 10px-10px灰色；
-webkit盒阴影：嵌入0 10px 10px-10px灰色；
方框阴影：嵌入0 10px 10px-10px灰色；
}
.阴影底部{
-moz盒阴影：嵌入0-10px 10px-10px灰色；
-webkit盒阴影：嵌入0-10px 10px-10px灰色；
盒影：嵌入0-10px 10px-10px灰色；
}
.阴影上下{
-moz盒阴影：嵌入0 10px 10px-10px灰色，
插图0-10px 10px-10px灰色；
-webkit盒阴影：嵌入0 10px 10px-10px灰色，
插图0-10px 10px-10px灰色；
方框阴影：嵌入0 10px 10px-10px灰色，
插图0-10px 10px-10px灰色；
}
div{显示：内联块；右边距：15px；宽度：150px；高度：100px；背景：黄色；}

不客气。这里（扩展）记录了：.

box shadow

应该在

-webkti box shadow

和

-moz box shadow

之后，同意@ShlomiHassid。Jakob Abfalter说：“我编辑了这两个片段来反映这一点。每晚不使用firefox（2015年10月20日）对我来说很好。”。请注意，不同的用户代理具有不同的舍入机制，从而导致特定设置在特定上下文中不可见/不显著？对我来说真的不管用。ACJ确定了另一种类型的解决方案，请参见：。