如何仅在元素的一侧创建阴影? [英] How to create a drop shadow only on one side of an element?

问题描述

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

Is there a way to drop the shadow only on the bottom?. I have a menu with 2 images next to each other. 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;或类似的内容?

-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 4

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

UPDATE 4

Same like update 3 but with modern css (=less rules) so that no special positioning on the pseudo element is required.

#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>

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

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

更新2

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

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.

更新

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

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

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

原始答案

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

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

• 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

我希望这会有所帮助.

这篇关于如何仅在元素的一侧创建阴影?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！