这是我参与8月更文挑战的第15天，活动详情查看：更文挑战
css3
css3
css3一些改变： 盒模型
弹性盒
媒体查询
background的改变：
transition:过渡
transform:变形
animation:动画
圆角
盒子阴影和文字阴影。
选择器的增加
css3使用不用进行任何声明，html可以使用css3，html5也可以使用css3.
浏览器对于css3不认识的新属性不会报错采用静默不处理方式。
属性选择器
通过标签属性进行选中元素
[]
举例：
img[src="images/1.jpg"] {
border-color: red;
}
开头匹配： ^=
举例：
a[href ^= "html"] {
color: red;
}
结尾匹配： $=
举例：
a[href $= "html"] {
color: green;
}
任意匹配： *=
举例：
a[href *= "2"] {
color: red;
}
- 分组匹配：
~=
表示含义：属性值必须是独立单位（只存在一个属性值，必须以空格隔开）
html5可以自定义属性，以data-
- 短横匹配：
|=
选中元素必须以属性值开头，如果还有其他属性值必须以短横隔开
注意：
属性选择器不是必须以标签开头。省略标签也是合法
属性选择器也可以使用连续交集
举例：
img[src="images/2.jpg"][alt="图片加载失败"] {
border-color: green;
}
儿子序选择器
儿子序选择器： 通过儿子在父级元素排名进行选中，只关心儿子是在父盒子排名老几不关心儿子标签类型。
元素:first-child {选中父级元素中第一个儿子}
元素:last-child {最后一个儿子}
元素：nth-child（n） {任意} n是从1开始
元素：nth-child(an + b) { 连续多个}
元素：nth-last-child(n) {倒数第几个儿子} n也是从倒数第一个开始
儿子类型序选择器
强调同种标签（类型的含义）中排名
:first-of-type 同种标签的老大
:last-of-type 最后一个
:nth-of-type(n) 任意 序号是从1开始
:nth-of-type(an + b)
:nth-last-of-type(n) 倒数
关系节点选择器
后代选择器div p {}
子代选择器 > 选中元素必须是儿子节点不能选中孙子等其他后代元素
+ 后面第一个亲兄弟（同一个父节点）
~ 后面所有的亲兄弟
css3伪类
之前只有a标签具有合法伪类
a:link a:visited a:hover a:active
任何标签都可以书写hover伪类
举例：
.box:hover {
/*鼠标悬停伪类*/
background-color: red;
}
表单元素伪类
:focus 表单获取焦点伪类
:disabled 不可用表单伪类
:enabled 可用表单伪类
表单可以设置一个属性disabled（不可用表单），所有表单默认都是可用的
:checked 表单被选中伪类
节点伪类
:only-child 选中元素必须是某个元素唯一的一个儿子节点伪类
:empty 空节点伪类（标签内部没有任何内容 空格，缩进，换行等也算内容）
css3伪元素
::before
表示在原有内容之前插入
必须书写的一个属性content（内容）属性值可以书写要添加的内容或者“”
行内元素不能设置宽高，想设置宽高转块
::after
表示在原有内容之后添加
和before用法完全一样
border-radius
圆角
* 像素表示法
border-radius: 20px 30px 40px 50px;
可以按照角度进行拆分：先书写top/bottom在写left、right
圆形：边长一半（极限）
圆角四个角度都设置，紧着短边来（极限是短边一半）胶囊型
div:nth-child(3) {
width: 400px;
height: 200px;
/*极限是短边一半*/
border-radius: 100px;
}
如果有些角度不设置圆角，会有更多的边转为圆角，极限是短边全部。（半圆）
