使用CSS3(一)

开发商前缀（vendor prefix）

前缀	    浏览器
-moz-	   Firefox
-webkit-	Chrome和Safari（它们的引擎都是WebKit）
-ms-    	Internet Explorer
-o-	     Opera

媒体查询

根据不同的设备和浏览设置选择不同的样式表，max-width属性，当前窗口中页面的宽度。max-device-width属性，这个属性检测的是最大的屏幕宽度。

语法：
@media (media-query-property-name: value) {
  /*这里是新样式*/
}
实例1：/*当浏览器宽度小于768px时，就使用里面的样式*/
@media screen and (max-width:768px){
.g-doc{width:95%;margin:0 auto;}
.g-sd{width:100%;padding-bottom:30px;border-radius:4px;background:#6666CC;}
.g-mn{padding:10px 1px 50px 1px;width:100%;border-radius:4px;}

}
实例2:  /*窗口宽度介于600像素到700像素之间时，使用新样式*/
@media (not max-width: 600px) and (max-width: 700px) {
这里是新样式代码
}

透明

实现透明效果的方法有两种。

第一种是使用rgba()函数，它接收4个数值作为参数。前三个值分别代表色彩中的红、绿、蓝分量，取值范围为0～255。最后一个值是alpha（不透明度）值，取值范围为0～1；0表示完全透明，1表示完全不透明。

background: rgba(170,240,0,0.5);

第二种使用opacity属性，这个属性的原理与alpha值一样（opacity这个单词的意思就是不透明）：取值范围为0～1；0表示完全透明，1表示完全不透明：

 background: rgb(170,240,0);
opacity: 0.5;

border-radius属性

radius（半径）指的是圆角的半径，最终结果显示只有水平和垂直线这两条切线和部分圆弧。

border-radius: 25px 50px 25px 85px;

如果要每个角的两边不一样，需要单独设定每一个角（使用比如border-top-left-radius这样的属性），然后提供两个值：一个是水平半径，另一个是垂直半径。可以创建出形状各异的盒子

border-top-left-radius: 150px 30px;
border-top-right-radius: 150px 30px;

盒子阴影和文本阴影

盒子阴影
语法：
box-shadow:h-shadow v-shadow [blur模糊距离] [spread阴影尺寸] [color] [insert 内部阴影]
实例：
box-shadow: 5px 5px 10px 5px gray insert;

文本阴影
语法：
box-shadow:h-shadow v-shadow [blur模糊距离] [color]
实例：
text-shadow: 5px 5px 10px  gray ;

渐变

创建线性渐变：使用linear-gradient()函数

创建一个从上到下，从白到蓝的渐变效果：
background: -moz-linear-gradient(top, white, blue);
创建从左上角到右下角的渐变：
background: -moz-linear-gradient(top left, white, lightblue)；
使用渐变点（gradient stop）控制每个颜色的起点。每个渐变点用百分比值表示，0%就是整个渐变的起点，而100%则是整个渐变的终点：
background: -moz-linear-gradient(top, red 0%, orange 20%, yellow 80%, violet 100%);

创建放射性渐变：使用radial-gradient()函数。

background: -moz-radial-gradient(circle, white, lightblue)；