CSS Box Shadow Bottom Only [复制]

最新推荐文章于 2023-06-13 21:55:17 发布

CHCH998

最新推荐文章于 2023-06-13 21:55:17 发布

阅读量324

点赞数

文章标签： css underline box-shadow

原文链接：https://oldbug.net/q/J8Y5/CSS-Box-Shadow-Bottom-Only-duplicate

版权

本文翻译自：CSS Box Shadow Bottom Only [duplicate]

This question already has an answer here: 这个问题在这里已有答案：

drop shadow only bottom css3 13 answers drop shadow only bottom css3 13 answers

How can I do this? 我怎样才能做到这一点？ I want my element to look as though it has a shadow underline. 我希望我的元素看起来好像有一个阴影下划线。 I don't want the shadow for the other 3 sides. 我不希望其他三方的阴影。

#1楼

参考：https://stackoom.com/question/J8Y5/CSS-Box-Shadow-Bottom-Only-复制

#2楼

try this to get the box-shadow under your full control. 尝试这样可以完全控制盒子阴影。

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

this would apply to outer box-shadow as well. 这也适用于外框阴影。

#3楼

You can use two elements, one inside the other, and give the outer one overflow: hidden and a width equal to the inner element together with a bottom padding so that the shadow on all the other sides are "cut off" 您可以使用两个元素，一个在另一个内部，并给外部一个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);
}

Alternatively, float the outer element to cause it to shrink to the size of the inner element. 或者，浮动外部元素以使其缩小到内部元素的大小。 See: http://jsfiddle.net/QJPd5/1/ 请参阅： http ： //jsfiddle.net/QJPd5/1/

#4楼

Do this: 做这个：

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

It's actually much simpler, whatever you set the blur to (3rd value), set the spread (4th value) to the negative of it. 它实际上要简单得多，无论你将模糊设置为（第三个值），将传播（第四个值）设置为负值。

#5楼

Try this 试试这个

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

You can see it in http://jsfiddle.net/wJ7qp/ 你可以在http://jsfiddle.net/wJ7qp/看到它