创造“沉没”效果

Question

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

感谢您的任何想法。

Answer 1

我想你真的只想添加＆＃39;插入＆＃39;你的盒子阴影规则。有关详细信息，请参阅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/

如果你玩盒子阴影参数，你可以实现很多。

Answer 3

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

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

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

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

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

这是一张图片

您可以根据需要添加阴影效果！ ：）