Question

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

当我这样做时：

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

工作正常;然而，由于曲率，你可以看到它在底角弯曲 - 我需要它是一个直下阴影。

现在因为我的标题包裹页面的顶部 - 宽度为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;

干杯！

盒子阴影不想要的弯曲

1 个答案: