CSS css3 框阴影只在一个方向？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4756316/
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
css3 box shadows in one direction only?
提问by Mark
I have an element that has inset box shadows, but I want the shadow on only the top.
我有一个具有插入框阴影的元素，但我只想要顶部的阴影。
Is there no way to set only the top shadow? Do I have to resort to creating additional elements to overlay the side shadows?
有没有办法只设置顶部阴影？我是否必须求助于创建额外的元素来覆盖侧影？
回答by zzzzBov
This is technically the same answer as @ChrisJ, with a few more details on how to make box-shadowdo your bidding:
这在技术上与@ChrisJ 的答案相同，还有一些关于如何进行box-shadow出价的详细信息：
for reference the * items are optional:
供参考* 项目是可选的：
box-shadow: <inset*> <offset-x> <offset-y> <blur-radius*> <spread-radius*> <color*>;
The <spread-radius>needs to be negative <blur-radius>(so that none of the other blurred sides show up), and then you need to bump the <offset-y>down by the same amount:
该<spread-radius>需求为负<blur-radius>（使没有其他模糊侧面显示），然后你需要撞击<offset-y>相同的量下降：
box-shadow: inset 0 20px 20px -20px #000000;
It will give you a single gradient band across the top of the element.
它会给你一个横跨元素顶部的单一渐变带。
回答by ChrisJ
box-shadow offsets the shadow by a given amount in each direction. So you need x-offset to be 0, and y-offset to be something negative.
box-shadow 在每个方向以给定的量偏移阴影。所以你需要 x-offset 为 0，y-offset 为负数。
Additionally, you have to play with the blur-radius and spread-radius so that the shadow is not visible on the left and right sides.
此外，您必须使用模糊半径和传播半径，以便左右两侧看不到阴影。
Example:
例子：
box-shadow: #777 0px -10px 5px -2px;
See the description on the Mozilla Developer Network.
请参阅Mozilla 开发人员网络上的说明。
回答by methodofaction
A better way would be using a background gradient, here are both side to side.
更好的方法是使用背景渐变，这里是左右两边的。
回答by Shabnam K
Example:
例子：
box-shadow: 0 2px 0px 0px red inset;
The First parameter and second parameters specifies the offset of shadow to x-direction and y-direction respectively. Third parameter specifies the blur distance. Finally, the fourth parameter specifies the spread distance.
第一个参数和第二个参数分别指定阴影到 x 方向和 y 方向的偏移量。第三个参数指定模糊距离。最后，第四个参数指定传播距离。
Specifying only the second parameter with the offset you want gives the top shadow without side shadows.
仅指定带有您想要的偏移量的第二个参数会产生没有侧面阴影的顶部阴影。
Demo can be found here: http://jsfiddle.net/rEdBy/
演示可以在这里找到：http: //jsfiddle.net/rEdBy/
A very nice tutorial on CSS3 Box shadows - http://www.css3.info/preview/box-shadow/
一个非常好的 CSS3 框阴影教程 - http://www.css3.info/preview/box-shadow/
回答by Webpixstudio
Here is my example please try once
这是我的示例，请尝试一次
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
回答by Marcos Eusebi
Maybe try using box-shadow:
也许尝试使用 box-shadow：
box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow: h-shadow v-shadow blur spread color inset;
with overflow-x:
使用溢出-x：
overflow-x: visible|hidden|scroll|auto|no-display|no-content;
overflow-x: visible|hidden|scroll|auto|no-display|no-content;
use overflow-x: hidden;and box-shadow: 0px 10px 16px -10px #000;
使用overflow-x: hidden;和box-shadow: 0px 10px 16px -10px #000;
回答by Marcos Eusebi
Here's a little hack that I did.
这是我做的一个小技巧。
<div id="element"><!--element that I want an one-sided inset shadow from the bottom--></div>
<div class="one_side_shadow"></div>
Create a
<div class="one_side_shadow"></div>right below the element that I want to create the one-side box shadow (in this case I want a one-sided inset shadow forid="element"coming from the bottom)Then I created a regular box shadow using a negative vertical offset to push the shadow upwards to one-side.
box-shadow: 0 -8px 20px 2px #DEDEE3;
<div class="one_side_shadow"></div>在要创建单侧框阴影的元素下方创建一个右侧（在这种情况下，我想要一个id="element"来自底部的单侧插入阴影）然后我使用负的垂直偏移创建了一个常规的框阴影，将阴影向上推到一侧。
框阴影：0 -8px 20px 2px #DEDEE3;
