使用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; 
}