1、rgba、透明度
众所周知，当给元素背景设置透明度时，元素内部的内容会继承外部元素的透明度属性，与咱们原本意愿不符，而rgba颜色模式就是未解决这个问题而生的
background:rgba(0,0,0,.3);前三个数值对应的是r(red),g(green),b(blue)构成颜色的三要素；第四个数值是透明度(Alpha;0代表透明，1代表不透明)
rgba可以用于设置任何与颜色相关的属性，如自己颜色，边框颜色，背景颜色，阴影颜色等；
2、text-shadow
text-shadow由以下顺序构成：x-offset，y-offset，blur和color组成，即垂直偏移，水平偏移，阴影宽度（模糊半径）和颜色值。
text-shadow:2px 3px 2px #ccc;
如果对水平偏移（x-offset）应用负值，阴影将出现在元素的右边；如果对垂直偏移（y-offset）应用负值，阴影将出现在元素顶部，可以在阴影颜色上使用RGBa。模糊半径的值越大，阴影越模糊，设置为0时，阴影最清晰。
也可以指定一系列text-shadow值（用逗号分隔），下面的例子使用两个text-shadow实现文字凸起效果（上下各1px）。
text-shadow:
0 1px 0 #fff, 0 -1px 0 #000;
3、border-radius
border-radius:20px; border-radius:5px 10px 15px 20px;
为使浏览器能识别圆角属性，需加前缀-webkit或者-moz或-ms
-webkit-border-radius:20px;
-moz-border-radius:20px;
实际工作中有时候需要单独设置某一个角的border-radius属性：
比如设置左上角的圆角：
标准：border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius
谷歌：-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
火狐：-moz-border-radius-topleft:10px;（低版本适用，高版本不起作用,后面不再一一列出）
4、box-shadow
box-shadow与text-shadow的结构类似box-shadow：x-offset y-offset blur和color；box-shadow:2px 3px 2px #ccc;
.box-shadow{ width:200px; height:100px; background:#09F; box-shadow:2px 3px 2px #666; }
box-shadow和text-shadow一样，可以设定多组值：
<body>
<div class="box-shadow">
<div class="inner"></div>
</div>
</body>
.box-shadow{ width:200px; height:100px; background:#09F; padding-top:20px; } .box-shadow .inner{ width:100px; height:50px; background:#F9C; margin:0 auto; box-shadow:-2px -2px 0 #fff, 2px 2px 0 #693, 2px 4px 2px rgba(0, 0, 0, .3); border-radius:20px; }
