打造“下沉”效果答案

【问题标题】：Creating a "sunken" effect打造“下沉”效果
【发布时间】：2013-10-22 16:28:23
【问题描述】：

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

感谢您的任何想法。

【问题讨论】：

为什么要投反对票，然后不提供任何关于问题有什么问题的指示？不传达任何信息，没人知道你在想什么……
对这个问题投反对票的人似乎认为有一个明显而微不足道的解决方案。没有。想象一下上方盒子中的一个切口，您可以在其中看到下面的表面，并感觉到盒子在所有四个侧面的切口周围的高度。这就是我想要的效果。
您能提供一张您想要完成的工作的图片吗？
这是我对 Fireworks 所做的事情 - jsfiddle.net/mfsU5。左边的图像是我用 CSS3 能做的最好的。甚至烟花图像也不是我想要的，因为它显示了来自左上角的光，所以右边缘和下边缘更亮。我希望所有四个边缘都是黑暗的，就像上边缘和左边缘一样，就好像光线直接在头顶一样。不过，烟花图像绝对给我一种深度的感觉，就好像内部矩形是从 1/16 英寸的垫子上剪下来的。这就是我要找的。span>
网站css-shack.herokuapp.com 绝对适合您！

标签： css

【解决方案1】：

我认为你真的只是想在你的 box-shadow 规则中添加“inset”。详情请见http://www.w3schools.com/cssref/css3_pr_box-shadow.asp。

类似：

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

因此，对于您的示例，http://jsfiddle.net/FY2mk/ 工作正常。

【讨论】：

【解决方案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 参数，您可以实现很多。

【讨论】：

Brrr。内联CSS。 JSFiddle 有一个 CSS 窗口，使用它。
这是一个很好的效果，但它不是我正在寻找的“步骤”下拉菜单。加载时，jsfiddle 上有一个不错的示例。它的“云”图像看起来像是从周围下沉的，至少在上半部分。
我又更新了。 jsfiddle.net/itsmikem/QDMpr 如果你想要有浮雕的艺术品，你可能会想要一张图片。如果它只是文本，你可以通过 text-shadow 和 box-shadow 的组合得到一个不错的浮雕。还有一个不太受支持的 css 浮雕过滤器。

【解决方案3】：

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

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

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

只要加上插图，就会有凹陷的感觉！

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

这是一张图片

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

【讨论】：

我玩过嵌入效果，和你的一样，它总是给我一种带有光滑圆润边缘的凸起表面的印象，就像一条面包的顶部。跨度>
您可能正在使用border-radius，因为它是圆角的！或者你可能使用了太多的第三个参数。
你可能正在使用导致问题的东西，你为什么不给一些 jsfiddle :)