Teo*_*dor 140
正如克里斯蒂安指出的那样,对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/.
希望这是你想要的!
gil*_*ech 92
经过一些实验,我发现该行中的第四个值控制了传播(至少在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>
这对我来说非常合适!
小智 5
所以这是我在这里的第一个答案，因为我需要类似的东西，我对 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%;
}
| 归档时间： |
|
| 查看次数： |
257532 次 |
| 最近记录： |