只投影底部css3
有没有办法只将阴影放在底部？我有一个菜单，旁边有两张图片。我不想要一个正确的阴影，因为它与正确的图像重叠。我不喜欢使用图像，因此有一种方法可以将它放在底部，如：
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');
16 个答案:
答案 0 :(得分：221)
更新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
我以前的所有答案都使用额外的标记来创建这种效果，这不一定是必需的。我认为这是一个很多更干净的解决方案......唯一的诀窍就是利用这些值来获得阴影的正确定位以及阴影的正确强度/不透明度。这是一个新的小提琴，使用pseudo-elements：
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
显然，你可以使用box-shadow 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;
有关框阴影的更多信息，请查看以下内容：
- 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
我希望这会有所帮助。
答案 1 :(得分：63)
只需使用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个参数）相同。
答案 2 :(得分：21)
如果背景上有固定的颜色，则可以隐藏侧阴影效果，使用两个遮罩阴影，背景颜色相同，模糊= 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），以防止它超出角落。
这里是fiddle（更改遮罩阴影的颜色以查看真正的工作方式）。
答案 3 :(得分：5)
阅读the specs总是更好。没有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>
答案 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;
}<div class="shadow">wefwefwef</div>
答案 5 :(得分：2)
如何使用包含div的溢出设置为隐藏和底部的填充？这似乎是最简单的解决方案。
很抱歉，我自己并没有想到这一点，但看到了somewhere else。
使用元素包装元素获取box-shadow和溢出：隐藏在包装器上，你可以使额外的box-shadow消失，并且仍然有一个可用的边框。 由于传播，这也解决了元素看起来较小的问题。
像这样：
#wrapper { padding-bottom: 10px; overflow: hidden; } #elem { box-shadow: 0 0 10px black; }内容在这里
当必须在纯CSS中完成时，仍然是一个聪明的解决方案！
正如Jorgen Evens所述。
答案 6 :(得分：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;
}
此应用的元素是页面范围的图像（980px x 300px）。
如果在摆弄设置时有所帮助，它们按如下方式运行：
水平阴影，垂直阴影，模糊距离，展开（即阴影大小）和颜色。
答案 7 :(得分：1)
您还可以使用clip-path裁剪（隐藏）所有要显示的边缘，但要显示的边缘：
.shadow {
box-shadow: 0 4px 4px black;
clip-path: polygon(0 0, 100% 0, 100% 200%, 0 200%);
}
请参见clip-path (MDN)。 polygon的参数是左上角点，右上角点，右下角点和左下角点。通过将底边设置为200%（或大于100%的任何数字），可以将溢出限制在底边。
答案 8 :(得分：1)
另一个基于 the answer of @theengineear 的想法，我将使用 inset 而不是 polygon。它更容易，因为它的工作方式与边距或填充相同。我还将依靠 CSS 变量轻松定义所有不同的情况。
.shadow {
box-shadow: 0 0 8px 5px rgba(200, 0, 0, 0.5);
clip-path:inset(var(--t,0) var(--r,0) var(--b,0) var(--l,0))
}
.top { --t:-100%; }
.right { --r:-100%;}
.bottom { --b:-100%; }
.left { --l:-100%;}
/* layout for example */
.box {
display: inline-block;
vertical-align: top;
background: #338484;
color: #fff;
width: 4em;
height: 2em;
margin: 1em;
padding: 1em;
}<div class="box">none</div>
<div class="box shadow top right left bottom">all</div>
<div class="box shadow top">top</div>
<div class="box shadow right">right</div>
<div class="box shadow bottom">bottom</div>
<div class="box shadow left">left</div>
<div class="box shadow bottom right">bottom right</div>
<div class="box shadow bottom top">top bottom</div>
<div class="box shadow left top right">top left right</div>
<div class="box shadow left right"> left right</div>答案 9 :(得分：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个色标，可以使背景完全透明。
答案 10 :(得分：0)
最好看一下阴影：
.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网站上使用。
答案 11 :(得分：0)
这支代码笔（不是我本人）演示了一种非常简单的方法，并且很好地展示了其他方面：
box-shadow: 0 5px 5px -5px #333;
答案 12 :(得分：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值设置为您希望它们位于阴影顶部/底部的任何值
答案 13 :(得分：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
}
答案 14 :(得分：-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>
答案 15 :(得分：-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>
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？