CSS 如何在所有四个边上应用框阴影？

How to apply box-shadow on all four sides?

提问by dragonfly

I'm trying to apply a box-shadowon all four sides. I could only get it on 2 sides:

我正在尝试box-shadow在所有四个方面都应用 a 。我只能从两个方面得到它：

回答by Damb

It's because of x and y offset. Try this:

这是因为 x 和 y 偏移。尝试这个：

-webkit-box-shadow: 0 0 10px #fff;
        box-shadow: 0 0 10px #fff;

edit (year later..): Made the answer more cross-browser, as requested in comments :)

编辑（一年后..）：按照评论中的要求，使答案更加跨浏览器:)

btw: there are many css3 generator nowadays.. css3.me, css3maker, css3generatoretc...

顺便说一句：现在有很多 css3 生成器.. css3.me, css3maker, css3generator等...

回答by thirtydot

See: http://jsfiddle.net/thirtydot/cMNX2/8/

见：http: //jsfiddle.net/thirtydot/cMNX2/8/

input {
    -webkit-box-shadow: 0 0 5px 2px #fff;
    -moz-box-shadow: 0 0 5px 2px #fff;
    box-shadow: 0 0 5px 2px #fff;
}

回答by Nalan Madheswaran

This looks cool.

这看起来很酷。

-moz-box-shadow: 0 0 5px #999;
-webkit-box-shadow: 0 0 5px #999;
box-shadow: 0 0 5px #999;

回答by Pankskie

Just simple as this code:

就像这段代码一样简单：

box-shadow: 0px 0px 2px 2px black; /*any color you want*/

回答by Huzaif Sayyed

The most simple solution and easiest way is to add shadow for all four side. CSS

最简单的解决方案和最简单的方法是为所有四个边添加阴影。CSS

box-shadow: 0 0 2px 2px #ccc; /* with blur shadow*/
box-shadow: 0 0 0 2px #ccc; /* without blur shadow*/

回答by user3619130

I found the http://css-tricks.com/forums/topic/how-to-add-shadows-on-all-4-sides-of-a-block-with-css/site.

我找到了http://css-tricks.com/forums/topic/how-to-add-shadows-on-all-4-sides-of-a-block-with-css/站点。

.allSides
{
    width:350px;height:200px;
    border: solid 1px #555;
    background-color: #eed;
    box-shadow: 0 0 10px rgba(0,0,0,0.6);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.6);
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.6);
    -o-box-shadow: 0 0 10px rgba(0,0,0,0.6);
}

回答by Seshu

Understand box-shadow syntax and write it accordingly

理解 box-shadow 语法并相应地编写

box-shadow: h-offset v-offset blur spread color;

h-offset: Horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box - Required

h-offset：阴影的水平偏移。正值将阴影放在框的右侧，负值将阴影放在框的左侧 - 必需

v-offset: Vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box - Required

v-offset：阴影的垂直偏移。正值将阴影置于框下方，负值将阴影置于框上方 - 必需

blur: Blur radius (The higher the number, the more blurred the shadow will be) - Optional

模糊：模糊半径（数字越大，阴影越模糊） - 可选

color: Color of the shadow - Optional

颜色：阴影的颜色 - 可选

spread: Spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow - Optional

传播：传播半径。正值增加阴影的大小，负值减少阴影的大小 - 可选

inset: Changes the shadow from an outer shadow to an inner shadow - Optional

插图：将阴影从外部阴影更改为内部阴影 - 可选

box-shadow: 0 0 10px #999;

box-shadow works better with spread

box-shadow 与传播效果更好

box-shadow: 0 0 10px 8px #999;

use 'inset' to apply shadow inside of the box

使用“inset”在盒子内部应用阴影

box-shadow: 0 0 8px inset #999;
(or)
box-shadow: 0 0 8px 8px inset #999;

use rgba (red green blue alpha) to adjust the shadow more efficiently

使用rgba（红绿蓝alpha）更有效地调整阴影

box-shadow: 0 0 8px inset rgba(153, 153, 153, 0.8); 
(or)
box-shadow: 0 0 8px 8px inset rgba(153, 153, 153, 0.8); 

回答by Ans

You can different combinations at the following link.
https://www.cssmatic.com/box-shadow

您可以在以下链接中进行不同的组合。
https://www.cssmatic.com/box-shadow

The results which you need can be achieved by the following CSS

您需要的结果可以通过以下 CSS 实现

-webkit-box-shadow: 0px 0px 11px 1px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 11px 1px rgba(0,0,0,1);
box-shadow: 0px 0px 11px 1px rgba(0,0,0,1);

回答by Bal mukund kumar

Use this css code for all four sides: box-shadow: 0px 1px 7px 0px rgb(106, 111, 109);

对所有四个边使用此 css 代码： box-shadow: 0px 1px 7px 0px rgb(106, 111, 109);