一.CSS3新增选择器
1.子级选择器
书写语法：element1 > element2
注意：如果 element2 元素不是父元素 element1 的直接子元素，则不会被选择。
2.兄弟选择器
| 选择器 | 简介 |
|---|---|
| element1+element2 | 匹配同一个父元素中紧跟在element1后面的一个element2元素 |
| element1~element2 | 匹配同一个父元素中在element1后面的所有element2元素 |
3.结构伪类选择器
| 选择器 | 简介 |
|---|---|
| E:first-child | 匹配父元素中的第一个子元素E |
| E:last-child | 匹配父元素中最后一个E元素 |
| E:nth-child(n) | 匹配父元素中的第n个子元素E |
| E:first-of-type | 指定类型E的第一个 |
| E:last-of-type | 指定类型E的最后一个 |
| E:nth-of-type(n) | 指定类型E的第n个 |
（1）. E:nth-child(n) 和E:nth-of-type(n) 的区别
- E:nth-child(n) 匹配父元素的第 n 个子元素 E，同时需要满足两个条件。
- E:nth-of-type(n) 匹配同类型中的第 n 个同级兄弟元素 E，会忽视其他同级的非同类型元素。
<style>
.box1 p:nth-child(3) {
background-color: red;
}
.box1 p:nth-child(odd) {
background-color: red;
}
.box1 p:nth-child(-n+4) {
background-color: red;
</style>
</head>
<body>
<div class="box1">
<h2>二级标题</h2>
<p>段落1</p>
<h2>二级标题</h2>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
<p>段落5</p>
</div>
</body>
4.伪类元素选择器
| 选择器 | 介绍 |
|---|---|
| E::before | 在 E 元素内部的前面插入一个元素 |
| E::after | 在 E 元素内部的后面插入一个元素 |
| E::first-letter | 选择到了 E 容器内的第一个字母 |
| E::first-line | 选择到了 E 容器内的第一行文本 |
- 伪元素的注意事项
- before 和 after 创建一个元素，但是属于行内元素。
- 伪元素里面必须写上属性 content: "" ;
- 因为在 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元素 |
6.选择器权重
-
基础选择器：id 选择器 > 类选择器 > 标签选择器 > *
-
伪类选择器、属性选择器 的权重等于类选择器 。
-
伪元素选择器 的权重等于标签选择器 。
二.CSS3盒模型
- • CSS3 中可以通过 box-sizing 来指定盒模型，这样我们就可以设置如何计算一个元素的总 宽度和总高度
| 属性值 | 简介 |
|---|---|
| content-box | 默认值，标准盒子模型，盒模型是外扩的。 width 与 height 只包括内容的宽和高。 在 width 和 height 之外绘制元素的内边距和边框。 |
| border-box | 怪异模式，盒模型是内减的。 width 和 height 属性包括内容，内边距和边框，但不包括外边距。 为元素指定的任何内边距和边框都将在已设定的 width 和 height 内进行绘制。 |
1.content-box 标准模式
- Standard 模式：标准模式中，盒子总体大小为 width(height) + padding + border，内容 区域是 width 和 height 部分。
2.border-box 怪异模式
- Quirks 模式：怪异模式中，盒子总体大小为 width 和 height，添加了padding和border后， 内容区域会收缩。
三.CSS3新增属性
1.边框圆角
| 属性值 | 说明 |
|---|---|
| x-radius / y-radius | / 分割两部分属性值，前面为水平半径，后面为垂直半径， 得到的是椭圆角。 |
| radius | 一个属性值，则水平和垂直都设置为同一个值，得到的是 圆角。 |
单一属性
- border-top-left-radius: 半径;
- border-top-right-radius: 半径;
- border-bottom-right-radius: 半径;
- border-bottom-left-radius: 半径;
简写：
- border-radius 相当于四个单一属性的简写方法，类似 padding 也可以有四种值的写法。
- border-radius: 左上角 右上角 右下角 左下角;
- border-radius: 左上角 右上角和左下角 右下角 ;
- border-radius: 左上角和右下角 右上角和左下角 ;
- border-radius: 四个角相同;
/ 的属性值写法
- border-radius 属性值中出现了 / 斜线，那么 / 前面可以设置水平方向四种值的写法，/ 后 面可以设置垂直方向四种值的写法。
border-radius: 50% 20% 40% / 20% 30%
左上：y50% x20%
右上：y20% x30%
右下：y40% x20%
左下：y20% x30%
浏览器兼容
- Internet Explorer 8 及以下版本浏览器不支持border-radius属性，其他浏览器都支持。
2.文字阴影
- 在 CSS3 中，
text-shadow可向文本应用阴影。通过属性值能够规定水平阴影、垂直阴影、 模糊距离，以及阴影的颜色：
| 属性值 | 简介 |
|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值。 |
| v-shadow | 必需。垂直阴影的位置。允许负值 |
| blur | 可选。模糊的距离。 |
| color | 可选。阴影的颜色。 |
多层阴影
- 也可以向文本添加多个阴影，逗号分隔多个阴影的属性值。 注意：多阴影中，先写的阴影压盖在后写的阴影上。
text-shadow: 3px 3px #f00,
6px 6px #0f0,
9px 9px #00f;
3.盒子/边框阴影
box-shadow 属性向盒子添加阴影，属性值有2-4 个长度值、可选的颜色值以及可选 的 inset 关键词来规定，省略的长度是 0。
| 属性值 | 简介 |
|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值。 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 |
| blur | 可选。模糊距离。 |
| spread | 可选。阴影的尺寸。 |
| color | 可选。阴影的颜色。 |
| inset | 可选。将外部阴影改为内部阴影。 |
多层阴影
box-shadow 属性也可以向盒子添加多个阴影，逗号分隔多个阴影的属性值。 注意：多阴影中，先写的阴影压盖在后写的阴影上。
/* 边框阴影：水平位置 垂直位置 模糊程度 扩展大小 颜色 是否内边框阴影 */
/* 注意：外部的边框阴影不需要进行设置，他是默认的，如果增加了outset值反而出现错误 */
/* box-shadow: 20px 20px 5px 20px #f00 inset; */
box-shadow: 20px 20px 5px #f00,
40px 40px 5px #0f0,
60px 60px 5px #00f;
4.过度属性
（1）动画效果
- CSS3 出现之前，前端一般使用 Flash 动画或 JavaScript 制作动画。
- 帧动画：通过一帧一帧的画面按照固定顺序和速度播放，如电影胶片。
（2）过度属性
-
属性名：transition
-
作用：在不使用 Flash 动画或 JavaScript 的情况下，使用 transition 可以实现补间动画（过渡效果）， 并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指），那么A和B之间就可以实 现平滑的过渡的动画效果。为了方便看效果，我们使用 :hover 切换状态。
-
语法格式：
transition: 过度的属性 过度时间 运动曲线 延时时间
| 属性 | 描述 |
|---|---|
| transition | 简写属性，用于在一个属性中设置四个过渡属性。 |
| transition-property | 规定应用过渡的 CSS 属性的名称。 |
| transition-duration | 定义过渡效果花费的时间。默认是 0。 |
| transition-timing-function | 规定过渡效果的时间曲线。默认是 "ease" |
| transition-delay | 规定过渡效果何时开始。默认是 0。 |
（3）transition-property
- none 表示没有属性过渡
- all 表示所有变化的属性都过渡
- 属性名 使用具体的属性名，多个属性名中间逗号分隔
（4）transition-duration时间
- 过渡时间：以s秒为单位。
- 延时时间：以s秒为单位。0s也必须加单位。
（5）transition-timing-function 时间曲线
| 值 | 描述 |
|---|---|
| linear | 相同速度开始至结束的过渡效果（匀速） |
| ease | 慢速开始，然后变快，然后慢速结束的过渡效果（逐渐慢下来） |
| ease-in | 以慢速开始的过渡效果（加速） |
| ease-out | 以慢速结束的过渡效果（减速） |
| ease-in-out | 以慢速开始和结束的过渡效果（先加速后减速） |
| cubic-bezier(x1,y1,x2,y2) | 在cubic-bezier函数中定义自己的值，x1、x2取0-1之间的数值。y1、y2任意取值，四个数值表示拉扯的点的两个坐标 |
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 100px;
height: 100px;
background-color: pink;
/* 过度属性：属性 过渡时间 时间曲线 延迟时间 */
transition: all 2s linear 0s;
transition: all 2s cubic-bezier(0.48, 0.01, 0.68, 1.02) 0s;
}
/* 属性最终状态 */
.box:hover {
width: 500px;
}
</style>
（6）浏览器兼容问题
- Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。
- Safari 需要前缀 -webkit-。
- 注意：Internet Explorer 9 以及更早的版本，不支持 transition 属性。
四.2D转换
- 属性名：transform
- 作用：对元素进行移动、缩放、旋转、拉长或拉伸。配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。
- 属性值：多种转换方法的属性值，可以实现不同的转换效果
1.位移translate()
| 值 | 说明 |
|---|---|
| translate(x,y) | x,y分别为水平和垂直方向位移的距离，可以为px值或百分比， 区分正负 |
| translate(x) | 只有一个数值，表示水平方向的位移 |
<style>
* {
margin: 0;
padding: 0;
}
.box {
position: relative;
width: 500px;
height: 300px;
border: 1px solid black;
}
p {
position: absolute;
left: 50%;
padding: 0 10px;
/* 使用margin-left，将自身的一半拽回，需要计算自身宽度 */
/* margin-left: -60px; */
/* 使用translate(-50%)，将自身的一般拽回去，不需要计算 */
transform: translate(-50%);
width: 100px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<p></p>
</div>
</body>
2.缩放scale()
- transform 的属性值为 scale() 时，可以实现元素缩放效果。
| 值 | 说明 |
|---|---|
| scale(x, y） | x,y分别为改变元素的宽度和高度的倍数 |
| scale(n) | 只有一个值，表示宽度和高度同时缩放n倍 |
| scaleX(n) | 改变元素的宽度 |
| scaleY(n) | 改变元素的高度 |
3.旋转 rotate()
-
transform 属性值设置为 rotate() 时，实现元素的旋转。
-
默认为 元素 围绕着 元素中心 旋转
-
书写语法：
- rotate(数字deg) 其中，deg为度数单位，正数表示顺时针旋转，负数表示逆时针旋转。
- 2D的旋转只有 一个属性值。
-
注意：
- 元素旋转后，坐标轴也跟着发生转变。
- 因此，多个属性值同时设置给 transform 时，书写顺序不同导致的转换效果有差异。
<style>
.box img {
/* 旋转 */
/* transform: rotate(-30deg); */
/* 先旋转后位移 */
/* transform: rotate(30deg) translate(150px); */
/* 先位移后旋转 */
transform: translate(150px) rotate(30deg) ;
}
</style>
4.倾斜 skew()
-
transform 属性值设置为 skew() 时，实现元素的倾斜。
-
书写语法：
- transform: skew(数字deg,数字deg);
- 两个属性值分别表示水平和垂直方向倾斜的角度，属性值可以为正可以为负，第二个 数值不写默认为0
-
可以以元素的
底边或者右边为参考点
5.transform-origin 属性
- 作用：
- 设置调整元素的水平和垂直方向原点的位置。
- 调整元素的基准点。
- 对旋转非常重要
- 属性值：包含两个，中间使用空格分隔。
| 值 | 说明 |
|---|---|
| x | 定义 X 轴的原点在何处。可能的值：left 、center、right、像素值、百分比 |
| y | 定义 Y 轴的原点在何处。可能的值：top、center、bottom、像素值、百分比 |
/* 设置基准点 */
transform-origin: right top;
五.3D转换
- transform 属性不止能实现 2D 转换，也可以制作 3D 立体转换效果，
- 比普通的 x、y 轴组成 的平面效果多了一条 z 轴，
1.透视
- 电脑显示屏是一个 2D 平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现， 通过透视可以实现此目的。
- 透视可以将一个 2D 平面，在转换的过程当中，呈现 3D 效果。
- 透视特点：近大远小。
- 注意：并非任何情况下需要透视效果，根据开发需要进行设置，如果需要展示 z 轴的变化， 则设置透视效果。
2.透视属性 perspective
- 属性名：perspective
- 作用：设置在 z 轴的视线焦点的观察位置，从而实现 3D 查看效果。
- 属性值：像素值，数值越大，观察点距离 z 轴原点越远，图形效果越完整且接近原始尺寸。
- 注意：透视属性需要设置给 3D 变化元素的父级。
3.3D 旋转
| 值 | 说明 |
|---|---|
| rotateX(angle) | 定义沿着 X 轴的 3D 旋转。 |
| rotateY(angle) | 定义沿着 Y 轴的 3D 旋转。 逆时针：图片右大左小，正钟从右到左，倒看钟逆时针，左上到左下 |
| rotateZ(angle) | 定义沿着 Z 轴的 3D 旋转。 |
4.3D 位移
- 类似的，位移也分为三个方向的移动：
- 属性值为像素值或百分比，正负表示位移的方向。正值向对应轴的正方向移动，负值向对应 轴的负方向移动。
| 值 | 说明 |
|---|---|
| translateX(x) | 设置 X 轴的位移值。 |
| translateY(y) | 设置 Y 轴的位移值 |
| translateZ(z) | 定义3D位移，设置Z轴的位移值。 |
transform: rotateY(60deg) translateX(200px) ;
/* 旋转和位移可以同时设置，但是顺序不同，导致效果也有差异 */
5.transform-style属性
用于设置被嵌套的子元素在父元素的 3D 空间中显示，子元素会保留自己的 3D 转换坐标轴。
- 属性值：
- flat：所有子元素在 2D 平面呈现
- preserve-3d：保留 3D 空间
3D 元素构建是指某个图形是由多个元素构成的，可以给这些元素的父元素设置 transform-style: preserve-3d，来使其变成一个真正的 3D 图形。
一般来说，该属性设置给 3D 变换图形的父级元素
6.浏览器兼容
- Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。
- Chrome 和 Safari 需要前缀 -webkit-。
- Internet Explorer 9 需要前缀 -ms-。
六.CSS3动画
1.@keyframes 规则
- @keyframes 规则用于创建动画。
- 在 @keyframes 中规定某项 CSS 样式，就能创建由从一种样式逐渐变化为另一种样式的效果。 可以改变任意多的样式任意多的次数。
- 需要使用百分比来规定变化发生的时间，或用关键词 "from" 和 "to" ，等同于 0% 和 100%。 0% 是动画的开始，100% 是动画的完成
2.@keyframes 书写方法
@keyframes 动画名称 { 动画过程，可以添加任意百分比处的动画细节 }
3.animation 属性
-
需要将 @keyframes 中创建的动画捆绑到某个选择器，否则不会产生动画效果。 animation 属性用于对动画进行捆绑。
-
语法： div { animation: 动画名称 过渡时间 速度曲线 动画次数 延时时间； }
-
其中必须设置动画名称和过渡时间，其他属性值可以根据需求设置
单一属性列表
| 属性 | 描述 |
|---|---|
| animation-name | 规定 @keyframes 动画的名称。 |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 |
| animationtiming-function | 规定动画的速度曲线。默认是 "ease |
| animationdelay | 规定动画何时开始。默认是 0。 |
| animationiteration-count | 规定动画被播放的次数。默认是 1。infinite表示无限次播放。 |
<style>
.box {
width: 100px;
height: 100px;
margin: 150px auto;
border-radius: 50%;
background-color: pink;
/* 添加绑定动画 */
animation: move1 1s linear 3 2s;
/* animation: move2 1s linear infinite; */
}
/* 自定义动画 */
@keyframes move1 {
/* 从头开始，最好保持跟默认样式的状态一致 */
from {
transform: translateY(0);
}
/* 到结束位置 */
to {
transform: translateY(100px);
}
}
/* 百分比定义动画细节 */
@keyframes move2 {
0% {
transform: translateY(0);
}
25% {
transform: translateY(100px);
}
50% {
transform: translateY(0);
}
75% {
transform: translateY(-100px);
}
100% {
transform: translateY(0);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
4.浏览器兼容
- Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
- Chrome 和 Safari 需要前缀 -webkit-。
- Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。
