创建特效CSS box-shadow

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

Here's a Fiddle

没有直接的解决方案，所以你必须稍微调整设置以创建你想要的东西。

Answer 2

如果你想要类似于效果6的东西，但想稍微改变一下，我已经创建了一个使用这些效果的工具。

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

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