css - 打造“下沉”效果

Question

附图有一种效果，使盒子看起来好像有大约一页的厚度并且它坐在表面上。所有四个面看起来都被抬高了。我正在寻找相反的效果，使盒子看起来像是“下沉”了大约一页厚度。

感谢您的任何想法。

Answer 1

我认为你真的只想在你的 box-shadow 规则中添加“插入”。有关详细信息，请参阅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/

如果您使用 box-shadow 参数，您可以获得很多。

Answer 3

沉没的东西？我会想象你正试图获得一种紧迫的效果，就像元素正在进入内部一样。

为此，您可能会考虑使用 inset，这是一个阴影属性，可以使浏览器对元素产生影响，并使其感觉凹陷。

div {
 box-shadow: inset 1px 1px 3px #999;
}

只需添加插图，它就会有凹陷的感觉！

这是一个 jsfiddle：http: //jsfiddle.net/afzaal_ahmad_zeeshan/jfRDA/

这是一张图片

您可以根据需要添加阴影效果！:)