有没有办法只在底部放阴影?我有一个菜单,彼此相邻有2张图像。我不想要正确的阴影,因为它会重叠正确的图像。我不喜欢为此使用图像,因此有一种方法可以将其仅放置在底部,例如:
box-shadow-bottom: 10px #FFF; 或类似的?
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');
与更新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>
我以前所有的答案都一直在使用额外的标记来创建此效果,而这并不是必需的。我认为这是一种 更 清洁的解决方案…唯一的窍门是使用值来获得阴影的正确位置以及阴影的正确强度/不透明度。
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; }
显然,您可以使用框阴影CSS的一个额外参数来完成此操作,正如其他所有人所指出的那样。这是演示:
-webkit-box-shadow: 0 4px 4px -2px #000000; -moz-box-shadow: 0 4px 4px -2px #000000; box-shadow: 0 4px 4px -2px #000000;
这将是一个更好的解决方案。添加的额外参数描述为:
第四长度是展开距离。正值会使阴影形状沿所有方向扩展指定的半径。负值会使阴影形状收缩。
我所做的是创建一个“阴影元素”,该阴影元素将隐藏在您想要具有阴影的实际元素后面。我使“阴影元素”的宽度比实际元素的宽度小2倍于您指定的阴影。然后我将其正确对齐。
<div id="wrapper"> <div id="element"></div> <div id="shadow"></div> </div>
#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然后将第二个设置为您想要的任何偏移量,如下所示:
0px
-webkit-box-shadow: 0px 5px #000000; -moz-box-shadow: 0px 5px #000000; box-shadow: 0px 5px #000000;
我希望这有帮助。