使用CSS创建嵌入式暗阴影效果

Question

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

image of sunken button http://gyazo.com/5c3178208bb904b3502a83a7490f7ffc.png

有没有人知道如何用CSS获得这种效果？

Answer 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;
}

Answer 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

Answer 3

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