CSS3 box-shadow：inset只能做一两面吗？ 像边框？
我想知道在css3中支持边特定的内部阴影。
我知道这在支持的浏览器上效果很好。
div { box-shadow:inset 0px 1px 5px black; } 我只是好奇，是否有办法实现这样的事情：
div { box-shadow-top:inset 0px 1px 5px black; }
这对我来说是有效的：
box-shadow: inset 1px 4px 9px -6px;
例如： http : //jsfiddle.net/23Egu/
我不认为你真的需要box-shadow-top因为如果你将offsetx设置为0， offsety为任何正值，只剩下阴影在上面。
如果你想在上面有阴影而在下面有阴影，你可以简单地使用两个div：
<div style="box-shadow:inset 0 1px 5px black;"> <div style="box-shadow:inset 0 -1px 5px black;"> some content </div> </div>
如果你想摆脱双方的影子使用rgba而不是hex颜色，并设置较大的offsety ：
box-shadow:inset 0 5px 5px rgba(0,0,0,.5)
这样，你给阴影更多的不透明度，所以双方保持隐藏和更多的抵消你得到更less的不透明度
完整的例子：
<!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>
使用:before正常阴影被overflow:hidden元素:before和after overflow:hidden在父框上，如下例所示： http : //dabblet.com/gist/2585782
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: "\0020"; 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
<div id="element"></div>
在大多数情况下，您可以使用背景渐变来解决问题：
SCSS（带指南针）例子：
@include background(linear-gradient(top, #666 1%, #999 3%, #ddd 6%, #f6f6f6 9%, #f6f6f6 92%, #ddd 94%, #999 97%, #666 99%) );
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);
这工作只是可爱:)
这里是一个codepen说明它： http ://codepen.io/poopsplat/pen/cGBLy
不，不是直接的，但是你可以把你不想要的部分放在一个带overflow: hidden的div中overflow: hidden ：
对于同样的影子，只能在顶部：
box-shadow: inset 0px 6px 5px -5px black;
要在一个方向上产生阴影，必须用“spread”参数否定“blur”参数，然后通过相同的值调整“h-pos”和/或“v-pos”参数。 它不适用于相反的边界或三重边界。 你必须添加一个定义。
更多的例子在这里： http : //codepen.io/GBMan/pen/rVXgqP
您可以通过将div设置为overflow:hidden和添加阴影元素来实现单面的内部阴影。
在分区的顶部和底部边框上设置内部阴影：
HTML
<div id="innerShadow"> <div id="innerShadowTop"> Content... <div id="innerShadowBottom"> </div>
CSS
#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); }
box-shadow是所有四面。 你不能改变（还？）。 box-shadow定义中的4种尺寸是OffsetX ， offsetY ， Blur和Spread 。
多箱阴影为我做了诡计。
box-shadow: inset 0 -8px 4px 4px rgb(255,255,255), inset 0 2px 4px 0px rgba(50, 50, 50, 0.75);
