css - CSS：创建凸起的盒子效果的好方法是什么？

Question

也就是说，元素的左边框和下边框需要给出弹出的 3d 效果。有没有一种好的、纯 CSS 的方式来实现这个效果？

Answer 1

#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-extreme，旨​​在展示什么是可能的。

Answer 2

我在试图解决这个问题时也发现了这个问题，我认为你正在寻找的是类似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 3

您可以基于以下解决方案：

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

Answer 4

您可以使用border-bottom-styleand border-right-style，就像 StackOverFlow 使用标签一样。

使用样式inset和outset.

Answer 5

为了与更多浏览器兼容，您可能希望通过添加比 div 的颜色更暗的正常边框底部和右侧或顶部和左侧来模拟插入/开始的东西，实际上这就是 Stackoverflow 当前用于标签的内容在我的浏览器中。