您现在的位置是:蓝石榴 > 个人博客 > 前端

个人博客

CSS3阴影box-shadow

2016-09-15前端 1668
box-shadow是向盒子添加阴影,支持添加一个或者多个。很简单的一段代码,就实现了投影效果,酷毙了。
1.使用方法:

box-shadow是向盒子添加阴影,支持添加一个或者多个。

很简单的一段代码,就实现了投影效果,酷毙了。我们来看下语法:

box-shadow:X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]

①X轴偏移量 必须,水平阴影的位置,允许负值;

②Y轴偏移量 必须,垂直阴影的位置,允许负值;

③阴影模糊半径 可选,模糊距离;

④阴影扩展半径 可选,阴影的尺寸;

⑤阴影颜色 可选,阴影的颜色,省略默认为黑色;

⑥投影方式 可选,设置为inset时为内部阴影方式,省略为外部阴影方式。

注意:inset可以写在参数的第一个或最后一个,其它位置是无效的。

2.为元素设置外阴影:

.boxshadow-outset{

width:100px;

height:100px;

box-shadow:4px 4px 6px #666

}

效果如下:

3.为元素设置内阴影:

.boxshadow-outset{

width:100px;

height:100px;

box-shadow:4px 2px 6px #333333 inset

}

效果如下:

4.添加多个阴影:

.boxshadow-outset{

width:100px;

height:100px;

box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset

}

效果如下:

5.X轴偏移量为负数:

.boxshadow-outset{

width:100px;

height:100px;

box-shadow:-4px 4px 6px #666

}

效果如下:

6.Y轴偏移量为负数:

.boxshadow-outset{

width:100px;

height:100px;

box-shadow:4px -4px 6px #666

}

效果如下:

很赞哦!(507)