如何在四个方面应用盒子阴影？

Question

我试图box-shadow在所有四方面都申请.我只能在两个方面得到它:

Answer 1

这是因为x和y偏移.试试这个:

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

编辑(一年后..):根据评论中的要求,使答案更加跨浏览器:)

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

Answer 2

请参阅: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;
}

Answer 3

这看起来很酷.

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

Answer 4

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

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

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

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

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

颜色：阴影的颜色 - 可选

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

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

box-shadow: 0 0 10px #999;

box-shadow 与传播效果更好

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

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

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

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

Answer 5

就像这段代码一样简单:

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

Answer 6

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

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