#1 CSS3私有前缀
-webkit-border-radius:2px; /* Chrome,Safari,Opera */
-o-border-radius:2px; /* Opera(旧版本) */
-ms-border-radius:2px; /* TE,遨游，360，猎豹 */
-moz-border-radius:2px; /* Firefox */
tips:不是所有属性都需要添加4个前缀的，请参考CSS手册
#2 浏览器内核
Gecko -- FireFox
Webkit -- Chrome,Safari,Opera
Presto -- Opera
Trident -- TE,遨游，360，猎豹
#3 属性选择器
a[href]{} /* 含有href属性的a标签 */
a[href="WC"]{} /* href属性值是WC的a标签 */
a[class~='x']{} /* class属性值包含x这类的a标签 */
a[href|="a"]{} /* href属性值以a开头接横线的a标签 */
a[href^="a"]{} /* href属性值是以a开头的a标签 */
a[href$="a"]{} /* href属性值是以a结尾的a标签 */
a[href*="a"]{} /* href属性值包含a这个字母的a标签 */
#4 伪类选择器
a:link{} /* 表示从来没有点击过 */
a:visited{} /* 表示之前已经被点过 */
a:hover{} /* 表示鼠标经过当前元素 */
a:active{} /* 表示鼠标按下去了 */
tips:注意顺序！！！
li:first-child{} /* 父元素中的第一个li */
li:last-child{} /* 父元素中的最后一个li */
li:nth-child(2) /* 父元素中的第二个li */
li:nth-child(odd) /* 父元素中的所有奇数行的li */
li:nth-child(even) /* 父元素中的所有偶数行的li */
li:nth-child(2n) /* 父元素中的所有偶数行的li */
li:nth-child(2n+1) /* 父元素中的所有奇数行的li */
li:nth-last-child() /* 与nth-child类似，区别是它是从后向前数 */
--------------------------------------------------------
li:first-of-type{} /* 同类型中的第一个 */
li:last-of-type{} /* 同类型中的最后一个 */
li:nth-of-type(2){} /* 同类型中排名第二的(从前向后数) */
li:nth-last-of-type(2){} /* 同类型中排名第二的(从后向前数) */
--------------------------------------------------------
input:disabled{} /* 被禁用的表单元素 */
input:enabled{} /* 被启用的表单元素 */
input:checked{} /* 已经被选中的单选框或复选框 */
#5 伪元素选择器(CSS3为了区分伪元素和伪类，将伪元素设置成双冒号)
div::before{ /* 在div内部的最前面动态添加一个元素 */
content:"";
}
div::after{ /* 在div内部的最后面动态添加一个元素 */
content:"";
}
div::selection{ /* 在div范围内选择文字的样式 */
color:red;
}
input::placeholder{ /* 修改文本框里placeholedr的文字样式 */
color:red;
}
tips:注意浏览器，参考css手册
#6 border-radius(圆角边框)
div:nth-child(1){border-radius:30px;} /* 四个角 */
div:nth-child(2){border-radius:10px 50px;} /* 左上，右下 */
div:nth-child(3){border-radius:10px 40px 100px;} /* 左上，右上左下，右下 */
div:nth-child(4){border-radius:10px 20px 30px 40px;} /* 左上，右上，右下，左下 */
div:nth-child(5){border-radius:50%;} /* 50%可以变成圆形 */
div:nth-child(6){border-radius:10%/50%;} /* 水平/垂直 */
#7 background-orgin(背景图的起始位置)
background-orgin:padding-box; /* 默认从padding开始显示 */
background-orgin:content-box; /* 从内容区开始显示 */
background-orgin:border-box; /* 从边框开始显示 */
#8 background-clip(背景图的裁剪位置)
background-clip:border-box; /* 默认边框以外的被裁掉 */
background-clip:padding-box; /* padding以外的被裁掉 */
background-clip:content-box; /* 内容区以外的被裁掉 */
#9 文字遮罩效果
background-image:url(xx.jpg);
-webkit-background-clip:text; /* 按照文字内容进行裁剪背景图 */
-webkit-text-fill-color:transparent; /* 文字填充色为透明 */
#10 阴影
div{
/* 盒子阴影 */
/* 向右偏移1px,向下偏移5px，模糊度3px，阴影大小4px，红色，内部阴影 */
box-shadow:1px 5px 3px 4px red [inset];
/* 文本阴影 */
/* 向右偏移1px,向下偏移2px,模糊度3px，绿色 */
text-shadow:1px 2px 3px green;
}
#11 面试题：如何制作多层边框(3层）
box-shadow:0 0 0px 5px red,0 0 0 10px green,0 0 0 15px black;
#12 resize(在页面上控制元素的尺寸)
普通元素：
overflow:hidden|scroll|auto;
resize:none; /* 不让调整大小 */
resize:horizontal; /* 横向调整 */
resize:vertical; /* 纵向调整 */
resize:both; /* 横纵都能调整 */
textarea
resize：xxxx； /* 给textarea设置，不需要再写overflow了 */
#13 多列布局
父标签{
column-count:4; /* 把子标签分成几列 */
column-100px; /* 所有字标签最小宽度100 */
columns:4 100px; /* 初始4列，最小100的宽度 */
column-gap:100px; /* 列间距 */
column-rule:1px solid red; /* 列的分割线（风格与边框一致） */
}
子标签{
column-span:all; /* 横跨所有列，Firefox不支持 */
}