CSS 仅框阴影插入底部有问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12081814/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Have an issue with box-shadow Inset bottom only
提问by Joe
I am using box-shadow to create an inner shadow...
我正在使用 box-shadow 创建一个内部阴影......
box-shadow: inset 0 0 10px #000000;
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
...but would like the inner shadow to come in from the bottom only. I have tried several ways of trying to make this work but can't... How would I do this with box-shadow?
...但希望内部阴影仅从底部进入。我已经尝试了几种尝试使这项工作的方法，但不能......我将如何使用 box-shadow 做到这一点？
回答by ACJ
Use a negative value for the fourth length which defines the spread distance. This is often overlooked, but supported by all major browsers. See this Fiddlefor the result.
对定义展开距离的第四个长度使用负值。这经常被忽视，但所有主要浏览器都支持。看到这个小提琴的结果。
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;
}<div></div>回答by Shlomi Hassid
On top only:
仅在顶部：
-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;
On bottom only:
仅在底部：
-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;
On top and bottom only:
仅在顶部和底部：
-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;
Quick Example
快速示例
.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>