CSS3新特性

CSS3的新特性有：1、CSS3选择器 2、CSS3圆角与边框（盒阴影） 3、CSS背景与渐变 4、CSS3过度 5、CSS3变换 6、CSS3动画

1、CSS3选择器又分为：

1）基本选择器

2）属性选择器

3）伪类选择器

3-1）动态伪类
	1.锚点伪类 —— :link，:visited
	2.用户行为伪类 —— :hover，:active，:focus
	3.目标伪类 —— :target
	4.checked状态伪类
3—2）CSS3结构类：nth选择器
	：first-child/last-child
	：nth-child(n)
	：nth-last-child(n)
	 ————
	：nth-of-type(n)
	: nth-last-of-type
	: first-of-type/:last-of-type
	 ————
	：only-child
	：only-of-type
	：empty
4）否定选择器：not

伪元素(也可以使用 '😂

1. element::first-line —— 元素的第一行，块级元素
2. element::first-letter —— 文本首字母，块级元素
3. element::before —— 常与content配合使用
4. element::after
5. element::selection —— 选中文本后的背景色与前景色

伪元素与元素的区别:

1. 无法通过JS获取其DOM
2. 无法通过浏览器开发者工具直接查看
3. 伪元素默认是 inline

2、CSS3圆角与盒阴影

1）CSS3圆角border-radius

border-top-left-radius 左上角
border-top-right-radius 右上角
border-bottom-right-radius 右下角
border-bottom-left-radius 左下角
复合属性：border-radius：
	四个值：左上角 右上角 右下角 左下角
	三个值：左上角 右上角和左下角 右下角
	两个值：左上角和右下角 右上角和左下角
	一个值：4个角都生效
	当拿50%时，宽等于高为圆形 宽不等于高为椭圆形（百分比，参照的是元素本身的高度与宽度）

2）盒阴影box-shadow - 文本阴影text-shadow

语法：box-shadow: 水平方向的偏移量 垂直方向的偏移量 模糊程度 扩展程度 颜色 是否具有内阴影
属性值介绍:
	2-1)偏移量：
		素左上角（0，0）作为基准点,找水平方向和垂直方向的偏移量
		水平： 正值 --- 右 ，负值 --- 左
		垂直： 正值 --- 下 ，负值 --- 上
	2-2)模糊程度：
		边界模糊，但是边界线未动
		由边界线向外模糊多少像素
	2-3)扩展程度：
		盒子阴影，上下左右都向外扩展多少像素
	2-4)是否具有内阴影：
		inset(默认没有，也就是默认是外阴影)
		加上inset,盒子的阴影为内阴影
		扩展程度可为负值，但是模糊程度不可以

3、CSS3背景与渐变

3-1）CSS3背景

1）background-image
background-cilp：border-box / padding-box / content-box —— 指定背景的绘制区域（裁剪）
	border-box：背景被裁剪到边框盒（从边框开始绘制背景图片）---默认
	padding-box：背景被裁剪到内边距框（从内边距开始绘制背景图片）
	content-box：背景被裁剪到内容框
2）background-origin：border-box / padding-box / content-box —— 设置背景图像的原始起始位置
	border-box：相对于边框来定位
	padding-box：相对于内边距来定位
	content-box：相对于内容框来定位
background-position:定义背景图片的位置，水平与垂直方向上面的偏移量(参考点)
3）background-repeat —— 设置是否及如何重复背景图像
	repeat 默认。背景图像将在垂直方向和水平方向重复。
	repeat-x 背景图像将在水平方向重复。
	repeat-y 背景图像将在垂直方向重复。
	no-repeat 背景图像将仅显示一次。
	inherit 规定应该从父元素继承 background-repeat 属性的设置
4）background-size：number / % / cover / contain —— 指定背景图像的大小
	number: 宽度 高度（如果只写一个数值，第二个数值默认auto）
	百分比： 0% - 100% 之间的任何值，此时的百分比参照于元素div的大小
	cover：将背景图片等比缩放以填满整个容器（最远边），如果高度达到一定比例100%，宽度多出的会溢出，但是，具体那部分溢出取决于定位
	contain：将背景图片等比缩放至某一边紧贴容器边缘为止（最近边），如果图片高度比较小，高度就会有空白区域出现

3-2）CSS3渐变 —— 可以在两个或者多个指定颜色之间显示平移的过渡

