background

• background:rgba(色值一，色值二，色值三，透明度); 设置为半透明的背景色。例如：background:rgba(0,0,0,0.5);透明度为0.5的黑色。

• box-shadow: 阴影效果，向框添加一个或多个阴影。
  box-shadow属性接收一个由5个部分组成的值：
  box-shadow: offset-x offset-y blur spread color position;
  offset-x
  第一个长度值指定了阴影的水平偏移量。即在x轴上阴影的位置。正值使阴影出现在元素的右边，而负值使阴影出现在元素的左边。

.left { box-shadow: 20px 0px 10px 0px rgba(0,0,0,0.5) }
 
.right { box-shadow: -20px 0px 10px 0px rgba(0,0,0,0.5) }
 

offset-y
第二个长度值指定了阴影的垂直偏移量。即在y轴上阴影的位置。正值使阴影出现在元素的上边，而负值使阴影出现在元素的下边。

.left { box-shadow: 0px 20px 10px 0px rgba(0,0,0,0.5) }
 
.right { box-shadow: 0px -20px 10px 0px rgba(0,0,0,0.5) }
 

blur
第三个长度值代表阴影的模糊半径，举例说明，就像你在设计软件中使用高斯模糊滤镜。0值意味着阴影是完全实心和尖锐的，没有任何模糊。模糊数值越大，尖锐度越小，阴影越朦胧和模糊。负值是不被允许的，并会被处理成0。

.left { box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5) }
 
.middle { box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5) }
 
.right { box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.5) }
 

spread
第四个，同时也是最后一个长度值代表着阴影的尺寸。这个值可以被想象成从元素到阴影的距离。正值会在元素的各个方向按指定的数值延伸阴影。负值会使阴影收缩得比元素本身尺寸还小。默认值0会让阴影伸展得和元素的大小一样。

.left { box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5) }
 
.middle { box-shadow: 0px 0px 20px 20px rgba(0,0,0,0.5) }
 
.right { box-shadow: 0px 50px 20px -20px rgba(0,0,0,0.5) }
 

color
颜色值，正如你期望的，是阴影的颜色。可以是任何颜色单位。

position
box-shadow属性的最后一个值是一个可选的关键字，它代表着阴影的位置。默认情况下，这个值并而没有给出，这意味着阴影是一个外部阴影。我们能通过关键字inset使阴影变成内部阴影。

.left { box-shadow: 20px 20px 10px 0px rgba(0,0,0,0.5) inset }
 
.right { box-shadow: 20px 20px 10px 0px rgba(0,0,0,0.5) }

多重阴影
box-shadow 属性能在单个元素上接受多个阴影。每个阴影通过用逗号分隔的 box-shadow 属性列表来加载。

JavaScript

.foo {
    box-shadow: 20px 20px 10px 0px rgba(0,0,0,0.5) inset, /* inner shadow */
                20px 20px 10px 0px rgba(0,0,0,0.5); /* outer shadow */
}

1
2
3
4
5
.foo {
    box-shadow: 20px 20px 10px 0px rgba(0,0,0,0.5) inset, /* inner shadow */
                20px 20px 10px 0px rgba(0,0,0,0.5); /* outer shadow */
}

圆形阴影
box-shadow 属性的边界半径是通过该元素的 border-radius 属性来控制的。

.foo {
    box-shadow: 20px 20px 10px 0px rgba(0,0,0,0.5);
    border-radius: 50%;
}

HTML DOM position 属性
定义和用法
position 属性把元素放置到一个静态的、相对的、绝对的、或固定的位置中。

语法：
Object.style.position=static|relative|absolute|fixed
可能的值

值	描述
static	默认。位置设置为 static 的元素，它始终会处于页面流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）。
relative	位置被设置为 relative 的元素，可将其移至相对于其正常位置的地方，因此 “left:20” 会将元素移至元素正常位置左边 20 个像素的位置。
absolute	位置设置为 absolute 的元素，可定位于相对于包含它的元素的指定坐标。此元素的位置可通过 “left”、“top”、“right” 以及 “bottom” 属性来规定。
fixed	位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 “left”、“top”、“right” 以及"bottom" 属性来规定。不论窗口滚动与否，元素都会留在那个位置。工作于 IE7（strict 模式）。