1

我有底部有阴影的 div 作为问题 我需要的是相同的答案，但我想增加阴影的高度，代码：

.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 回答我想要的阴影看起来像这张全屏宽度的图像： 图像

更新

4

4 回答 4

2

您不能仅在一个方向（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/

于 2013-11-11T12:42:44.587 回答
1

阴影始终与 div 本身成比例，但是如果您查看语法，box-shadow您会发现有几个选项：

正式语法：

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

换句话说，您可以更改偏移量，或使其在各个方向上更大，但您不能仅更改高度，除非您更改div它所应用的高度。

更改为

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

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

于 2013-11-11T12:45:25.287 回答
0

这是 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

于 2013-11-11T12:42:08.807 回答
0

尝试堆叠阴影：

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

小提琴

于 2013-11-12T07:05:32.490 回答