CSS3知识点——box-shadow属性

CSS3知识点——box-shadow属性

box-shadow：10px 10px 10px 10px #000000 insert;

/* x轴（必选）| y轴（必选） | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 | 阴影内外*/

其中，x轴为正时，阴影在右边，为负值时在左边；y轴为正时，在下边，为负值时在上边。

图1

Have a try~

.test{

        width: 100px;

        height: 100px;

        background-color: blue;

}

①四边都有阴影

box-shadow：0px 0px 10px #000000;

图2

②右边阴影

box-shadow：10px 0px 5px #000000;

图3

③左边阴影

box-shadow：-10px 0px 5px #000000;

图4

④下边阴影

box-shadow：0px 10px 5px #000000;

图5

⑤上边阴影

box-shadow：0px -10px 5px #000000;

图6

⑥右下阴影

box-shadow：10px 10px 5px #000000;

图7

⑦右上阴影

box-shadow：10px -10px 5px #000000;

图8

⑧左下阴影

box-shadow：-10px 10px 5px #000000;

图9

⑨左上阴影

box-shadow：-10px -10px 5px #000000;

图10

⑩内部四边阴影

box-shadow：0px 0px 20px #000000 inset;

图11

⑪内部左上阴影

box-shadow：10px 10px 5px #000000 inset;

图12

可以看出内部阴影和外部阴影在x轴和y轴上相反。

PS：该属性适用于盒模型（div，p，h1~h6），文字阴影使用test-shadow。

为了兼容各个主流浏览器，基于主流浏览器上使用box-shadow时，我们需要将属性的名称写成-weikit-box-shadow的形式。Firefox浏览器则需要写成-moz-box-shadow的形式，Opera浏览器 -o-box-shadow，IE > 9则是-ms-box-shadow。