如何仅在元素的一侧创建阴影?


230

有没有办法只在底部放阴影?我有一个包含2张图像的菜单。我不想要正确的阴影,因为它会重叠正确的图像。我不喜欢为此使用图像,因此有一种方法可以将其仅拖放到底部,例如:

box-shadow-bottom: 10px #FFF; 或类似的?

-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');

8
您接受的答案引用box-shadow-bottom不存在,并且不受任何人支持。请参阅nicolasgallagher.com/css-drop-shadows-without-images/demo,以了解合法的盒子阴影技术。
保罗·爱尔兰

@Paul ...我有错字,是固定的。
赫里斯托

1
CSS示例中的注释具有误导性- filter在IE8和IE9中也可以使用。-ms-filter在这种情况下不需要。
Mathias Bynens 2011年

您可以改写现实的插图CSS阴影:stackoverflow.com/a/20596554/1491212
Armel Larcier 2014年

Answers:


234

更新4

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

#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;
}
<div id="box" class="box-shadow"></div>

更新3

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

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

的HTML

<div id="box" class="box-shadow"></div>

的CSS

#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

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

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

第四长度是展开距离。正值会导致阴影形状沿所有方向扩展指定的半径。负值会使阴影形状收缩。

更新

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

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

的HTML

<div id="wrapper">
    <div id="element"></div>
    <div id="shadow"></div>
</div>

的CSS

#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,将第二个值设置为您想要的任何偏移量,如下所示:

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

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

我希望这有帮助。


2
您不一定需要添加一个空的div以获得模糊的阴影。声明中的第三个值:box-shadow: 0 2px 4px #000000是模糊值。看到这里http://jsfiddle.net/K88H9/7/。但是您会注意到,该元素的左侧和右侧有些模糊,而在Hristo的解决方案中则没有。

9
没有box-shadow-bottom属性,并且此效果绝对不需要额外的元素。uck
Lea Verou 2011年

7
box-shadow-bottom,尽管具有创造力,但实际上并不存在。
miketaylr 2011年

3
寒冷的家伙...这是一个令人毛骨悚然的错字
Hristo11

1
@gryzzly ...我确实编辑了答案,直到所有人都指出我才发现错字。对于那个很抱歉。
赫里斯特

71

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

.shadow {
  -webkit-box-shadow: 0 6px 4px -4px black;
  -moz-box-shadow: 0 6px 4px -4px black;
  box-shadow: 0 6px 4px -4px black;
}
<div class="shadow">Some content</div>

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

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


1
这实际上是行不通的。乍一看,似乎阴影仅在底部,但实际上它仍在侧面扩散。每个人的示例都带有一个深蓝色的盒子...将盒子变成白色,您将看到所有阴影。
克里斯L

@Chris M:只需增加点差参数:尝试使用4个示例,box-shadow:0 8px 4px -6px您只会看到底部阴影!
T30 2014年

1
再次,像在小提琴那样将盒子变成白色,您仍然会看到阴影一直向上穿过侧面,现在也不会一直穿过底部。您愿意继续使用spread参数摆脱多面?另外,可能最适合151代表的人不要编辑7k代表的人的答案。留下评论。
克里斯L

1
@ T30当然,您最终可以通过进一步减少传播参数来摆脱局面。但是现在您的阴影远没有达到盒子的宽度。您有一个84px的框和72px的阴影。
克里斯L

1
更新的答案。但基本上,除了减小传播半径和调整Y偏移之外,没有什么可以做的。也许使用渐变而不是阴影?另外,我不介意人们编辑我的帖子,但是我不喜欢人们编辑我的帖子以添加用类似英语的语言写的句子。我也不是说英语的人,我也理解挑战,但是如果我正在编辑其他人的帖子,我将承担足够的责任,至少要仔细检查一下我添加的内容是否合理,语法是否正确令人尴尬的错误。
Lea Verou 2014年

30

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

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

请注意,黑色阴影必须是最后一个阴影,并且具有负扩展(-3px),以防止其扩展到角落之外。

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

div{
    width: 100px;
    height: 100px;
    border: 1px solid pink;
    box-shadow: -6px 0 white, 6px 0 white, 0 7px 5px -2px black;
}
<div></div>

在此处输入图片说明


1
transparent颜色用于遮罩阴影会更好,不是吗?
天使约瑟夫·皮斯科拉'17

@AngelJosephPiscola:聪明的提示..在答案中实现,谢谢!
T30

@ T30很棒,但是请注意,使用透明蒙版,您不需要固定的颜色背景;)
天使约瑟夫·皮斯科拉

我对其进行了更好的测试,并且透明阴影不起作用,所以我回滚了最后的编辑
T30,2017年

6

我想这就是你的追求?

.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;
}
<div class="shadow">wefwefwef</div>


2
当人们根本不了解时,喜欢它。是的,他搞砸了将覆盖真实阴影(黑色)边缘的第一个阴影(白色)的扩散。这是获得完美单向阴影的唯一明智的方法。当您需要在菜单的两个部分上具有相同的阴影时,此功能特别有用。
Zeno Popovici 2014年

5

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

所以这是:

.shadow {
  -webkit-box-shadow: 0px 2px 4px #000000;
  -moz-box-shadow: 0px 2px 4px #000000;
  box-shadow: 0px 2px 4px #000000;
}
<div class="shadow">Some content</div>


1
两侧都有阴影
Shinzou

2

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

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

使用元素来包装元素会得到盒子阴影和溢出:隐藏在包装器上,可以使多余的盒子阴影消失,并且仍然具有可用的边框。这也解决了由于扩散而元素看起来较小的问题。

像这样:

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

内容在这里

当必须在纯CSS中完成时,它仍然是一个聪明的解决方案!

正如乔根埃文斯所说。


+1为解决方案。除了padding-bottom(假设为5px)之外,您还可以设置一个负数margin-bottom(-5px)来补偿增加的空间。
fabio.sang

2

您还clip-path可以剪裁(隐藏)所有溢出的边缘,但要显示的边缘:

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

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


所以...从根本上讲,剪切路径是溢出的:类固醇的隐藏属性。这很干净。;)
克雷格(Craig

1

我还需要一个阴影,但只需要在图像下方,并设置在左右两侧。这为我工作:

.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

最好看一下阴影:

.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网站上使用。



0

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

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

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


0

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

&: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值设置为您希望它们位于阴影顶部/底部的任何值即可


0

您可以这样做:

通用语法:

selector {
   box-shadow: topBoxShadow, bottomBoxShadow, rightBoxShadow, leftBoxShadow
}

范例:我们只想用红色制作底盒阴影,

为此,我们必须设置所有侧面选项,在其中我们必须设置底部框阴影选项,并将所有其他选项设置为空,如下所示:

.box {
     -moz-box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
     -o-box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
     -webkit-box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
     box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
}

-1

更新别人的答案,而不是白色的透明面,因此也可以在其他颜色背景上使用。

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;
}
<div>
</div>


-3

内心的阴影

 .shadow {
   -webkit-box-shadow: inset 0 0 9px #000;
   -moz-box-shadow: inset 0 0 9px #000;
   box-shadow: inset 0 0 9px #000;
 }
<div class="shadow">wefwefwef</div>

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.