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

时间:2015-11-12 20:33:41

标签: css css3 box-shadow

我遇到了一个有趣的问题。我有3个div,彼此相邻,显示:内联块,宽度:32%。所有这些都有一个按钮,里面有盒子阴影集。

输出:

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

正如您在第一张照片上看到的那样,第1张和第3张按钮上有阴影,但阴影的方向与第2张按钮不同。

我已经检查了调试器中的所有内容,它们具有相同的盒子阴影设置。

如果我将内联块更改为内联仅用于测试(第二张图片),阴影将进入相同(右)方向,但是 - 当然 - 宽度存在问题。

我需要将3个按钮放在一起。

请帮助:)

提前致谢!

1 个答案:

答案 0 :(得分:0)

我知道了:

JSFiddle:jsfiddle.net/bt4jvr8k

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

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