CSS：創建凸起盒子效果的好方法是什麼？

Question

也就是說，元素的左邊框和底邊框需要給出它彈出的3D效果。有沒有一種很好的，純CSS的方式來實現這種效果？

Answer 1

我發現這個問題，同時試圖弄清楚這一點，我想你要找的是這樣的http://jsfiddle.net/9Lt2477w/。

.raisedbox { 
    padding: 10px; 
    border: 1px solid #77aaff; 
    box-shadow: -1px 1px #77aaff, 
     -2px 2px #77aaff, 
     -3px 3px #77aaff, 
     -4px 4px #77aaff, 
     -5px 5px #77aaff; 
} 

感謝http://sam-morrow.com/playground/css-cubes.py這裏幫助。我沒有意識到你可以繼續在box-shadow屬性中添加額外的行。

Answer 2

您可以基於您的解決方案在此：

-webkit-box-shadow: 0 0 10px rgb(0,0,0); 
-moz-box-shadow: 0 0 10px rgb(0,0,0); 

Answer 3

您可以使用border-bottom-style和border-right-style，就像計算器不與標籤。使用inset和outset的樣式。

Answer 4

#foo { 
    /* ... */ 
    border:8px outset #999; 
    -webkit-box-shadow: 5px 5px 15px rgba(0,0,0,0.4); 
    -moz-box-shadow: 5px 5px 15px rgba(0,0,0,0.4); 
} 

這裏的活例子：http://jsfiddle.net/sjkXS/1/
是，這裏的效果cheesily極端，indended向人們展示什麼是可能的。

Answer 5

爲了與更多瀏覽器兼容，您可能需要通過添加正常邊框底部和右側或頂部和左側比底部顏色更深的模擬插入/起始的東西，實際上這就是Stackoverflow是目前使用我的瀏覽器中的標籤。