Question

我有以下css代码：

     box-shadow: 0px 1px 5px #888;
    -moz-box-shadow: 0px 1px 5px #888;
    -webkit-box-shadow: 0px 1px 5px #888;

如何制作以便只显示底部边框。我有一个模糊半径，因此不确定要更改或添加到上面的代码段。

Answer 1

根据模糊半径减小展开距离（即展开距离需要补偿模糊的增加）。不要忘记调整偏移量以补偿扩散的减少。

box-shadow: 0px 4px 5px -3px #888;

http://jsfiddle.net/p469p/

您还需要box-shadow。 Mozilla和Webkit支持它for a long time。

有关更多信息，请参阅drop shadow only bottom css3

Answer 2

<!DOCTYPE html>
    <html>
        <head>
        <style> 
            div {
            box-shadow: 0px 2px #888;
            }
        </style>
        </head>
    <body>
    <div>
        The border-radius property allows you to add rounded corners to elements.
    </div>
</body>

这是唯一的方法

Answer 3

您可能想查看此StackOverflow中发布的解决方案：

drop shadow only bottom css3

Answer 4

您可以在背景上使用线性渐变：

background:linear-gradient(transparent 0%, transparent 90%,rgba(0,0,0,.7) 90%,transparent 100%);

如何仅使用以下css向底部添加框阴影？

4 个答案: