CSS3

css3新增选择器

子级选择器
子级选择器用于选取带有特定父元素的元素 书写语法element1>element2

兄弟选择器
–相邻兄弟选择器 用于选择紧接在另一个元素后的兄弟元素，而且二者有相同的父元素。
| element1+element2 | 匹同一个父元素中紧跟在element1后面的一个element2元素
–其他兄弟选择器 匹配同一个父元素中在element1后面的所有element2元素
| elemenet~element2 | 匹配同一个父元素中elemenet1后面的所有element2元素

结构伪类选择器
E:first-child 匹配父元素中的第一个子元素E
E:last-child 匹配父元素中最后一个E元素
E:nth-child(n) 匹配父元素中的第n个子元素E even偶数 odd奇数 这个是父亲节点下的第几个

E:first-of-type 指定类型E的第一个
E:last-of-type 指定类型E的最后一个
E:nth-of-type(n) 指定类型E的第n个 这个是元素的第几个在元素下选取

伪元素选择器
E::before 在 E 元素内部的前面插入一个元素
E::after 在 E 元素内部的后面插入一个元素
E::first-letter 选择到了 E 容器内的第一个字母
E::first-line 选择到了 E 容器内的第一行文本
伪元素的注意事项
• 伪元素只能给双标签添加，不能给单标签添加
• 伪元素的冒号前不能有空格，如 E ::before 这个写法是错误的
• 伪元素里面必须写上属性 content:"";
• before 和 after 创建一个元素，但是属于行内元素。
• 因为在 DOM 里面看不见刚才创建的元素，所以我们称为伪元素。

属性选择器
E[att] 选择具有att属性的E元素
E[att=“val”] 选择具有att属性且属性值等于val的E元素
E[att^=“val”] 匹配具有att属性、且值以val开头的E元素
E[att$=“val”] 匹配具有att属性、且值以val结尾的E元素
E[att*=“val”] 匹配具有att属性、且值中含有val的E元素

基础选择器：id选择器 > 类选择器 > 标签选择器 > *
伪类选择器和属性选择器的权重等于类选择器
伪元素选择器的权重等于标签选择器

box-sizing属性
content-box 标准模式 盒子总体大小为 width(height) + padding + border
border-box 怪异模式 盒子总体大小为 width 和 height


边框圆角 border-radius
| x-radius / y-radius | / 分割两部分属性值，前面为水平半径，后面为垂直半径， 得到的是椭圆角。
| radius | 一个属性值，则水平和垂直都设置为同一个值，得到的是 圆角。

文字阴影text-shadow
| 属性值 | 简介
| h-shadow | 必需。水平阴影的位置。允许负值。
| v-shadow | 必需。垂直阴影的位置。允许负值。
| blur | 可选。模糊的距离。
| color | 可选。阴影的颜色。

边框阴影box-shadow
| 属性值 | 简介
|h-shadow | 必需。水平阴影的位置。允许负值。
|v-shadow | 必需。垂直阴影的位置。允许负值。
|blur | 可选。模糊距离。
|spread | 可选。阴影的尺寸。
|color | 可选。阴影的颜色。
|inset |可选。将外部阴影改为内部阴影。
过渡属性 transition
transition：过度的属性 过渡时间 运动曲线 延时时间；
属性 描述
transition 简写属性，用于在一个属性中设置四个过渡属性。
transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。默认是 0。
transition-timing-function 规定过渡效果的时间曲线。默认是 “ease”。
transition-delay 规定过渡效果何时开始。默认是 0。

–transition-property过渡的属性
• none 表示没有属性过渡
• all 表示所有变化的属性都过渡
• 属性名 使用具体的属性名，多个属性名中间逗号分隔

–时间
以秒为单位 0s必须加单位

–transition-timing-function 时间曲线

2D转换 transform

对元素进行移动、缩放、旋转、拉长或拉伸。配合过渡和即将学习的动画知识，可 以取代大量之前只能靠Flash才可以实现的效果。
位移translate()
translate(x,y) x,y分别为水平和垂直方向位移的距离，可以为px值或百分比， 区分正负
translate(x) 只有一个数值，表示水平方向的位移
translate(y) 只有一个数值，表示垂直方向的位移

缩放 scale()
值 说明
scale(x, y) x,y分别为改变元素的宽度和高度的倍数
scale(n) 只有一个值，表示宽度和高度同时缩放n倍
scaleX(n) 改变元素的宽度
scaleY(n) 改变元素的高度

旋转 rotate(deg)
deg为度数单位，正数表示顺时针旋转，负数表示逆时针旋转

先旋转在位移 先位移在旋转 不一样 因为坐标会发生变化

倾斜 skew()
transform: skew(数字deg,数字deg)
两个属性值分别表示水平和垂直方向倾斜的角度，属性值可以为正可以为负，第二个 数值不写默认为0

transform-­origin 属性
设置调整元素的水平和垂直方向原点的位置
x 定义 X 轴的原点在何处。可能的值：left 、center、right、像素值、百分比
y 定义 Y 轴的原点在何处。可能的值：top、center、bottom、像素值、百分比

3D转换

透视属性 perspective
作用：设置在 z 轴的视线焦点的观察位置，从而实现 3D 查看效果。
属性值：像素值，数值越大，观察点距离 z 轴原点越远，图形效果越完整且接近原始尺寸。 注意：透视属性需要设置给 3D 变化元素的父级

3D 旋转
rotateX(angle) 定义沿着 X 轴的 3D 旋转。
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。

3D 位移
translateX(x) 设置 X 轴的位移值。
translateY(y) 设置 Y 轴的位移值。
translateZ(z) 定义3D位移，设置Z轴的位移值。
属性值为像素值或百分比，正负表示位移的方向。正值向对应轴的正方向移动，负值向对应 轴的负方向移动。

transform-style属性
用于设置被嵌套的子元素在父元素的 3D 空间中显示，子元素会保留自己的 3D 转换坐标轴。
属性值：
flat：所有子元素在 2D 平面呈现
preserve-3d：保留 3D 空间

浏览器兼容
Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。
Chrome 和 Safari 需要前缀 -webkit-。
Internet Explorer 9 需要前缀 -ms-。