关于CSS：仅阴影底部CSS3


drop shadow only bottom css3

有没有办法只在底部放阴影？ 我有一个菜单，彼此相邻有2张图像。 我不想要正确的阴影，因为它会重叠正确的图像。 我不喜欢为此使用图像，因此有一种方法可以将其仅放置在底部，例如：

box-shadow-bottom: 10px #FFF;还是类似的？

1
2
3
4
5
6
7
-moz-box-shadow: 0px 3px 3px #000;
-webkit-box-shadow: 0px 3px 3px #000;
box-shadow-bottom: 5px #000;
/* For IE 8 */
-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000');
相关讨论

更新4

与更新3相同，但具有现代的CSS(=较少的规则)，因此不需要在伪元素上进行特殊定位。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#box {
    background-color: #3D6AA2;
    width: 160px;
    height: 90px;
    position: absolute;
    top: calc(10% - 10px);
    left: calc(50% - 80px);
}

.box-shadow:after {
    content:"";
    position:absolute;
    width:100%;
    bottom:1px;
    z-index:-1;
    transform:scale(.9);
    box-shadow: 0px 0px 8px 2px #000000;
}
1
 

更新3

我以前所有的答案都一直在使用额外的标记来创建此效果，而这并不是必需的。我认为这是一种更清洁的解决方案...唯一的窍门是使用值来获得阴影的正确位置以及阴影的正确强度/不透明度。这是一个使用伪元素的新提琴：

http://jsfiddle.net/UnsungHero97/ARRRZ/2/

的HTML

1
 

的CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
#box {
    background-color: #3D6AA2;
    width: 160px;
    height: 90px;
    margin-top: -45px;
    margin-left: -80px;
    position: absolute;
    top: 50%;
    left: 50%;
}

.box-shadow:after {
    content:"";
    width: 150px;
    height: 1px;
    margin-top: 88px;
    margin-left: -75px;
    display: block;
    position: absolute;
    left: 50%;
    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;
}

更新2

显然，您可以使用框阴影CSS的一个额外参数来完成此操作，正如其他所有人所指出的那样。这是演示：

http://jsfiddle.net/K88H9/821/

的CSS

1
2
3
-webkit-box-shadow: 0 4px 4px -2px #000000;
   -moz-box-shadow: 0 4px 4px -2px #000000;
      box-shadow: 0 4px 4px -2px #000000;

这将是一个更好的解决方案。添加的额外参数描述为：

The fourth length is a spread
distance. Positive values cause the
shadow shape to expand in all
directions by the specified radius.
Negative values cause the shadow shape
to contract.

更新

在jsFiddle上查看演示：http://jsfiddle.net/K88H9/4/

我所做的是创建一个"阴影元素"，该阴影元素将隐藏在您想要具有阴影的实际元素后面。我使"阴影元素"的宽度比实际元素的宽度小2倍于您指定的阴影。然后我将其正确对齐。

的HTML

1
 

的CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#wrapper {
    width: 84px;
    position: relative;
}
#element {
    background-color: #3D668F;
    height: 54px;
    width: 100%;
    position: relative;
    z-index: 10;
}
#shadow {
    background-color: #3D668F;
    height: 8px;
    width: 80px;
    margin-left: -40px;
    position: absolute;
    bottom: 0px;
    left: 50%;
    z-index: 5;
    -webkit-box-shadow: 0px 2px 4px #000000;
       -moz-box-shadow: 0px 2px 4px #000000;
            box-shadow: 0px 2px 4px #000000;
}

原始答案

是的，您可以使用提供的相同语法来执行此操作。第一个值控制水平位置，第二个值控制垂直位置。因此，只需将第一个值设置为0px，第二个设置为您想要的任何偏移量，如下所示：

1
2
3
-webkit-box-shadow: 0px 5px #000000;
   -moz-box-shadow: 0px 5px #000000;
        box-shadow: 0px 5px #000000;

有关框阴影的更多信息，请查看以下内容：

  • http://www.css3.info/preview/box-shadow/
  • https://developer.mozilla.org/en/css/-moz-box-shadow#Browser_compatibility
  • http://www.w3.org/TR/css3-background/#the-box-shadow

我希望这有帮助。

相关讨论

只需使用spread参数使阴影变小：

1
2
3
4
5
.shadow {
  -webkit-box-shadow: 0 6px 4px -4px black;
  -moz-box-shadow: 0 6px 4px -4px black;
  box-shadow: 0 6px 4px -4px black;
}
1
Some content

现场演示：http：//dabblet.com/gist/a8f8ba527f5cff607327

为了在侧面看不到任何阴影，展开半径(的绝对值)(第4个参数)必须与模糊半径(第3个参数)相同。

相关讨论

如果背景颜色固定，则可以使用两个与背景颜色相同的遮罩阴影来隐藏侧阴影效果，并且blur = 0，例如：

1
2
3
4
box-shadow:
    -6px 0 white,         /*Left masking shadow*/
    6px 0 white,          /*Right masking shadow*/
    0 7px 4px -3px black; /*The real (slim) shadow*/

请注意，黑色阴影必须是最后一个阴影，并且具有负展布(-3px)，以防止其超出角落。

