仅CSS框阴影底部[重复]答案

【问题标题】：CSS Box Shadow Bottom Only [duplicate]仅CSS框阴影底部[重复]
【发布时间】：2011-06-01 11:00:03
【问题描述】：

我该怎么做？我希望我的元素看起来好像有阴影下划线。我不想要其他 3 面的阴影。

【问题讨论】：

如果你有单色背景，也可以试试this method

【解决方案1】：

您可以使用两个元素，一个在另一个内部，并给外部一个overflow: hidden 和等于内部元素的宽度以及底部填充，以便所有其他侧的阴影都被“切断”

#outer {
    width: 100px;
    overflow: hidden;
    padding-bottom: 10px;
}

#outer > div {
    width: 100px;
    height: 100px;
    background: orange;

    -moz-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
}

或者，浮动外部元素以使其缩小到内部元素的大小。见：http://jsfiddle.net/QJPd5/1/

【讨论】：

如果您必须显示所有窗口大小的阴影，此解决方案非常棒。
这是一个更适合问题要求的解决方案。它确实跨越了元素的整个底部。而根据我的经验，正确答案显示的阴影比底部略短。

【解决方案2】：

这样做：

box-shadow: 0 4px 2px -2px gray;

实际上要简单得多，无论您将模糊设置为（第 3 个值），将散布（第 4 个值）设置为负值。

【讨论】：

这是迄今为止最好的方法。纯 css3，没有 hack。
以防万一有人想知道为什么会这样： * 第一个值将光源的 x 偏移设置为 0。 * 第二个值将光源的 y 偏移设置为 +4 . * 第三个值设置 2px 的模糊效果。（使阴影不均匀）。 * 第四个值将点差设置为 -2px。（将阴影收缩 2px。）这将导致阴影比您要阴影的元素小 4px，因此如果您只想要一个普通的下划线，请将最后一个值设置为 0。
在 Firefox 18.X 下它对我不起作用。对我有用的是：box-shadow: inset 0 -4px 3px black; 但它也会在侧面产生一点阴影.. :_(
但是它不适用于大（20px 或更多）阴影... :(
@ahnbizcad 并非完全随意。 0 不需要单位。因此，添加一个单元是多余的并且浪费空间。因此优选不添加单元。然而：我经常添加一个单元来轻松更改对象检查器中的值...但这更多的是调试功能...我的猜测是大多数如果值为0，缩小器将丢弃该单位。

【解决方案3】：

试试这个

-moz-box-shadow:0 5px 5px rgba(182, 182, 182, 0.75);
-webkit-box-shadow: 0 5px 5px rgba(182, 182, 182, 0.75);
box-shadow: 0 5px 5px rgba(182, 182, 182, 0.75);

你可以在http://jsfiddle.net/wJ7qp/看到它

【讨论】：

20px 0 20px 20px 对我来说很好

【解决方案4】：

试试这个让你完全控制盒子阴影。

    <html>

    <head>
        <style> 
            div {
                width:300px;
                height:100px;
                background-color:yellow;
                box-shadow: 0 10px black inset,0 -10px red inset, -10px 0 blue inset, 10px 0 green inset;
           }
        </style>
    </head>
    <body>
        <div>
        </div>
    </body>

    </html>

这也适用于外框阴影。

【讨论】：

如何用这种技术获得模糊？