CSS3新增基础属性总结——20160409（易达客）

1、box-shadow ：h-shadow v-shadow blur spread color inset(outset)

　　h-shadow：必须；水平阴影位置，允许负值。

　　v-shadow：必须；垂直阴影位置，允许负值。

　　blur：可选，模糊距离。

　　spread：可选，阴影的尺寸。

　　color：可选，阴影的颜色。

　　inset(outset)：可选，默认为外部阴影，可以改为内部。

补充：

1、内外边框同时设置

box-shadow ：h-shadow v-shadow blur spread color inset，h-shadow v-shadow blur spread color inset;

2、兼容格式

 .box-shadow{

 　　//Firefox4.0

 　　-moz-box-shadow:h-shadow v-shadow blur spread color inset;

 　　//Safariand Google chrome10.0-

 　　-webkit-box-shadow:h-shadow v-shadow blur spread color inset;

 　　//Firefox4.0+、Google chrome 10.0+、oprea10.5+ 、IE9

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

 }

2、background-position

background-position用来定义背景图像的偏移值，能让一张图片从特定的位置开始展示。

background-position：Apx Bpx;

默认：A：距离left距离    B：距离top距离

background-position：100% 100%;

使用百分比都有一个参考值，background-position的百分比参考值计算：

偏移值 = （背景区域-背景图片尺寸）*百分比

补充：

在此前，我们使用 background-position 只能让背景图从 top, right, bottom, left, center 这5个边界开始显示，但无法指定任意一个边界的偏移量。

举个例子：我想让一个背景图从右下角偏移 20px

CSS3对background-position的属性值进行了多值扩展：

background-position: right -300px bottom 20px;

有了多值之后，我们可以让背景图在任意方位上偏移。