1）线性渐变 —— 是沿着一根轴线改变颜色，从起点到终点进行顺序渐变
	语法：background:linear-gradient(方向，开始颜色，结束颜色)
	方向介绍：
		1-1）方向从上到下
			background: linear-gradient(red,blue);
		1-2）方向从左到右
			background: linear-gradient(**to right**,red,blue);
		1-3）对角
			background: linear-gradient(to right bottom,red,blue);
		1-4）角度(单位deg)
			background: linear-gradient(角度,red,blue);
			角度说明：0deg 将创建一个从下到上的渐变，90deg将创建一个从左到右的渐变
			颜色结点：默认每个颜色均匀分布
			background: linear-gradient(red 10%,blue 20%,green 30%,yellow 40%);
			background: linear-gradient(red 10%,blue); —— 从0%到10%，为红色，从10%到100%为红色到蓝色的渐变
			background: linear-gradient(red,blue 30%); —— 从0%到30%，为红色到蓝色的渐变
		background:lineargradient(rgba(255,0,0,0),rgba(255,0,0,1)); —— 由透明色变为不透明色
		1-5）重复渐变
			background: repeating-linear-gradient(90deg,red 0%,blue 20%); —— 把元素的整体宽度看成100%
2）径向渐变 —— 从起点到终点，颜色从内向外进行圆形渐变
	background:radial-gradient(形状尺寸，开始颜色，结束颜色)
	2-1)形状分类：
		circle --- 圆形
		ellipse --- 椭圆形
		当元素的高和宽一样时，参数无论设置哪个，都是圆形
	2-2)尺寸大小:
		2-2-1)closest-side最近边
			background: radial-gradient(closest-side circle,red , blue);
		2-2-2)farthest-side 最远边
			background: radial-gradient(farthest-side circle,red , blue);
		2-2-3)closest-corner最近角
			background: radial-gradient(closest-corner circle,red , blue);
		2-2-4)farthest-corner最远角
			background: radial-gradient(farthest-corner circle,red , blue);
	2-3)颜色结点：
		background:radial-gradient(circle,red 50% ,blue 70%);
		注：此时的百分比,指的是圆心到元素最远端的距离（角度）
	2-4）重复渐变 ：
		 background: repeating-radial-gradient(red 0%,blue 20%);

4、CSS3过渡

定义：允许css的属性值在一定时间区间内平滑的过渡，在鼠标点击，鼠标滑过或对元素任何改变中触发，并圆滑地以动画形式改变css的属性值。
属性：
	1.transition-property：：none | all | property
		定义：设置对象中的参与过渡的属性
		none： 没有属性改变
		all : 默认值，所有属性都改变
		property： 元素的属性名 width,color等
	2.transition-duration：time
		定义: 设置对象过渡的持续时间
		规定完成过渡效果需要花费的时间，以秒或者毫秒计，默认值0
	3.transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
		定义：设置对象中过渡的动画类型，即规定过渡效果的速度曲线。
		ease:平滑过渡（0--慢--快--慢），默认值 = cubic-bezier(0.25,0.1,0.25,1) （贝塞尔曲线）
		linear:线性过渡（匀速）= cubic-bezier(0,0,1,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)
	4.transition-delay：time
		定义：设置对象延迟的过渡时间
		指定秒或者毫秒数来延迟动画效果的开始，默认是0
	5.transition ： property duration timing-function delay；
		复合属性，过渡时间和延迟时间的顺序不能乱

5、CSS3变换

定义：让一个元素在一个坐标系统中变形，这个属性包含一系列的变形函数，可以移动，旋转，缩放元素。
语法：transform：none | <transform-function> 默认值是none

5-1）2d变换

1.rotate()旋转
	定义：通过指定一个角度参数，对元素指定一个2D的旋转
	语法：transform：rotate(angle) 单位deg
	说明：angle指旋转角度，正数表示顺时针旋转，负数表示逆时针旋转
2.translate()平移
	定义：根据X轴和Y轴的位置给定参数，使当前元素位置移动
	语法：transform：translateX() 单位px —— 仅水平方向移动
	语法：transform：translateY() 单位px —— 仅垂直方向移动
	语法：transform：translate( X, Y) 单位px —— 水平方向和垂直方向同时移动
	3.scale( )缩放
		定义：设置元素的缩放程度
		语法：transform：scaleX() 没有单位 —— 仅水平方向缩放
		语法：transform：scaleY() 没有单位 —— 仅垂直方向缩放
		transform：scale(x,y) 没有单位 —— 使元素水平和垂直方向同时缩放
	4.skew()扭曲/倾斜
		定义：设置元素的倾斜状态
		skewX( ) 仅使元素在水平方向上扭曲变形 单位deg 正值 ----逆时针
		skewY( ) 仅使元素在垂直方向上扭曲变形 单位deg 正值 ----顺时针
		skew( ) 使元素在水平方向和垂直方向上扭曲变形 单位deg
		注意：0deg与180deg 效果一样
	5.变换基点
		定义：元素变换的基准点
		语法： transform-origin：水平方向 垂直方向
		left top 左上角 ----四个角均可以
		25% top
		50px 50px
		默认值：rotate 几何中心点，skew 几何中心点，scale 几何中心点，translate 本身位置

