488

我怎样才能做到这一点？我希望我的元素看起来好像有阴影下划线。我不想要其他 3 面的阴影。

4

4 回答 4

1035

做这个： 

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

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

于 2011-06-05T21:08:28.753 回答
58

您可以使用两个元素，一个在另一个内部，并给外部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/

于 2010-12-30T08:39:30.660 回答
26

尝试这个

-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/中看到它

于 2011-08-14T23:32:53.300 回答
11

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

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

这也适用于外框阴影。

于 2012-12-03T10:21:45.810 回答