css - 如何在Header下放置不同样式的阴影？

Question

我怎样才能像这样在 header 下放置阴影？

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

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

我该怎么做？

Answer 1

这是一张位于 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 的一些视觉微妙之处，但它的缩放性更好，并且无需从流程中获取额外的资源。另外，您可以使用文本编辑器更改阴影颜色。