使用 CSS 创建嵌入的深色阴影效果答案

【问题标题】：Creating an inset dark drop shadow effect with CSS使用 CSS 创建嵌入的深色阴影效果
【发布时间】：2011-06-14 12:02:51
【问题描述】：

我正在尝试在 CSS 中获得类似于插入阴影效果的效果，如下图所示：

_{（来源：gyazo.com）}

有人知道我如何使用 CSS 获得这种效果吗？

【问题讨论】：

你试过用谷歌搜索“阴影效果 css”吗？有很多网站解释了如何做到这一点。
视情况而定。你使用的是什么浏览器？如果你只是坚持使用 CSS 2 或 CSS3，你会遇到困难，也就是说——如果你使用的是 9 之前的任何版本的 IE...
这是一个 link 解释它。
这只是解释文本阴影，而不是如何制作一个看起来像 OP 图像的按钮。至少包含 some 对您要链接的内容的引用，至少命名所使用的 CSS 属性会有所帮助。
好吧，Inset 效果可以通过在边框中绘制左侧和顶部的浅色以及右侧和底部的深色来实现。也许this 给了你一个提示。

标签： html css dropshadow

【解决方案1】：

这里的关键是多个框阴影，从左上角开始插入一个较大的较暗的阴影，下面是一个比背景略亮的非常微妙的阴影。

注意box-shadow的形式是“x-offset, y-offset, blur, color”

学会使用模糊量和多重阴影，你可以做出一些非常棒的效果。

示例样式（用于显示在#222的背景上）：

.button {
    display:inline-block;
    padding: 10px 15px;
    color: white;
    border-radius: 20px;
    box-shadow: inset 2px 3px 5px #000000, 0px 1px 1px #333;
}

【讨论】：

【解决方案2】：

答案已经给你了 (box-shadow: inset ..)，所以这里快速演示一下它是如何工作的：

http://jsfiddle.net/L6nJj/

重要的部分是box-shadow: inset 2px 2px 3px 0 red。

有关可用选项的说明：https://developer.mozilla.org/en/css/box-shadow#Values

请务必考虑浏览器对box-shadow 的支持，即它在旧版本的 IE 中不起作用，但在其他“任何地方”都可以使用：http://caniuse.com/css-boxshadow

【讨论】：

【解决方案3】：

查看 CSS3 box-shadow 属性，尤其是嵌入框阴影。 this article 中的示例 L 应该提供您正在寻找的效果。

【讨论】：