CSS：创建凸起的盒子效果的好方法是啥？

Posted 2023-03-06

【中文标题】CSS：创建凸起的盒子效果的好方法是啥？

【英文标题】：CSS: What's a good way to create a raised box effect?CSS：创建凸起的盒子效果的好方法是什么？

【发布时间】：2011-06-04 22:47:07

【问题描述】：

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

【参考方案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，就像 *** 对标签所做的那样。

使用样式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 的颜色更暗的普通边框底部和右侧或顶部和左侧来模拟插入/开始的东西，事实上这就是 *** 当前使用的用于我浏览器中的标签。

【参考方案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 属性中添加额外的行。