012、CSS3

一、CSS3 新增选择器

1、子级选择器

子级选择器用于选取带有特定父元素的元素。

书写语法：element1 > element2

注意：如果 element2 元素不是父元素 element1 的直接子元素，则不会被选择。

> 符号之前书写父级的选择器，> 符号之后写子级选择器，必须满足父子级关系才能选中标签。

div>p {
    color: red;
}

2、兄弟选择器

选择器	简介
element1+element2	匹配同一个父元素中紧跟在element1后面的一个element2元素
element1~element2	匹配同一个父元素中在element1后面的所有element2元素

相邻兄弟选择器

• 相邻兄弟选择器可以用于选择紧接在另一个元素后的兄弟元素，而且二者有相同的父元素。
• 书写语法：E1 + E2。
• 注意：

1. 选中的是紧跟在 E1 之后的同级元素 E2。
2. 只能选中紧跟在后面的一个 E2 元素。
3. 二者有相同的父元素。
4. + 符号前后可以添加空格书写。

h1 + p {
    margin-top: 50px;
}

其他兄弟选择器

• 其他兄弟选择器匹配同一个父元素中在 element1 后面的所有 element2 元素。
• 书写语法：element1~element2
• 注意：

1. 选择 element1 之后出现的所有 element2。
2. 两种元素必须拥有相同的父元素，但是 element2 不必直接紧随 element1。
3. ~ 符号前后可以添加空格书写。

h2 ~ p {
    background: #ff0000;
}

3、结构伪类选择器

nth-child（n）

