1

我有以下CSS代码：

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

我如何使它只显示底部边框。我有一个模糊半径，所以不确定要更改或添加到上面的代码片段中。

4

4 回答 4

2

根据模糊半径减小散布距离（即散布距离需要补偿添加的模糊）。不要忘记调整偏移量以补偿点差的减少。

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

http://jsfiddle.net/p469p/

你也只需要box-shadow. Mozilla 和 Webkit 已经支持它很长时间了。

有关更多信息，请参见仅底部 css3 的阴影

于 2013-03-29T20:21:46.753 回答
0 
<!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>

这是唯一的方法

于 2013-03-29T20:24:39.740 回答
0

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

仅在底部 css3 中放置阴影

于 2013-03-29T20:33:21.983 回答
0

You could use a linear gradient on the background:

background:linear-gradient(transparent 0%, transparent 90%,rgba(0,0,0,.7) 90%,transparent 100%);
于 2017-08-23T17:13:13.307 回答