01-认识css3
什么是css3？ CSS3是CSS2的“进化”版本，在CSS2基础上，增强或新增了许多特性，弥补了CSS2的众多不足之处，使得 Web开发变得更为高效和便捷css3现状
浏览器支持程度差，需要添加私有前缀移动端支持优于PC端不断改进中应用相对广泛 如何对待css3兼容问题？
渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。考虑用户群体：例如医院、银行等政府网站基本不需要c3听产品经理的听boss的
02-属性选择器
li[style]：li标签中有style属性既满足条件li[class=red]：li标签中class属性的值必须是redli[class*=red]：li标签中只要包含redli[class^=blue]：li标签中以blue开头的li[class$=blue]：li标签中以blue结尾的
03-兄弟选择器
.first + li：.first下面相邻的li元素，如果不是li元素就不起作用.first ~ li：.first下面所有的li元素会起作用
04-伪类选择器
li:first-child：li的父元素的第一个子元素，如果第一个子元素的类型为li起作用，如果不是li，不起作用li:last-child：li的父元素的最后一个子元素，如果最后一个子元素的类型为li起作用，如果不是li，不起作用li:first-of-type：li的父元素的第一个子元素，如果第一个子元素不是li，自动跳过，继续查找，一直查找到第一个li元素li:last-of-type：li的父元素的最后一个子元素，如果最后一个子元素不是li，自动跳过，继续查找，一直查找到最后一个li元素li:nth-child(5)：查找到索引为5的（索引从1开始），如果类型不是li，索引也会计算li:nth-child(even)：查找到索引为偶数的，如果类型不是li，索引也会计算li:nth-child(odd)：查找到索引为奇数的，如果类型不是li，索引也会计算li:nth-of-type(even)：产找到索引为偶数的，如果类型不是li，索引不会计算li:nth-of-type(odd)：产找到索引为奇数的，如果类型不是li，索引不会计算li:nth-of-type(n):n取值0~子元素的长度，表达式最后的结果如果小于=0 无效的li:empty：代表li的父元素的子元素下面没有任何内容的元素，连空格都没有
05-伪元素
普通的所有标签都会有before、after，input、img但标签是没有的
::before：默认在普通标签的左面::after：默认在普通标签的右面content：放置内容的，并且必须是有的默认是行内元素，想设置宽高，转化为块元素，display:block;float、position
06-其他伪元素
::first-letter：设置首字母::first-line：设置文本第一行的样式::selection：设置当前选中的内容的样式
07-文本阴影的使用
text-shadow:2px 1px 1px red;第一个值：设置文本阴影横向的偏移第二个值：设置文本阴影纵向的偏移第三个值：设置文本阴影虚化程度第四个值：设置文本阴影的颜色文本阴影是可以设置多层的，用逗号隔开即可
08-盒模型
我们在给元素设置宽和高的时候，默认，宽高是内容的宽高
box-sizing：border-box 宽高是设置盒子的实际的宽高，不会被padding、border给撑开，并且内容，会变小，因为padding和border向里撑开box-sizing：content-box 设置内容的宽高，会被padding、border给撑开，content-box也是默认状态
09-边框圆角
border-radius：10px;这样是设置四个角都有效果border-radius：10px 20px; 第一个值：左上、右下 第二个值：右上、左下border-radius：10px 20px 30px; 第一个值：左上 第二个值：右上、左下 第三个值：右下border-radius：10px 20px 30px; 第一个值：左上 第二个值：右上 第三个值：右下 第四个值：左下圆：设置圆角的宽高的一般半圆：高度设置一半，圆角设置，左上和右上即可
11-盒子阴影
box-shadow:6px 4px 12px 5px #000；第一个值：设置盒子阴影横向偏移第二个值：设置盒子阴影纵向偏移第三个值：设置盒子阴影的虚化程度第四个值：设置盒子阴影的范围第五个值：设置盒子阴影的颜色第六个值：设置盒子的内阴影 inset同样也是可以设置多层阴影，还是用逗号隔开
机器人案例
头 脑袋和眼睛 脑袋：一个半圆，高度设置为宽度的一般，圆角给左上和右上设置 眼睛：给脑袋这个元素设置伪元素，左眼睛：before,右眼睛：after身体 胳膊和身体 身体：长方形，左下和右下设置圆角 胳膊：左胳膊：before，右胳膊：after腿部 准备一个元素，设置伪元素即可 左腿：before，右腿：after
