阴影只有底部css3 [英] drop shadow only bottom css3
问题描述
有没有办法只在底部放下阴影？我有一个菜单有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;
/ *对于IE 8 * /
-ms-filter：progid：DXImageTransform.Microsoft.Shadow（Strength = 4，Direction = 180，Color ='＃000000'）;
/ *对于IE 5.5 - 7 * /
filter：progid：DXImageTransform.Microsoft.Shadow（Strength = 4，Direction = 180，Color ='＃000000'）;
UPDATE 3
我所有的以前的答案已经使用额外的标记来创建这种效果，这不一定需要。我认为这是一个很多更清洁的解决方案...唯一的窍门是玩弄的值，以获得正确的位置的阴影，以及正确的强度/不透明度的阴影。这是一个新的小调，使用伪元素：
http://jsfiddle.net/UnsungHero97/ARRRZ/2/
HTML
< div id = 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;
}
UPDATE 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;
这将是一个更好的解决方案。添加的额外参数描述为：
第四个长度是一个点差
距离。正值导致
阴影形状在所有
方向上按指定的半径展开。
负值会使阴影形状
收缩。
UPDATE
查看jsFiddle的演示： http://jsfiddle.net/K88H9/4/ p>
我做的是创建一个阴影元素，隐藏在实际元素后面你想要一个阴影。我使阴影元素的宽度比实际元素的宽度小2倍的阴影你指定;
< 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：//开发人员.mozilla.org / en / css / -moz-box-shadow＃Browser_compatibility
- http://www.w3.org/TR/css3-background/#the-box- shadow
我希望这有助于。
Is there a way to drop the shadow only on the bottom?. I have a menu with 2 images next to eachother. I don't want a right shadow because it overlaps the right image. I don't like to use images for this so is there a way to drop it only on the bottom like:
box-shadow-bottom: 10px #FFF; or similar?
-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');
UPDATE 3
All my previous answers have been using extra markup to get create this effect, which is not necessarily needed. I think this a much cleaner solution... the only trick is playing around with the values to get the right positioning of the shadow as well as the right strength/opacity of the shadow. Here's a new fiddle, using 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;
}
UPDATE 2
Apparently, you can do this with just an extra parameter to the box-shadow CSS as everyone else just pointed out. Here's the demo:
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;
This would be a better solution. The extra parameter that is added is described as:
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.
UPDATE
Check out the demo at jsFiddle: http://jsfiddle.net/K88H9/4/
What I did was create a "shadow element" that would hide behind the actual element that you would want to have a shadow. I made the width of the "shadow element" to be exactly less wide than the actual element by 2 times the shadow you specify; then I aligned it properly.
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;
}
Original Answer
Yes, you can do this with the same syntax you have provided. The first value controls the horizontal positioning and the second value controls the vertical positioning. So just set the first value to 0px and the second to whatever offset you'd like as follows:
-webkit-box-shadow: 0px 5px #000000;
-moz-box-shadow: 0px 5px #000000;
box-shadow: 0px 5px #000000;
For more info on box shadows, check out these:
- 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
I hope this helps.
这篇关于阴影只有底部css3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
