logo标签列表

CSS 盒子阴影仅限底部

cssunderlinebox-shadow
520

如何实现这个效果？我希望我的元素看起来像有一个带阴影的下划线，但我不想在其他三个方向上加阴影。

1
如果您的背景是单色的，也可以尝试这种方法。 - T30
4个回答
1124

按照以下步骤进行操作：

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

实际上很简单，无论您将模糊设置为多少（第三个值），都将扩展（第四个值）设置为其相反数。

9
这绝对是最好的方法。纯CSS3，无需任何技巧。 - thelastshadow
249
如果有人想要理解为什么这个可以运作:
  • 第一个值将光源的x偏移设置为0。
  • 第二个值将光源的y偏移设置为+4。
  • 第三个值设置了2像素的模糊效果。(使阴影变得不均匀)
  • 第四个值将阴影的传播范围设置为-2px。(将阴影收缩2像素)
这将导致阴影的宽度比您所阴影的元素少4像素，因此如果您只想要一个普通的下划线，请将最后一个值设置为0。 - Ceasar
5
在 Firefox 18.X 下，这对我没有起作用。对我有效的是：box-shadow: inset 0 -4px 3px black; 但它也会在侧面生成一些阴影.. :_( - elboletaire
8
然而，对于较大的阴影（20像素或更多），它效果不佳... :( - Shimon S
3
并非完全任意。0不需要单位。因此，添加单位是多余的并浪费空间。因此，最好不要添加单位。但是：我经常添加单位以便于在“对象检查器”中轻松更改值……但那更像是一种调试功能……我猜测，如果值为0，大多数压缩程序都会删除单位。 - Stijn de Witt
显示剩余10条评论
59

你可以使用两个元素，一个位于另一个内部，给外部元素设置 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/

1
如果您需要为所有窗口大小显示阴影，那么这个解决方案非常棒。 - JeanValjean
这是一个更符合问题要求的解决方案。它确实覆盖了元素的整个底部。然而，根据我的经验，被标记为正确的答案显示的阴影略短于底部。 - cbdeveloper
28

尝试一下这个。

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

3
20像素 0 20像素 20像素 对我来说运作良好。 - Meloman
12

尝试这个方法，以便更好地控制盒子阴影效果。

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

这同样适用于外部的 box-shadow。

1
如何使用这种技术来实现模糊效果？ - Baldráni
底部带模糊的阴影：box-shadow: 0 -6px 7px -7px 灰色 inset; - Jeff Luyet
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接