创造"沉没"效果

Question

附图有一个效果,使框看起来像是一个大约一页的厚度,它坐在表面上.所有四个方面看起来都像是被提升了.我正在寻找相反的效果,使盒子看起来像是一个页面厚度的"凹陷".

谢谢你的任何想法.

Answer 1

我想你真的只想在你的盒子阴影规则中添加'inset'.有关详细信息,请参阅http://www.w3schools.com/cssref/css3_pr_box-shadow.asp.

就像是:

box-shadow: 1px 1px 5px #555 inset;

所以对于你的例子,http://jsfiddle.net/FY2mk/工作正常.

Answer 2

这是一个想法：

<div
  style="
    box-shadow: inset 2px 5px 20px #555;
    width: 100px;
    height: 100px;
    border-radius: 5px;
  "
>
  <div
    style="
      width: 50px;
      height: 50px;
      background: #f00;
      box-shadow: inset 0px -10px 25px #700, 0px 5px 5px #333;
      margin: 20px 30px;
      display: block;
      position: absolute;
      border-radius: 5px;
    "
  >
    page
  </div>
</div>

http://jsfiddle.net/sK5bB/80/

如果您使用盒子阴影参数，您可以获得很多成果。