如何从厚边框下方开始拍摄阴影?

时间:2013-09-09 22:24:06

标签: css css3

我有这个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;
}

产生:

enter image description here

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

产生这个:

enter image description here

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

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

这就是我想要的:

enter image description here

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

1 个答案:

答案 0 :(得分:2)

你所拥有的似乎很好。看看这个,只是边界附近的阴影更深。通过将box-shadow属性增加到更高的值,你可以得到你想要的。 http://liveweave.com/DkpyhE