5-2）3d变换

1.开启3d空间transform-style: preserve-3d; 一般给父元素开启
2.子元素设置3d变换效果
	2-1）rotateX()
		定义：指对象在X轴上的旋转角度（变换基点： 50% 50% 0）
	2-2）rotateY()
		定义：指对象在Y轴上的旋转角度（变换基点： 50% 50% 0）
	2-3) rotateZ()
		定义：指对象在Z轴上的旋转角度（变换基点： 50% 50% 0）
	2-4)translateZ()
		定义：指对象在Z轴上面的平移（变换基点： 50% 50% 0）
	2-5)scaleZ()
		定义：指定对象的Z轴缩放（变换基点： 50% 50% 0）(无太大意义，开启3d空间)
3.设置景深：实现近大远小
	父元素：perspective: 300px;
	子元素:transform:perspective(300px) translateZ(-200px);
	注意：景深：可选值：大于或等于0,景深值越大，元素看起来越大
4.变换基点
	transform-origin: top; 关键字表示 ( 50% 0 0 )
	注意：立体3d盒子 Z：只能使用具体的长度，不能使用百分比和关键字
5.景深中心点：改变观察者视角
	perspective-origin: top;
	perspective-origin: top right;
6.元素背面可见还是不可见
	backface-visibility:visible ;（默认值：可见）
	backface-visibility: hidden; 不可见

6、CSS3动画

定义：使元素从一种样式逐渐变化到另外一种样式的效果

6-1)@keyframes

定义：keyframes关键帧，用来决定动画变化的关键位置
语法：@keyframes animationname{keyframes-selector{cssStyles;}}
animationname：必写项，定义动画的名称
keyframes-selector：必写项，动画持续时间的百分比 0% - 100%之间， 或者使用form和to关键字也可以设置，form代表0%，to代表100%
示例:
@keyframes abc {
	from{transform: rotate(0)}
	50%{transform:rotate(90deg)}
	to{transform: rotate(360deg)}
}

6-2)animation属性

1.animation-name：keyframename | none
	keyframename：指定要绑定到选择器的关键帧的动画名称
2.animation-duration：time
	定义：设置对象动画的持续时间
	说明：指定对象播放完成需要花费的时间，默认值是0
3.animation-timing-function: value;
	定义：设置对象动画的过渡类型，即规定动画的速度曲线
	linear	动画从头到尾的速度是相同的。
	ease	默认。动画以低速开始，然后加快，在结束前变慢。
	ease-in	动画以低速开始。
	ease-out	动画以低速结束。
	ease-in-out	动画以低速开始和结束。
	cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
4.animation-delay：time
	定义：设置动画的延迟时间
5.animation-iteration-count：infinite | number
	定义：设置对象动画的循环次数
	number为数字，其默认值是1
	infinite：无限循环次数
6.animation-direction：normal , reverse , alternate , alternate-reverse
	定义：设置对象动画是否反向运动
	normal : 正常方向
	reverse :反向运动
	alternate ： 先正常运动在反向运动，并持续交替运行， 需要配合循环属性使用
	alternate-reverse ： 先反向运动在正常运动，并持续交替运行， 需要配合循环属性使用
7.animation-play-state：paused | running
	定义：指定对象是否正在运行或已暂停
	paused ： 指定暂停动画
	running : 默认值，制定正在运行的动画
	示例: #box:hover{animation-play-state: paused;}—鼠标移动到box上暂停动画
8.animation-fill-mode
	定义：设置动画结束后的状态
	none：默认值。不设置对象动画之外的状态，DOM未进行动画前状态
	forwards：设置对象状态为动画结束时的状态，100%或to时，当设置animation-direcdtion为reverse时动画结束后显示为keyframes第一帧
	backwards：设置对象状态为动画开始时的状态,（测试显示DOM未进行动画前状态）
	both：设置对象状态为动画结束或开始的状态，结束时状态优先
9.animation复合属性（不推荐使用 ）

注意：在css3里面，给元素设置圆角、阴影、变换等属性时，尽管外形位置发生改变，但是元素本身大小和位置不变