css - 仅对 box-shadow Inset bottom 有问题

Question

我正在使用 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;

...但希望内部阴影仅从底部进入。我已经尝试了几种方法来尝试使这项工作有效但不能...我将如何使用 box-shadow 执行此操作？

Answer 1

对定义传播距离的第四个长度使用负值。这经常被忽视，但所有主要浏览器都支持。看这个Fiddle为结果。

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>