如何在标题下放置不同的样式阴影？

Question

我该如何在header下方放置阴影？

https://www.000webhost.com/login-cpanel

我知道我可以放一个box-shadow，但我想要一个类似于000webhost的阴影。

我该怎么办？

Answer 1

如果您检查页面，则会看到阴影属于CSS的:after选择器。查看background属性，您会看到它插入图像作为背景。

因此，该阴影是由图像创建的。这里不需要特殊的CSS技能。

Answer 2

这是位于DIV.holder底部边缘之外的图像

#header .holder:after {
    left: 0;
    right: 0;
    bottom: -21px;
    content: '';
    height: 21px;
    display: block;
    position: absolute;
    background: url(https://www.000webhost.com/static/default.000webhost.com/images/shadow.png) no-repeat;
    background-size: 100%;
}

可能可以使用分层的box-shadows而不是图像来模仿这种效果，但这将是丑陋且笨拙的代码。

唯一不使用单独图像的相对优雅方法是创建一个小的SVG阴影，然后将该SVG代码直接嵌入到CSS背景中。像https://yoksel.github.io/url-encoder/之类的工具使此操作相当容易。

下面是一个快速的代码笔，显示了它的运行情况。 https://codepen.io/alexmwalker/pen/ZMVNbo

SVG缺少原始PNG的视觉上的细微之处，但可扩展性更好，并且无需从过程中获取额外的资产。另外，您可以使用文本编辑器更改阴影颜色。