CSS 仅顶部、左侧和右侧的 CSS3 框阴影
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4909561/
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 Shadow on Top, Left, and Right Only
提问by NightMICU
Greetings,
你好，
I am trying to apply a CSS3 box shadow to only the top, right, and left of a DIV with a radius that matches the result of the following CSS (minus the bottom shadow)
我正在尝试将 CSS3 框阴影仅应用于 DIV 的顶部、右侧和左侧，其半径与以下 CSS 的结果相匹配（减去底部阴影）
#div {
-webkit-box-shadow: 0px 0px 10px #000;
-moz-box-shadow: 0px 0px 10px #000;
box-shadow: 0px 0px 10px #000;
}
What would be the best way to accomplish this?
实现这一目标的最佳方法是什么？
Thanks!
谢谢！
UPDATEThis shadow will be applied to a nav bar on a page, the bar is positioned on the top of the main container DIV. What I am trying to accomplish is to continue the box shadow of the main DIV onto the nav bar, which sits above it, but without a bottom shadow on the nav bar. Take a look at the site itselfto see what I'm talking about, easier than adding all of the HTML and CSS here.
UPDATE此阴影将应用于页面上的导航栏，该栏位于主容器 DIV 的顶部。我想要完成的是将主 DIV 的框阴影延续到位于其上方的导航栏上，但导航栏上没有底部阴影。查看站点本身以了解我在说什么，这比在此处添加所有 HTML 和 CSS 更容易。
UPDATE 2Since the DIV I am working with is singular, rather than trying to place a shadow on each nav li, I elected to change it to the following:
更新 2由于我正在使用的 DIV 是单数，而不是试图在每个导航 li 上放置阴影，我选择将其更改为以下内容：
-webkit-box-shadow: 0px -4px 7px #e6e6e6;
-moz-box-shadow: 0px -4px 7px #e6e6e6;
box-shadow: 0px -4px 7px #e6e6e6;
This makes the top of the shadow very noticeable but it's what I am trying to accomplish - if anyone knows of a way to keep the shadow the same in appearance to the container DIV, please let me know. Thanks!
这使得阴影的顶部非常明显，但这正是我想要完成的 - 如果有人知道如何使阴影在容器 DIV 的外观上保持相同，请告诉我。谢谢！
采纳答案by methodofaction
It's better if you just cover the bottom part with another div and you will get consistent drop shadow across the board.
如果你只是用另一个 div 覆盖底部，你会得到一致的阴影。
#servicesContainer {
/*your css*/
position: relative;
}
and it's fixed! like magic!
它是固定的！就像魔法一样！
回答by Orlando
回答by Artur Keyan
You can give multiple values to box-shadowproperty
eg
您可以为box-shadow属性
提供多个值，
例如
-moz-box-shadow: 0px 10px 12px 0px #000,
0px -10px 12px 0px #000;
-webkit-box-shadow: 0px 10px 12px 0px #000,
0px -10px 12px 0px #000;
box-shadow: 0px 10px 12px 0px #000,
0px -10px 12px 0px #000;
it is drop shadow to leftand rightonly, you can adapt it to your requirements
它是阴影，以左和右而已，你可以将它适应您的要求
回答by yichengliu
I found a way to cover the shadow with ":after", here is my code:
我找到了一种用“：after”覆盖阴影的方法，这是我的代码：
#div:after {
content:"";
position:absolute;
width:5px;
background:#fff;
height:38px;
top:1px;
right:-5px;
}
回答by Ya Basha
The following code did it for me to make a shadow inset of the right side:
以下代码帮我制作了右侧的阴影插图：
-moz-box-shadow: inset -10px 0px 10px -10px #000;
-webkit-box-shadow: inset -10px 0px 10px -10px #000;
box-shadow: inset -10px 0px 10px -10px #000;
Hope it will help!!!!
希望它会有所帮助！！！！
回答by Mikolaj
I was having the same issue and was searching for a possible idea to solve this.
我遇到了同样的问题，正在寻找解决此问题的可能想法。
I had some CSS already in place for my tabs and this is what worked for me:
我已经为我的选项卡准备了一些 CSS，这对我有用：
(Note specifically the padding-bottom: 2px;inside #tabs #selected a {. That hides the bottom box-shadowneatly and worked great for me with the following CSS.)
（特别注意padding-bottom: 2px;inside #tabs #selected a {。它box-shadow巧妙地隐藏了底部，使用以下 CSS 对我来说非常有用。）
#tabs {
margin-top: 1em;
margin-left: 0.5em;
}
#tabs li a {
padding: 1 1em;
position: relative;
top: 1px;
background: #FFFFFF;
}
#tabs #selected {
/* For the "selected" tab */
box-shadow: 0 0 3px #666666;
background: #FFFFFF;
}
#tabs #selected a {
position: relative;
top: 1px;
background: #FFFFFF;
padding-bottom: 2px;
}
#tabs ul {
list-style: none;
padding: 0;
margin: 0;
}
#tabs li {
float: left;
border: 1px solid;
border-bottom-width: 0;
margin: 0 0.5em 0 0;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
Thought I'd put this out there as another possible solution for anyone perusing SO for this.
以为我会把它作为另一种可能的解决方案，供任何为此仔细阅读 SO 的人使用。
回答by Jaketr00
I know this is very old, but none of these answers helped me, so I'm adding my answer. This, like @yichengliu's answer, uses the Pseudo ::afterelement.
我知道这已经很老了，但是这些答案都没有帮助我，所以我添加了我的答案。这与@yichengliu 的回答一样，使用伪::after元素。
#div {
position: relative;
}
#div::after {
content: '';
position: absolute;
right: 0;
width: 1px;
height: 100%;
z-index: -1;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,1);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,1);
}
/*or*/
.filter.right::after {
content: '';
position: absolute;
right: 0;
top: 0;
width: 1px;
height: 100%;
background: white;
z-index: -1;
-webkit-filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 1));
filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 1));
}
If you decide to change the X of the drop shadow (first pixel measurement of the drop-shadowor box-shadow), changing the width will help so it doesn't look like there is a white gap between the div and the shadow.
如果您决定更改阴影的X（第一像素测量drop-shadow或box-shadow），更改宽度将有助于所以它看起来并不像有div和阴影之间的差距白色。
If you decide to change the Y of the drop shadow (second pixel measurement of the drop-shadowor box-shadow), changing the height will help for the same reason as above.
如果您决定更改阴影的Y（第二像素测量drop-shadow或box-shadow），改变高度将有助于为原因同上。
回答by jdhartley
Adding a separate answer because it is radically different.
添加一个单独的答案，因为它完全不同。
You could use rgba and set the alpha channel low (to get transparency) to make your drop shadow less noticeable.
您可以使用 rgba 并将 alpha 通道设置为低（以获得透明度），以使您的投影不那么明显。
Try something like this (play with the .5)
尝试这样的事情（玩 .5）
-webkit-box-shadow: 0px -4px 7px rbga(230, 230, 230, .5);
-moz-box-shadow: 0px -4px 7px rbga(230, 230, 230, .5);
box-shadow: 0px -4px 7px rbga(230, 230, 230, .5);
Hope this helps!
希望这可以帮助！
回答by Ravi Bhoraniya
#div:before {
content:"";
position:absolute;
width:100%;
background:#fff;
height:38px;
top:1px;
right:-5px;
}
