使用CSS创建

Question

我试图让像CSS，看起来像下面的图片插图阴影效果的影响插图黑暗阴影效果：

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

是否有任何身体知道我可以通过CSS获得这种效果？

Answer 1

答案已经给你（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 2

看一看的CSS3 box-shadow财产，特别是插入盒阴影。 this article中的示例L应提供您正在寻找的效果。

Answer 3

这里的关键是倍盒子阴影，一个较大的较暗的一个插入从左上方和一个非常微妙的阴影之下，比背景稍亮。

通知的box-shadow的形式是“X偏移，Y偏移，模糊，颜色”

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

实例样式（上＃222背景显示）：

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