css - 如何让框阴影从粗边框下方开始？

Question

我有这段 CSS:

.ab-banner
{
    background-color: #212121;
    background-image: url(logo.png);
    background-repeat: no-repeat;
    width: 100%;
    height: 45px;
    text-align: right;
    border-bottom: 2px solid #4DD2FF;
}

产生:

添加:box-shadow: 0px 2px 2px 0px #000;

产生这个:

如果仔细观察阴影，它会从边框的中间开始。增加边框厚度会导致相同的行为，因此它不是从图层底部开始的。

如何让阴影从边框底部开始？我看到您可以通过将边框设置为背景图像来完成此操作 here , 但在 CSS 中没有办法做到这一点吗？我可以通过增大阴影来解决这个问题，但这不是我的设计所要求的。

这是我想要的:

编辑:@StackOverFlow UI，你是对的，这将正常工作。谢谢你的例子!阴影出现在中间的原因是因为样式既应用于表格本身，也应用于表格包含的行。从一个或另一个中删除该样式类引用将解决此问题。这在布局中发现了一个更深层次的问题，超出了这个问题的范围。接受您的相关回答。

Answer 1

你所拥有的似乎没问题。检查一下，只是靠近边界的阴影更深。通过将 box-shadow 属性增加到更高的值，你可以得到你想要的。 http://liveweave.com/DkpyhE