CSS：创建凸起框效果的好方法是什么？
也就是说，元素的左边框和下边框需要提供弹出的 3D 效果。有没有一种好的、纯 CSS 的方法来实现这种效果？
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?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
这是实时示例：http://jsfiddle.net/sjkXS/1/
是的，这里的效果非常俗气，旨在展示什么是可能的。
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/9Lt2477w/。
感谢 http://sam-morrow.com/playground/css-cubes.py 在这里寻求帮助。我没有意识到您可以继续在 box-shadow 属性中添加额外的行。
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/.
Thanks to http://sam-morrow.com/playground/css-cubes.py for the help here. I didn't realize you could just keep adding additional lines into the box-shadow property.
您可以在此基础上制定您的解决方案：
You can base your solution on this:
您可以使用
border-bottom-style和border-right-style，就像 StackOverFlow 使用标签一样。使用样式
inset和outset。You could use the
border-bottom-styleandborder-right-style, just as StackOverFlow does with the tags.Use the styles
insetandoutset.为了与更多浏览器兼容，您可能希望通过添加正常的边框底部和右侧或顶部和左侧（比 div 的颜色更深）来模拟插入/开头内容，事实上这就是 Stackoverflow 当前用于标签的内容在我的浏览器中。
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.