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

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

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-style和border-right-style，就像StackOverFlow对标记一样。

使用样式inset和outset。

Answer 5

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