完全匹配属性选择器：[id=value]
包含匹配选择器：[id*=value]
首字符匹配选择器：[id^=value]
尾字符匹配选择器：[id$=value]
阴影：box-shadow:3px 2px 1px #000 /*其他浏览器*/
-webkit-box-shadow:3px 2px 1px #000 /*webkit浏览器*/
-moz-box-shadow:3px 2px 1px #000 /*firefox浏览器*/
text-shadow和box-shadow差不多
背景：backgroud-size 设置背景图像大小 backgroud-size：10px 5px ; -webkit-backgroud-size:10px 5px;
backgroud-clip 确定背景的剪裁区域
渐变 background：-webkit-gradient(linear/radial,0 0,0 100%,from(#fff) ,to(#000) );
线性渐变/径向渐变
圆角边框： border-radius:10px 5px;
-webkit-border-radius:10px 5px;
-moz-border-radius:10px 5px;
使用viewport设置适应移动设备屏幕大小
<meta name="viewport" content="width=device-width,inital-scale=1,user-scalable=0" />
属性有：width:指定虚拟窗口的屏幕宽度大小
height:虚拟窗口屏幕高度
inital-scale:初始缩放比例
maximum-scale:允许用户缩放的最大比例
minimum-scale:允许用户缩放的最小比例
user-scalable:是否允许手动缩放
使用media queries
当前屏幕可视区域的宽度最大值为600px时
<link rel="stylesheet" media="screen and(max-width:600px)" href="small.css" />
small.css:
@media screen and(max-width:600px){
demo{
background:#000;
}
}
屏幕可视区域的长度在600px到900px之间时
media="screen and(min-width:600px) and (max-width:900px)"
当手机最大屏幕可视区域是480px时
media="screen and(max-device-width:480px)"
当移动设备处于纵向模式下时
media="all and(orientation:portrait)"
当移动设备处于横向模式下时
media="all and(orientation:landscape)"
