CSS：创建凸起框效果的好方法是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4620239/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: What's a good way to create a raised box effect?
提问by Hamster
That is, the left and bottom borders of the element need to give a 3d effect of it popping out. Is there a good, purely-CSS way to accomplish this effect?
也就是说，元素的左边框和下边框需要给它一个弹出的 3d 效果。有没有一种好的、纯 CSS 的方式来实现这种效果？
回答by Brandon
I found this question while trying to figure this out as well, and I think what you're looking for is something like this http://jsfiddle.net/9Lt2477w/.
我在试图解决这个问题时也发现了这个问题，我认为你正在寻找的是这样的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;
}
Thanks to http://sam-morrow.com/playground/css-cubes.pyfor the help here. I didn't realize you could just keep adding additional lines into the box-shadow property.
感谢http://sam-morrow.com/playground/css-cubes.py在这里的帮助。我没有意识到你可以继续在 box-shadow 属性中添加额外的行。
回答by Phrogz
#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);
}
Here's the example live: http://jsfiddle.net/sjkXS/1/
Yes, the effect here is cheesily-extreme, indended to showcase what is possible.
这是现场示例：http: //jsfiddle.net/sjkXS/1/
是的，这里的效果非常极端，旨在展示什么是可能的。
回答by Nerian
You can base your solution on this:
您可以基于此解决方案：
-webkit-box-shadow: 0 0 10px rgb(0,0,0);
-moz-box-shadow: 0 0 10px rgb(0,0,0);
回答by Marnix
You could use the border-bottom-styleand border-right-style, just as StackOverFlow does with the tags.
您可以使用border-bottom-styleand border-right-style，就像 StackOverFlow 使用标签一样。
Use the styles insetand outset.
使用样式inset和outset.
回答by mikewasmike
For compatibility with more browsers you might want to simulate the inset/outset stuff by just adding a normal border bottom and right or top and left which is darker than the color of the div, in fact that is what Stackoverflow is using currently for the tags in my browser.
为了与更多浏览器兼容，您可能希望通过添加比 div 颜色更暗的普通边框底部和右侧或顶部和左侧来模拟插入/开始的东西，实际上这就是 Stackoverflow 当前用于标签的内容在我的浏览器中。