• n 可以是数字，关键字和公式
• n 如果是数字，就是选择第 n 个
• 常见的关键词 even 偶数 odd 奇数
• 常见的公式如下 ( 如果 n 是公式，则从 0 开始计算，n是从 0 ，1，2，3.. 一直递增）
• 但是第 0 元素或者超出了元素的个数会被忽略

公式	取值
2n	偶数
2n+1	奇数
5n	5 10 15 ……
n+5	从第5个开始（包含第5个）到最后，5 6 7 8 9 …
-n+5	前5个（包含第5个），5 4 3 2 1 0……

E:nth-child(n) 和E:nth-of-type(n) 的区别

• E:nth-child(n) 匹配父元素的第 n 个子元素 E，同时需要满足两个条件。

• E:nth-of-type(n) 匹配同类型中的第 n 个同级兄弟元素 E，会忽视其他同级的非同类型元素。

4、伪元素选择器

新增伪元素

选择器	介绍
E::before	在 E 元素内部的前面插入一个元素
E::after	在 E 元素内部的后面插入一个元素
E::first-letter	选择到了 E 容器内的第一个字母
E::first-line	选择到了 E 容器内的第一行文本

h5 写法和传统写法区别

• 单冒号 E:before
• 双冒号 E::before
• 浏览器对以上写法都能识别，双冒号是 h5 的语法规范

伪元素的注意事项

• 伪元素只能给双标签添加，不能给单标签添加
• 伪元素的冒号前不能有空格，如 E ::before 这个写法是错误的
• 伪元素里面必须写上属性 content: "" ;
• before 和 after 创建一个元素，但是属于行内元素。
• 因为在 DOM 里面看不见刚才创建的元素，所以我们称为伪元素。

5、属性选择器

属性选择器用来选择包含指定属性的标签。

选择器	简介
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 选择器 > 类选择器 > 标签选择器 > *

伪类选择器、属性选择器的权重等于类选择器 。

伪元素选择器的权重等于标签选择器 。

二、CSS3 盒模型

CSS3 中可以通过 box-sizing 来指定盒模型，这样我们就可以设置如何计算一个元素的总宽度和总高度。

属性值	简介
content-box	默认值，标准盒子模型，盒模型是外扩的。 width 与 height 只包括内容的宽和高。 在 width 和 height 之外绘制元素的内边距和边框。
border-box	怪异模式，盒模型是内减的。 width 和 height 属性包括内容，内边距和边框，但不包括外边距。 为元素指定的任何内边距和边框都将在已设定的 width和 height内进行绘制。

content-box 标准模式

Standard 模式：标准模式中，盒子总体大小为 width(height) + padding + border，内容区域是 width 和 height 部分。

border-box 怪异模式

Quirks 模式：怪异模式中，盒子总体大小为 width 和 height，添加了padding和border后， 内容区域会收缩。

三、CSS3 新增属性

1、边框圆角

属性名：border-­radius

作用：设置边框的圆角。

属性值：可以是像素值，或者百分比，百分比参考的是盒子整体宽度、高度的百分比。

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

单一属性

1. border-top-left-radius: 半径;
2. border-top-right-radius: 半径;
3. border-bottom-right-radius: 半径;
4. border-bottom-left-radius: 半径;

简写方法

• border-radius 相当于四个单一属性的简写方法，类似 padding 也可以有四种值的写法。
• border-radius: 左上角 右上角 右下角 左下角;（上左右下右左）
• border-radius: 左上角 右上角和左下角 右下角 ;（左上 右上左下 右下）
• border-radius: 左上角和右下角 右上角和左下角 ;（左上右下 右上左下）
• border-radius: 四个角相同;

/ 的属性值写法

border-radius 属性值中出现了 / 斜线，那么 / 前面可以设置水平方向四种值的写法，/ 后面可以设置垂直方向四种值的写法。

border-radius: 50% 20% 40% / 20% 30%;

浏览器兼容

Internet Explorer 8 及以下版本浏览器不支持border-radius属性，其他浏览器都支持

2、文字阴影

在 CSS3 中，text-shadow 可向文本应用阴影。通过属性值能够规定水平阴影、垂直阴影、 模糊距离，以及阴影的颜色：

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

文字阴影语法 

text-shadow 属性向文本添加阴影，属性值有2-3个长度值和一个可选的颜色值进行规定，省略的长度是 0。

h1 {
    text-shadow: 3px 4px 4px #FF0000;
}

多层阴影

text-shadow 属性也可以向文本添加多个阴影，逗号分隔多个阴影的属性值。 注意：多阴影中，先写的阴影压盖在后写的阴影上。

h1 {
    text-shadow: 3px 4px 4px #FF0000,
        6px 6px 3px #00ff00;
        9px 9px 3px #0000ff;
}

3、盒子阴影

边框阴影

在 CSS3 中，box-shadow 属性用于对盒子边框添加阴影。

边框阴影语法：box-shadow 属性向盒子添加阴影，属性值有2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定，省略的长度是 0。

属性值	说明
h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的大小
color	可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset	可选。从外层的阴影（开始时）改变阴影内侧阴影

多层阴影

box-shadow 属性也可以向盒子添加多个阴影，逗号分隔多个阴影的属性值。 注意：多阴影中，先写的阴影压盖在后写的阴影上。

4、过渡属性

动画效果

CSS3 出现之前，前端一般使用 Flash 动画或 JavaScript 制作动画。

帧动画：通过一帧一帧的画面按照固定顺序和速度播放，如电影胶片。

过渡属性

属性名：transition

作用：在不使用 Flash 动画或 JavaScript 的情况下，使用 transition 可以实现补间动画（过渡效果）， 并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指），那么A和B之间就可以实现平滑的过渡的动画效果。为了方便看效果，我们使用 :hover 切换状态。 语法格式：

transition: 过渡的属性 过渡时间 运动曲线 延时时间;

单一属性写法

属性值	描述
transition-property	指定CSS属性的name，transition效果
transition-duration	transition效果需要指定多少秒或毫秒才能完成
transition-timing-function	指定transition效果的转速曲线
transition-delay	定义transition效果开始的时候

transition-property过渡的属性

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

时间

• 过渡时间：以s秒为单位。
• 延时时间：以s秒为单位。0s也必须加单位。

transition-timing-function 时间曲线

值	描述
linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

以上linear~ease-in-out为贝塞尔曲线，参考W3School TIY Editorhttps://www.w3school.com.cn/tiy/t.asp?f=css3_animation_speed浏览器兼容

• Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。
• Safari 需要前缀 -webkit-。
• 注意：Internet Explorer 9 以及更早的版本，不支持 transition 属性。

四、2D 转换

属性名：transform

作用：对元素进行移动、缩放、旋转、拉长或拉伸。配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。

属性值：多种转换方法的属性值，可以实现不同的转换效果。

位移 translate()

transform 的属性值为 translate() 时，可以实现位移效果。

书写语法：

值	描述
translate(x,y)	定义 2D 转换，x,y分别为水平和垂直方向位移的距离，可以为px值或百分比， 区分正负
translate(x)	定义转换，只有一个数值，表示水平方向的位移

缩放 scale()

transform 的属性值为 scale() 时，可以实现元素缩放效果

书写语法：

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

旋转 rotate()

transform 属性值设置为 rotate() 时，实现元素的旋转。

书写语法： rotate(数字deg) 其中，deg为度数单位，正数表示顺时针旋转，负数表示逆时针旋转。2D的旋转只有 一个属性值。

注意：元素旋转后，坐标轴也跟着发生转变。

因此，多个属性值同时设置给 transform 时，书写顺序不同导致的转换效果有差异。

倾斜 skew()

transform 属性值设置为 skew() 时，实现元素的倾斜。

书写语法：

transform: skew(数字deg,数字deg);

两个属性值分别表示水平和垂直方向倾斜的角度，属性值可以为正可以为负，第二个数值不写默认为0。

transform­origin 属性

作用：设置调整元素的水平和垂直方向原点的位置。

调整元素的基准点。

属性值：包含两个，中间使用空格分隔。

值	说明
x	定义 X 轴的原点在何处。可能的值：left 、center、right、像素值、百分比
y	定义 Y 轴的原点在何处。可能的值：top、center、bottom、像素值、百分比

五、3D转换

transform 属性不止能实现 2D 转换，也可以制作 3D 立体转换效果，比普通的 x、y 轴组成的平面效果多了一条 z 轴。

透视

• 电脑显示屏是一个 2D 平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现， 通过透视可以实现此目的。
• 透视可以将一个 2D 平面，在转换的过程当中，呈现 3D 效果。
• 透视特点：近大远小。
• 注意：并非任何情况下需要透视效果，根据开发需要进行设置，如果需要展示 z 轴的变化， 则设置透视效果。

透视属性 perspective

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

3D 旋转

3D旋转比2D旋转更复杂，需要分别对三个方向的旋转角度值：

属性值：

值	说明
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 转换坐标轴。
• 属性值：

1. flat：所有子元素在 2D 平面呈现
2. preserve-3d：保留 3D 空间

• 3D 元素构建是指某个图形是由多个元素构成的，可以给这些元素的父元素设置 transform-style: preserve-3d，来使其变成一个真正的 3D 图形。
• 一般来说，该属性设置给 3D 变换图形的父级元素。

浏览器兼容

Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。

Chrome 和 Safari 需要前缀 -webkit-。

Internet Explorer 9 需要前缀 -ms-。

六、动画

• css3 中提供了自己的动画制作方法，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。
• css3 动画制作分为两步：创建动画、绑定动画。

@keyframes 规则

@keyframes 规则用于创建动画。

在 @keyframes 中规定某项 CSS 样式，就能创建由从一种样式逐渐变化为另一种样式的效果。

可以改变任意多的样式任意多的次数。 需要使用百分比来规定变化发生的时间，或用关键词 "from" 和 "to" ，等同于 0% 和 100%。 0%是动画的开始，100% 是动画的完成。

@keyframes 动画名称 {
    动画过程，可以添加任意百分比处的动画细节
}

animation 属性

需要将 @keyframes 中创建的动画捆绑到某个选择器，否则不会产生动画效果。 animation 属性用于对动画进行捆绑。

div {
    animation: 动画名称 过渡时间 速度曲线 动画次数 延时时间；
}

其中必须设置动画名称和过渡时间，其他属性值可以根据需求设置。

单一属性列表:

值	说明
animation-name	指定要绑定到选择器的关键帧的名称
animation-duration	动画指定需要多少秒或毫秒完成
animation-timing-function	设置动画将如何完成一个周期
animation-delay	设置动画在启动前的延迟间隔。
animation-iteration-count	定义动画的播放次数。
animation-direction	指定是否应该轮流反向播放动画。
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-play-state	指定动画是否正在运行或已暂停。

浏览器兼容

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。

Chrome 和 Safari 需要前缀 -webkit-。

Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性