CSS 3内部阴影

Question

这应该很简单，我想要一个投影，但我希望它在一个矩形的内部。我正在谷歌寻找一个地方，但我无法找到它。

Answer 1

你看起来不够努力。

box-shadow: inset 2px 2px 3px 3px #333333;

Answer 2

使用inset box-shadow。

div {
  width: 200px;
  height: 100px;
  background: white;
  box-shadow: inset 8px 9px 3px -5px #939393;
}
body {
  background: papayawhip;
}

<div></div>

Answer 3

是。正如@antyrat所提到的，你可以使用插入框阴影。

＆＃13;

＆＃13;

body {
  background: #bada55;
}
.shadow {
  width: 250px;
  height: 250px;
  margin: 25px auto;
  background: white;
  box-shadow: inset 3px 3px 3px grey;
}

＆＃13;

<div class="shadow"></div>

＆＃13;

＆＃13;

＆＃13;

支持 - CanIUse.com

Answer 4

您正在寻找inset值。

见这个例子：

box-shadow: inset 0 0 5px #000;

在此查看更多信息： developer.mozilla.org/en-US/docs/Web/CSS/box-shadow