这里是小提琴(更改遮罩阴影的颜色以查看其实际工作原理)。

enter image description here

相关讨论

我想这就是你的追求？

1
2
3
4
5
.shadow {
  -webkit-box-shadow: 0 0 0 4px white, 0 6px 4px black;
  -moz-box-shadow: 0 0 0 4px white, 0 6px 4px black;
  box-shadow: 0 0 0 4px white, 0 6px 4px black;
}
1
wefwefwef

相关讨论

最好阅读规范。没有box-shadow-bottom属性，正如Lea指出的那样，您应始终将无前缀的属性放在底部的前缀属性之后。

所以是：

1
2
3
4
5
.shadow {
  -webkit-box-shadow: 0px 2px 4px #000000;
  -moz-box-shadow: 0px 2px 4px #000000;
  box-shadow: 0px 2px 4px #000000;
}
1
Some content

相关讨论

只使用包含div且溢出设置为隐藏且底部有填充的div怎么样？这似乎是最简单的解决方案。

抱歉地说我自己没想到这个，但在其他地方看到了。

Using an element to wrap the element getting the box-shadow and a overflow: hidden on the wrapper you could make the extra box-shadow disappear and still have a usable border.
This also fixes the problem where the element is smaller as it seems, because of the spread.

Like this:

1
2
#wrapper { padding-bottom: 10px; overflow: hidden; }
#elem { box-shadow: 0 0 10px black; }

Content goes here

Still a clever solution when it has to be done in pure CSS!

正如乔根·埃文斯(Jorgen Evens)所说。

相关讨论

您还可以使用clip-path修剪(隐藏)所有要显示的边缘，但要显示的边缘：

1
2
3
4
.shadow {
  box-shadow: 0 4px 4px black;
  clip-path: polygon(0 0, 100% 0, 100% 200%, 0 200%);
}

请参阅剪辑路径(MDN)。 polygon的参数是左上角，右上角，右下角和左下角。通过将底部边缘设置为200%(或大于100%的任何数字)，可以将溢出限制为仅底部边缘。

相关讨论

我还需要阴影，但只需要在图像下方，并设置在稍微偏左和偏右的位置。这为我工作：

1
2
3
4
5
.box-shadow {
   -webkit-box-shadow: 5px 35px 30px -25px #888888;
      -moz-box-shadow: 5px 35px 30px -25px #888888;
           box-shadow: 5px 35px 30px -25px #888888;
}

应用于此的元素是一个页面范围的图像(980像素x 300像素)。

如果在修改设置时有帮助，它们将按以下方式运行：

水平阴影，垂直阴影，模糊距离，散布度(即阴影大小)和颜色。

您也可以在底部进行渐变-这对我很有帮助，因为我想要的阴影位于已经是半透明的元素上，因此我不必担心任何裁剪：

1
2
3
4
5
6
7
8
9
&:after {
      content:"";
      width:100%;
      height: 8px;
      position: absolute;
      bottom: -8px;
      left: 0;
      background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
    }

只需使"底部"和"高度"属性匹配，并将您的rgba值设置为您希望它们在阴影顶部/底部的任何值即可

这段代码笔(不是我本人)演示了一种非常简单的方式来做到这一点，而其他方面则很好地演示了它们：

1
box-shadow: 0 5px 5px -5px #333;

https://codepen.io/zeckdude/pen/oxywmm

最好看一下阴影：

1
2
3
4
5
.header{
    -webkit-box-shadow: 0 -8px 73px 0 rgba(0,0,0,0.2);
    -moz-box-shadow: 0 -8px 73px 0 rgba(0,0,0,0.2);
    box-shadow: 0 -8px 73px 0 rgba(0,0,0,0.2);
}

该代码当前在stackoverflow网站上使用。

如果您的背景是纯色(或者您可以使用CSS进行复制)，则可以使用线性渐变：

1
2
3
div {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 5px, #fff 5px, #fff 100%)
}
1
2
3
4
5
6
<p>
Foobar
</p>
<p>
test
</p>

这将在元素底部生成5px的渐变，从不透明度为30％的黑色到完全透明。元素的其余部分具有白色背景。当然，更改线性渐变的最后两个色标，可以使背景完全透明。

更新别人的答案，而不是白色的透明面，因此它也适用于其他颜色背景。

1
2
3
4
5
6
7
8
9
10
11
12
13
body {
  background: url(http://s1.picswalls.com/wallpapers/2016/03/29/beautiful-nature-backgrounds_042320876_304.jpg)
}

div {
  background: url(https://www.w3schools.com/w3css/img_avatar3.png) center center;
  background-size: contain;
  width: 100px;
  height: 100px;
  margin: 50px;
  border: 5px solid white;
  box-shadow: 0px 0 rgba(0, 0, 0, 0), 0px 0 rgba(0, 0, 0, 0), 0 7px 7px -5px black;
}
1
 

内心的阴影

1
2
3
4
5
 .shadow {
   -webkit-box-shadow: inset 0 0 9px #000;
   -moz-box-shadow: inset 0 0 9px #000;
   box-shadow: inset 0 0 9px #000;
 }
1
wefwefwef