CSS 如何仅在元素的一侧创建投影?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/5460129/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create a drop shadow only on one side of an element?
提问by damage000
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:
有没有办法只在底部放置阴影?我有一个菜单,其中有 2 张图像并排。我不想要正确的阴影,因为它与正确的图像重叠。我不喜欢为此使用图像,所以有没有办法只将它放在底部,例如:
box-shadow-bottom: 10px #FFF;
or similar?
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');
回答by Hristo
UPDATE 4
更新 4
Same like update 3 but with modern css (=less rules) so that no special positioning on the pseudo element is required.
与更新 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>
UPDATE 3
更新 3
All my previous answers have been using extra markup to get create this effect, which is not necessarily needed. I think this a muchcleaner 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/
http://jsfiddle.net/UnsungHero97/ARRRZ/2/
HTML
HTML
<div id="box" class="box-shadow"></div>
CSS
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
更新 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:
显然,正如其他人刚刚指出的那样,您只需使用 box-shadow CSS 的一个额外参数就可以做到这一点。这是演示:
http://jsfiddle.net/K88H9/821/
http://jsfiddle.net/K88H9/821/
CSS
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/
在 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.
我所做的是创建一个“阴影元素”,它将隐藏在您想要阴影的实际元素后面。我使“阴影元素”的宽度比实际元素的宽度小了您指定的阴影的 2 倍;然后我正确对齐它。
HTML
HTML
<div id="wrapper">
<div id="element"></div>
<div id="shadow"></div>
</div>
CSS
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:
是的,您可以使用您提供的相同语法执行此操作。第一个值控制水平定位,第二个值控制垂直定位。因此,只需将第一个值设置为0px
,将第二个值设置为您想要的任何偏移量,如下所示:
-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
I hope this helps.
我希望这有帮助。
回答by Lea Verou
Just use the spread parameter to make the shadow smaller:
只需使用 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>
Live demo: http://dabblet.com/gist/a8f8ba527f5cff607327
现场演示:http: //dabblet.com/gist/a8f8ba527f5cff607327
To not see any shadow on the sides, the (absolute value of the) spread radius (4th parameter) needs to be the same as the blur radius (3rd parameter).
为了在侧面看不到任何阴影,传播半径(第 4 个参数)的(绝对值)需要与模糊半径(第 3 个参数)相同。
回答by T30
If you have a fixed color on the background, you can hide the side-shadow effect with two masking shadowshaving the same color of the background and blur = 0, example:
如果背景上有固定颜色,则可以使用两个与背景颜色相同且模糊 = 0 的遮罩阴影来隐藏侧影效果,例如:
box-shadow:
-6px 0 white, /*Left masking shadow*/
6px 0 white, /*Right masking shadow*/
0 7px 4px -3px black; /*The real (slim) shadow*/
Note that the black shadow must be the last, and has a negative spread (-3px) in order to prevent it from extendig beyond the corners.
请注意,黑色阴影必须是最后一个,并且具有负扩展 (-3px) 以防止其超出角落。
Here the fiddle(change the color of the masking shadows to see how it reallyworks).
这是小提琴(更改遮罩阴影的颜色以查看其实际工作原理)。
div{
width: 100px;
height: 100px;
border: 1px solid pink;
box-shadow: -6px 0 white, 6px 0 white, 0 7px 5px -2px black;
}
<div></div>
回答by James T
I think this is what you're after?
我想这就是你所追求的?
.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>
回答by Misha Reyzlin
It's always better to read the specs. There is no box-shadow-bottom
property, and as Lea points out you should always place the un-prefixed property at the bottom, after the prefixed ones.
阅读规范总是更好的。没有box-shadow-bottom
属性,正如 Lea 指出的那样,您应该始终将未带前缀的属性放在底部,在带前缀的属性之后。
So it's:
所以是:
.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>
回答by Ben
How about just using a containing div which has overflow set to hidden and some padding at the bottom? This seems like much the simplest solution.
只使用一个包含溢出设置为隐藏和底部填充的 div 怎么样?这似乎是最简单的解决方案。
Sorry to say I didn't think of this myself but saw it somewhere else.
很抱歉,我自己没有想到这一点,而是在其他地方看到的。
Using an element to wrap the element getting the box-shadow and a overflow: hidden on the wrapper you could make the extra box-shadow disappear and still have a usable border. This also fixes the problem where the element is smaller as it seems, because of the spread.
Like this:
#wrapper { padding-bottom: 10px; overflow: hidden; } #elem { box-shadow: 0 0 10px black; }
Content goes here
Still a clever solution when it has to be done in pure CSS!
使用一个元素来包装元素获得 box-shadow 和一个溢出:隐藏在包装上你可以使额外的 box-shadow 消失并且仍然有一个可用的边框。这也解决了元素由于传播而看起来更小的问题。
像这样:
#wrapper { padding-bottom: 10px; overflow: hidden; } #elem { box-shadow: 0 0 10px black; }
内容在这里
当它必须在纯 CSS 中完成时仍然是一个聪明的解决方案!
As said by Jorgen Evens.
正如Jorgen Evens所说。
回答by theengineear
You could also use clip-path
to clip (hide) all overflowing edges but the one you want to show:
您还可以使用clip-path
裁剪(隐藏)所有溢出的边缘,但要显示的边缘:
.shadow {
box-shadow: 0 4px 4px black;
clip-path: polygon(0 0, 100% 0, 100% 200%, 0 200%);
}
See clip-path (MDN). The arguments to polygon
are the top-leftpoint, the top-rightpoint, the bottom-rightpoint, and the bottom-leftpoint. By setting the bottom edge to 200%
(or whatever number bigger than 100%
) you constrain your overflow to only the bottom edge.
请参阅剪辑路径(MDN)。的参数polygon
是左上点、右上角点、右下点和左下点。通过将底部边缘设置为200%
(或任何大于 的数字100%
),您可以将溢出限制为仅底部边缘。
回答by Kamlesh
It is better to look up shadow:
最好查一下影子:
.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);
}
this code is currently using on stackoverflow web.
此代码目前在 stackoverflow 网站上使用。
回答by David Daudelin
This code pen (not by me) demonstrates a super simple way of doing this and the other sides by themselves quite nicely:
这个代码笔(不是我的)演示了一种非常简单的方法来做到这一点,而其他方面则非常好:
box-shadow: 0 5px 5px -5px #333;
回答by Chris9
I also needed a shadow but only under an image and set in slightly left and right. This worked for me:
我还需要一个阴影,但只在图像下方,并稍微向左和向右设置。这对我有用:
.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;
}
The element this is applied to is a page-wide image (980px x 300px).
应用于此的元素是一个页面宽度的图像 (980px x 300px)。
If it helps when fiddling with the settings, they run as follows:
如果在摆弄设置时有帮助,它们会按如下方式运行:
horizontal shadow, vertical shadow, blur distance, spread (i.e. shadow size), and color.
水平阴影、垂直阴影、模糊距离、传播(即阴影大小)和颜色。