创建特殊效果CSS框阴影

Question

尝试创建一个仅在div底部仅在中央较暗并向侧面逐渐淡出的框阴影。

我可以找到的最接近的教程是： http : //www.paulund.co.uk/creating-different-css3-box-shadows-effects （效果＃6）

但是，我根本不希望侧面有任何阴影。 这可能吗？ 还是我必须通过图像来创建？

Answer 1

您可以修改效果6以处理您的查询

.effect6 {
    position:relative;   
}
.effect6:before, .effect6:after {
    content:"";
    position:absolute; 
    z-index:-1;
    box-shadow:0 0 15px rgba(0,0,0,0.8);
    top:50%;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}

这是小提琴

没有直接的解决方案，因此您必须稍微调整设置才能创建所需的内容。

Answer 2

如果您想要类似于特效6的东西，但又想稍作改动，我创建了一个使用这些特效的工具。

http://coveloping.com/tools/css-box-shadow-generator

您可以修改设置并实时查看其对样式的影响。