css - box-shadow vs display:inline-block vs display:inline - 有趣的行为

Question

我刚刚遇到了一个有趣的问题。我有 3 个 div 彼此相邻，显示：inline-block 和宽度：32%。它们都有一个按钮，里面有盒子阴影集。

输出：

http://imgur.com/a/3HWyp

正如您在第一张图片中看到的那样，第一个按钮和第三个按钮上有阴影，但阴影的方向与第二个按钮的方向不同。

我已经检查了调试器中的所有内容，它们具有相同的 box-shadow 设置。

如果我将 inline-block 更改为 inline 只是为了测试（第二张图片），阴影会进入相同的（右）方向，但是 - 当然 - 宽度存在问题。

我需要将 3 个按钮并排放置。

请帮忙 ：）

提前致谢！

Answer 1

我懂了：

JSFiddle：jsfiddle.net/bt4jvr8k

问题是“col-3” div 的“溢出：隐藏”。

几乎同样的问题是按钮的“溢出：隐藏”，但它只是从侧面裁剪阴影，而 div 也从底部裁剪。