CSS3新增基础属性总结——20160409(易达客)

时间:2023-08-23 20:57:38

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;

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