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

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 的一些视觉细节，但它可以更好地缩放并消除了对流程中额外资产的需求。另外，您可以使用文本编辑器更改阴影颜色。

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

How to put a different style shadow under the Header?

css

shadow