css - 盒子阴影不需要 flex

Question

我想在页面顶部的导航栏/标题中添加框阴影。

当我这样做时:

.shadow { box-shadow: 0px 0px 5px #333 }

它工作正常；然而，由于曲率，您可以看到它在底 Angular flex - 我需要它是一个直下的阴影。

现在因为我的标题包裹了页面的顶部 - 宽度是 100% - 我可以将边延伸到屏幕外:

.shadow {
    ...
    box-shadow: 0px 0px 5px #333;
    left: -10px;
    right: -10px;
    padding: 0px 10px /* compensates for the spaces created either side */
}

这样曲线就隐藏在屏幕之外了；然而，这似乎是一个肮脏、肮脏的解决方案——这是实现我想要的效果的唯一方法吗？

我想过添加一个带有背景渐变的 after 来模拟阴影 - 就像这样:

.shadow:after {
    content: "";
    position: absolute;
    left: 0px;
    right: 0px;
    top: 100%;
    height: 10px;
    background: gradientStuffICantRemember
    -o-background: -prefixedFallBackGradientBrackgroundForEveryBrowserEverCreated
    -ie-background: -prefixedFallBackGradientBrackgroundForEveryBrowserEverCreated
    -ff-background: -prefixedFallBackGradientBrackgroundForEveryBrowserEverCreated
    -webkit-background: -prefixedFallBackGradientBrackgroundForEveryBrowserEverCreated
}

然而，这非常肮脏和令人作呕。

我应该只扩展标题吗？

Answer 1

box-shadow 有另一个名为 spread 的参数，它定义了阴影的大小......它可以帮助:

box-shadow: h-dist v-dist blur spread colour;

干杯!