Question

我的div底部有一个阴影question 我需要的是相同的答案，但我想增加阴影的高度，代码：

.box-shadow:after {

    content: "";
    margin-top:1px;
    width: 100%;
    display: block;
    position: absolute;
    z-index: -1;
    -webkit-box-shadow: 0px 0px 8px 2px #000000;
       -moz-box-shadow: 0px 0px 8px 2px #000000;
            box-shadow: 0px 0px 8px 2px #000000;
}

JSFIDDLE ，我所需要的只是增加阴影的高度，请JSfiddle回答我希望如果可能，阴影看起来像这个图像与全屏widh： image

已更新

Answer 1

您无法仅在一个方向（X或Y）上增加模糊半径的大小。我做了X偏移50px和模糊半径10px。

-webkit-box-shadow: 0px 50px 10px 4px #000;
   -moz-box-shadow: 0px 50px 10px 4px #000;
        box-shadow: 0px 50px 10px 4px #000;

http://jsfiddle.net/p8g77/2/

Answer 2

阴影总是与div本身成比例，但是如果你看一下box-shadow的语法，你会看到有几种选择：

形式语法：

[inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ]]

换句话说，您可以更改偏移量，或者在每个方向上更大，但除非您更改div的高度，否则无法更改仅高度适用于。

更改为

box-shadow: 0px 0px 8px 10px #000000;

会使阴影在所有方向上变大8个像素。

Answer 3

以下是box-shadow的格式：box-shadow: h-shadow v-shadow blur spread color inset; 所以它看起来像这样：

-webkit-box-shadow: 0px 10px 8px 2px #000000;
   -moz-box-shadow: 0px 10px 8px 2px #000000;
        box-shadow: 0px 10px 8px 2px #000000;

以下是更多信息： http://www.w3schools.com/cssref/css3_pr_box-shadow.asp

Answer 4

尝试堆叠阴影：

box-shadow: 0 0  8px 2px #000000,
            0 0 25px 2px #000000,
            0 0 40px 2px #000000,
            0 0 50px 2px #000000;

<强> FIDDLE

增加底影的高度

4 个答案: