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

【问题标题】：CSS: What's a good way to create a raised box effect?CSS：创建凸起的盒子效果的好方法是什么？
【发布时间】：2011-06-04 22:47:07
【问题描述】：

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

【问题讨论】：

标签： css effect border

【解决方案1】：

您的解决方案可以以此为基础：

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

【讨论】：

【解决方案2】：

您可以使用 border-bottom-style 和 border-right-style，就像 StackOverFlow 对标签所做的那样。

使用样式inset 和outset。

【讨论】：

看起来接近我想要的，但是左上角和右下角的角度不对。
@Marnix
@thesowismine 旧标签（问题的主题）有一个类似边框的按钮，但他们改变了样式，现在他们有一个平面布局。所以它不再适用了。我当时应该拍一张快照。

【解决方案3】：

#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/
是的，这里的效果非常极端，旨在展示什么是可能的。

【讨论】：

一开始，不错的一个 - 尽管不再需要供应商前缀并且一点边界半径也可能有帮助，但这是迄今为止最好的答案

【解决方案4】：

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

【讨论】：

【解决方案5】：

我在尝试解决这个问题时也发现了这个问题，我认为您正在寻找的内容类似于 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 属性中添加额外的行。

【讨论】：