Question

可能重复：
drop shadow only bottom css3

我找不到任何有关如何执行此操作的示例，但如何仅在元素的顶部和底部添加框阴影？

Answer 1

正如克里斯蒂安指出的那样，对z值的良好控制通常可以解决你的问题。

如果这不起作用，你可以看看CSS Box Shadow Bottom Only使用隐藏溢出来隐藏多余的阴影。

我还要记住，box-shadow属性可以接受逗号分隔的阴影列表，如下所示：

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

这将使您可以控制每个方向的阴影“量”。

有关box-shadow的更多信息，请查看http://www.css3.info/preview/box-shadow/。

希望这就是你想要的！

Answer 2

经过一些实验，我发现该行中的第四个值控制了传播（至少在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>

这对我来说非常合适！

Answer 3

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

<强> HTML

<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%;
}

Answer 4

我玩过它，我想我有一个解决方案。以下示例显示如何设置Box-Shadow，使其仅显示元素顶部和底部的插入阴影。

图例：insetOption leftPosition topPosition blurStrength spreadStrength color

<强>描述
完成此操作的关键是将模糊值设置为＆lt; =展开值的负值（例如插入0px 5px - ？px 5px＃000;模糊值应为-5和更低）并保持模糊值＆gt;当从主要定位值中减去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);   
}

Answer 5

基本上阴影是盒子形状，只是在实际盒子后面偏移。为了隐藏阴影的一部分，你需要创建额外的div并在阴影框上方设置它们的z-index，以便阴影不可见。

如果您希望对阴影进行非常具体的控制，请将它们构建为图像，并使用适当数量的填充和边距创建容器div ..然后使用png修复确保阴影在所有浏览器中正确呈现

CSS Box Shadow - 仅限顶部和底部

5 个答案: