CSS 框阴影-仅限顶部和底部

我找不到任何示例来说明如何做到这一点，但如何才能只在元素的顶部和底部添加框阴影？

377834 次浏览
小开

实际上阴影就是盒子的形状偏移到实际盒子的后面。为了隐藏阴影的部分，您需要创建额外的 div 并将它们的 z 索引设置在阴影框的上方，以便阴影不可见。

如果你想对你的阴影有非常明确的控制，那么把它们构建成图像，并且创建一个带有适量填充和边距的容器 div。.然后使用 png 修复程序来确保阴影在所有浏览器中正确呈现

小开
最佳答案

正如克里斯蒂安所指出的，对 z 值的良好控制通常会解决您的问题。

如果这不工作，你可以看看 只有阴影底部上使用溢出隐藏隐藏多余的阴影。

我还会考虑到，box-shadow 属性可以接受以逗号分隔的阴影列表，如下所示:

box-shadow: 0px 10px 5px #888, 0px -10px 5px #888;

这将给你一些控制在每个方向的“数量”的阴影。

查看 http://www.css3.info/preview/box-shadow/了解更多关于盒子阴影的信息。

希望这就是你要找的！

小开

我已经试过了，我想我有办法了。下面的示例演示如何设置 Box-Shadow，以便它只显示元素顶部和底部插入的阴影。

图例 : insetOption left 位置顶部模糊力量传播力量颜色

描述
实现这一点的关键是将模糊值设置为 < = 传播值的负值(如。插入0px 5 px-？Px 5px # 000; 模糊值应该是 -5或更低) ，并且当从主定位值中减去模糊值时，模糊值应该保持 > 0(例如。使用上面的例子，模糊值应该是 -9或者更高，这样我们就得到了一个模糊值在 -5和 -9之间的最佳值。

解决方案 

.styleName {
/* for IE 8 and lower */
background-color:#888; filter: progid:DXImageTransform.Microsoft.dropShadow(color=#FFFFCC, offX=0, offY=0, positive=true);


/* for IE 9 */
box-shadow: inset 0px 2px -2px 2px rgba(255,255,204,0.7), inset 0px -2px -2px 2px rgba(255,255,204,0.7);


/* for webkit browsers */
-webkit-box-shadow: inset 0px 2px -2px 2px rgba(255,255,204,0.7), inset 0px -2px -2px 2px rgba(255,255,204,0.7);


/* for firefox 3.6+ */
-moz-box-shadow: inset 0px 2px -2px 2px rgba(255,255,204,0.7), inset 0px -2px -2px 2px rgba(255,255,204,0.7);
}
小开

经过一些实验，我发现第四个值在线控制传播(至少在 FF 10)。我反对垂直偏移，给他们一个负的价差。

这是工作笔: http://codepen.io/gillytech/pen/dlbsx

<html>
<head>
<style type="text/css">


#test {
width: 500px;
border: 1px  #CCC solid;
height: 200px;


box-shadow:
inset 0px 11px 8px -10px #CCC,
inset 0px -11px 8px -10px #CCC;
}
</style>
</head>
<body>
<div id="test"></div>
</body>
</html>

这对我来说再合适不过了！

小开

所以这是我的第一个答案，因为我需要类似的东西，我做了伪元素2内阴影，和一个额外的 DIV 为上外阴影。不知道这是否是最好的解决方案，但也许它会帮助某人。

超文本标示语言

<div class="shadow-block">
<div class="shadow"></div>
<div class="overlay">
<div class="overlay-inner">
content here
</div>
</div>
</div>

CSS

.overlay {
background: #f7f7f4;
height: 185px;
overflow: hidden;
position: relative;
width: 100%;
}


.overlay:before {
border-radius: 50% 50% 50% 50%;
box-shadow: 0 0 50px 2px rgba(1, 1, 1, 0.6);
content: " ";
display: block;
margin: 0 auto;
width: 80%;
}


.overlay:after {
border-radius: 50% 50% 50% 50%;
box-shadow: 0 0 70px 5px rgba(1, 1, 1, 0.5);
content: "-";
display: block;
margin: 0 auto;
position: absolute;
bottom: -65px;
left: -50%;
right: -50%;
width: 80%;
}


.shadow {
position: relative;
width:100%;
height:8px;
margin: 0 0 -22px 0;
-webkit-box-shadow: 0px 0px 50px 3px rgba(1, 1, 1, 0.6);
box-shadow: 0px 0px 50px 3px rgba(1, 1, 1, 0.6);
border-radius: 50%;
}

提交答案