关于下划线：仅CSS Box Shadow Bottom


CSS Box Shadow Bottom Only

本问题已经有最佳答案，请猛点这里访问。

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

相关讨论

做这个：

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

实际上，这要简单得多，无论您将模糊设置为(第3个值)，还是将色散(第4个值)设置为负值。

相关讨论

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#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/

相关讨论

尝试这个

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

相关讨论

尝试此操作以使盒子阴影完全受控。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
    <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>
       
       
    </body>

    </html>

这同样适用于外部盒子阴影。

相关讨论