CSS CSS3 box-shadow:inset 只能做一侧或两侧吗？像边界顶部？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5917412/
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
Can CSS3 box-shadow:inset do only one or two sides? like border-top?
提问by ndmweb
I'm wondering about the support for side specific inner shadows in css3.
我想知道 css3 中对侧面特定内部阴影的支持。
I know this works great on supported browsers.
我知道这在支持的浏览器上效果很好。
div { box-shadow:inset 0px 1px 5px black; }
I'm just curious as to whether there is a way to achieve something like:
我只是好奇是否有办法实现以下目标：
div { box-shadow-top:inset 0px 1px 5px black; }
回答by nischtname
This is what worked for me:
这对我有用：
box-shadow: inset 1px 4px 9px -6px;
Example: http://jsfiddle.net/23Egu/
回答by seler
I don't think your really need box-shadow-topbecause if you set offsetxto 0 and offsetyto any positive value only remaining shadow is on top.
我不认为你真的需要，box-shadow-top因为如果你设置offsetx为 0 和offsety任何正值，只有剩余的阴影在顶部。
if you want to have shadow on top and shadow in the bottom you just can simply use two divs:
如果您想在顶部有阴影而在底部有阴影，您只需使用两个 div：
<div style="box-shadow:inset 0 1px 5px black;">
<div style="box-shadow:inset 0 -1px 5px black;">
some content
</div>
</div>
if you want to get rid of shadow on sides use rgbainstead of hexcolor and set bigger offsety:
如果你想摆脱侧面的阴影，请使用rgba而不是hex颜色并设置更大offsety：
box-shadow:inset 0 5px 5px rgba(0,0,0,.5)
this way you give shadow more opacity so sides stay hidden and with more offset you get less opacity
通过这种方式，您可以为阴影提供更多不透明度，以便侧面保持隐藏，并且偏移越大，不透明度越低
full example:
完整示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
body {
background: #1C1C1C;
}
div {
margin: 50px auto;
width: 200px;
height: 200px;
background: #fff;
-webkit-border-radius: 20px;
-khtml-border-radiust: 20px;
-moz-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px;
box-shadow:inset 0px 5px 5px rgba(0,0,0,.5);
}
div > div {
background:none;
box-shadow:inset 0px -5px 5px rgba(0,0,0,.5);
}
</style>
</head>
<body>
<div><div></div></div>
</body>
</html>
回答by Jakob Cosoroaba
using :beforeand afterelements with regular shadows cut of by overflow:hiddenon the parent box like in this example: http://dabblet.com/gist/2585782
在父框上使用:before和after具有常规阴影的元素，overflow:hidden如本例所示：http: //dabblet.com/gist/2585782
CSS
CSS
/**
* Top and Bottom inset shadow
*/
#element{
background-color: #E3F2F7;
height: 55px;
position: relative; /* to position pseudo absolute*/
overflow: hidden; /* to cut of overflow shadow*/
margin-top: 200px;
}
#element:before , #element:after{
content: "<div id="element"></div>
20";
display: block;
position: absolute;
width: 100%;
height: 1px; /* when 0 no shadow is displayed*/
box-shadow: #696c5c 0 0 8px 0;
}
#element:before { top: -1px} /* because of height: 1*/
#element:after { bottom: -1px} /* because of height: 1*/
HTML
HTML
@include background(linear-gradient(top, #666 1%, #999 3%, #ddd 6%, #f6f6f6 9%, #f6f6f6 92%, #ddd 94%, #999 97%, #666 99%) );
回答by Omar Jalalzada
You can use a background gradient for a work around in most cases:
在大多数情况下，您可以使用背景渐变来解决：
SCSS(with compass) example:
SCSS（带指南针）示例：
box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);
-moz-box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);
-o-box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);
回答by poopsplat
box-shadow: inset 0px 6px 5px -5px black;
This works just lovely :)
这很好用:)
Here is a codepen illustrating it: http://codepen.io/poopsplat/pen/cGBLy
这是一个说明它的代码笔：http://codepen.io/poopsplat/pen/cGBLy
回答by GBMan
For the same shadow but only on the top :
对于相同的阴影，但仅在顶部：
box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;
To have the shadow in one direction you have to negate the "blur" parameter with the "spread" parameter and then adjust the "h-pos" and/or "v-pos" parameters by this same value. It doesn't work with opposite border or triple border. You have to add one more definition.
要使阴影在一个方向上，您必须使用“spread”参数否定“blur”参数，然后通过相同的值调整“h-pos”和/或“v-pos”参数。它不适用于对边或三边边框。您必须再添加一个定义。
More examples here : http://codepen.io/GBMan/pen/rVXgqP
回答by Cristi Onofrei
I just had this problem myself. The solution that I found was with multiple box-shadows (one for each side that you want your shadow). Here is the definition:
我自己就遇到了这个问题。我找到的解决方案是使用多个框阴影（您想要阴影的每一侧一个）。这是定义：
box-shadow:
inset 0 -8px 4px 4px rgb(255,255,255),
inset 0 2px 4px 0px rgba(50, 50, 50, 0.75);
Here is how to think it:
这是如何思考的：
- first, make the spread 0 (this will disable the effect on all sides)
- the h-offset (if you set it to be positive, it will cast on the left side, if you set it negative, on the right side)
- the v-offset (if you set it to be positive, it will cast on the top side, if you set it negative, on the bottom side
- 首先，使价差为 0（这将禁用所有方面的效果）
- h 偏移量（如果将其设置为正数，它将在左侧投射，如果将其设置为负数，则在右侧投射）
- v-offset（如果将其设置为正值，它将在顶部投射，如果将其设置为负值，则在底部投射
Here you can see my case with box-shadow on three sides (left, top, right and the bottom is with same color as the background to create the effect that I wanted - the left side and the right go all the way to the bottom) https://codepen.io/cponofrei/pen/eMMyQX
在这里你可以看到我的箱子在三个侧面都有框阴影（左、上、右和底部与背景颜色相同，以创建我想要的效果 - 左侧和右侧一直到底部) https://codepen.io/cponofrei/pen/eMMyQX
回答by Mark Kahn
No, not directly, but you can crop off the parts that you don't want by putting it in a div with overflow: hidden:
不，不是直接的，但是你可以通过将它放在一个 div 中来剪掉你不想要的部分overflow: hidden：
回答by shaunw
Multiple box shadows did the trick for me.
多个框阴影对我有用。
<div id="innerShadow">
<div id="innerShadowTop">
Content...
<div id="innerShadowBottom">
</div>
回答by Jason George
You can accomplish a single-sided, inner shadow by setting your div to overflow:hiddenand adding shadow elements along the borders.
您可以通过将 div 设置为overflow:hidden并沿边框添加阴影元素来实现单面的内部阴影。
Set an inner shadow on the top and bottom borders of a division:
在分区的顶部和底部边框上设置内部阴影：
HTML
HTML
#innerShadow
{
position: relative;
overflow: hidden;
}
#innerShadowTop
{
width: 100%;
height: 1px;
margin: 0;
padding: 0;
position: absolute;
top: -1px;
-moz-box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
-webkit-box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
-o-box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
}
#bannerShadowBottom
{
width: 100%;
height: 1px;
margin: 0;
padding: 0;
position: absolute;
bottom: -1px;
-moz-box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
-webkit-box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
-o-box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
}
CSS
CSS
##代码##