一.css3

1.概念:是css的升级版本,新增加了一些模块
2.优点:向后兼容,可使用新的选择器和属性,能实现新的设计效果

3.渐进增强:优先构建低版本浏览器页面,再针对高版本浏览器页面进行设计
4.优雅降级:优先构建高版本浏览器页面,再针对低版本浏览器页面进行设计

二.css3选择器

1.层级选择器
    -子选择器:div>sapn 选中div中的子元素span
    -相邻兄弟选择器:div+span 选择div后紧挨着的一个span
    -通用兄弟选择器:div~span 选择div后的所有span
    
2.属性选择器
    div[class]{} 选中div,且div有class属性
    div[class="box1"] 选中div,且div中同时有class="box1"
    div[class~=value] 选中div,且div有class属性,包含值为value
    
    拓展:
    div[class^=value]{} 以value开头
    div[class$="value"] 以value结尾
    div[class*="value"] 包含value
    div[class |="value"] 只有value或以value-开头
    
3.结构性伪类选择器
    div:first-child{}选中div,且div是第一个子元素
    div:last-child{} 选中div,且div是最后一个子元素
    
    div:nth-child(n) 选中指定位置的div
    n是从0开始的自然数
    2n=even 偶数序列
    2n-1=odd 奇数序列
    
    div:only-child{} 选中div,且div是唯一的子元素
    div:empty{} 选中div且div为空
    
4.目标伪类选择器
    <a href="#关联元素的id值">点击位置</a>
    <标签 id="box">关联位置</标签>
    #box:targe{} 当a被点击后,box就会被触发
    
5.UI元素状态伪类选择器
    :disabled{}禁用状态
    :enabled{}可用状态
    :checked{}选中状态
    ::selection{}选中文本后高亮状态
    
6.否定伪类选择器
    .box:not(.box1){}选中box,但排除box2

7.动态伪类选择器
    .link{} 未访问状态
    .visited{} 访问后的状态
    .hover{} 鼠标悬停状态
    .active{} 元素激活状态

8.用户行为选择器
    :focus 获取焦点

三.浏览器兼容前缀

 -ms- IE
 -moz- 火狐
 -o- 欧朋浏览器
 -webkit- webkit浏览器

四.css3新增属性

    文本阴影 text-shadow: 水平 垂直 模糊度 颜色;
    可以为负数,可以写多个,用逗号分开
    
    盒子阴影 box-shadow: 水平 垂直 模糊度 阴影大小 颜色 内置阴影;
    可以为负数,可以写多个,用逗号分开
    inset内部阴影,外部阴影可以不写

五.矢量图的使用

六.背景图大小

background-size:背景图大小; px %
    cover 等比例缩放,有可能超出元素
    contain 等比例缩放,有可能有元素留白
    多背景设置 background:url(),url(); 颜色必须设置在最后一个url中

七.圆角

    border-radius:值;
    border-radius:水平值/垂直值;
    px % em rem