只有框阴影插入底部有问题
我正在使用盒子阴影来创build一个内部阴影…
box-shadow: inset 0 0 10px #000000; -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; …但是只希望内在的影子从最底层进入。 我已经尝试了几种方法来使这项工作，但不能…我怎么这样做盒子阴影？
对定义传播距离的第四长度使用负值。 这经常被忽视，但是受到所有主stream浏览器的支持。 看到这个小提琴的结果。
div{ background:red; height:100px; width:200px; -moz-box-shadow: inset 0 -10px 10px -10px #000000; -webkit-box-shadow: inset 0 -10px 10px -10px #000000; box-shadow: inset 0 -10px 10px -10px #000000; }
<!doctype html> <div></div>
JSnippet DEMO
仅在顶部：
-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;
快速示例
.shadow-top { -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; } .shadow-bottom { -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; } .shadow-top-bottom { -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; } div { display:inline-block; margin-right:15px; width:150px; height:100px; background:yellow; }
<div class='shadow-top'></div> <div class='shadow-bottom'></div> <div class='shadow-top-bottom'></div>
