开发商前缀（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-768px){
.g-doc{95%;margin:0 auto;}
.g-sd{100%;padding-bottom:30px;border-radius:4px;background:#6666CC;}
.g-mn{padding:10px 1px 50px 1px;100%;border-radius:4px;}
}
实例2: /*窗口宽度介于600像素到700像素之间时，使用新样式*/
@media (not max- 600px) and (max- 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)；