Нежелательное изгибание тени блока

#css

#css — код

Вопрос:

Я хочу добавить тень окна в мою навигационную панель / заголовок в верхней части моей страницы.

Когда я делаю вот так:

 .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
}

Однако это небарабельно грязно и маскировочно.

Должен ли я просто расширить заголовок?

1. имеет ли сама панель навигации закругленную границу?

2. Нет, css box-тень округляется по мере увеличения затухания.

3. не могли бы вы добавить скриншот панели навигации?

Ответ №1:

box-shadow вызывается другой параметр spread , который определяет размер тени ….. это может помочь:

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

Приветствия!