01-认识css3
-
什么是css3？
CSS3是CSS2的“进化”版本，在CSS2基础上，增强或新增了许多特性，弥补了CSS2的众多不足之处，使得 Web开发变得更为高效和便捷
-
css3现状
- 浏览器支持程度差，需要添加私有前缀
- 移动端支持优于PC端
- 不断改进中
- 应用相对广泛
-
如何对待css3兼容问题？
- 渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。
- 优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。
02-属性选择器
- li[style]：li标签中有style属性既满足条件
- li[class=red]：li标签中class属性的值必须是red
- li[class*=red]：li标签中只要包含red
- li[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 #000；
- 第一个值：设置盒子阴影横向偏移
- 第二个值：设置盒子阴影纵向偏移
- 第三个值：设置盒子阴影的虚化程度
- 第四个值：设置盒子阴影的范围
- 第五个值：设置盒子阴影的颜色
- 第六个值：设置盒子的内阴影
- 同样也是可以设置多层阴影，还是用逗号隔开