Day13-CSS3

C3新增属性扩展：

穿透效果：
	pointer-events:none;
	通过自身访问被盖住的内容

盒子阴影：

给元素添加的阴影：
	box-shadow:;
		h-shadow 水平阴影的位置，必选
		v-shadow 垂直阴影的位置，必选
		blur	 模糊的距离，可选
		spread	 阴影的大小，可选
		color	 阴影的颜色，可选
		inset	 从外阴影开始时改变阴影内测阴影，可选
	box-shadow: 10px 10px 5px 10px #333 inset;
	设置多阴影，中间用逗号隔开
	多阴影之间有层级关系，先写的层级高

图片边框属性:

border-image-source:url()用于边框的图片的路径
border-image-slice 图片边框向内偏移
border-image-repeat 图片边框书否平铺
	repeat 平铺
	round 铺满
	strecth	拉伸
border-image-outset 边框图片区域超出边框的量,不写进复合属性内，值是一个倍数
复合属性：
	border-image：source slice repeat;

渐变

1.线性渐变：从一个点到另一个点的渐变
	语法：
		background-image:repeating-linear-gradient(direction,color stop1,color stop2,...);
		linear-gradient() 线性渐变
		direction：设置渐变的方向
			to bottom	默认值，自上而下
			to top
			to left
			to right
			to right top
			to right bottom
			ti left top
			to left bottom
			角度(deg)
		color 渐变的颜色
		stop  渐变的范围(默认值平均分配)
			单位可以是px/%；
		repeating 重复显示渐变效果
2.多渐变的设置：
	渐变和渐变之间用逗号隔开
	先写的渐变层级最高

3.径向渐变：从一个点像四周扩散
	语法：
		background-image:radial-gradient(shape size  at position,color stop,...,color stop);
		radial-gradient() 径向渐变
		shape 设置渐变的形状
			ellipse 椭圆，默认值
			circle  圆形
		size 设置渐变的大小
			closest-side
			farthest-side
			closest-corner
			farther-corner 默认值，最远角
		position 设置渐变起始点的位置
			默认值：中心点
			属性值：
				数值：px、%
				法定属性值：left right center top bottom
				设置两个值：第一个值表示水平位置，第二个值表示垂直方向的位置
				设置一个值：
					数值时，表示宽，高则显示为center
					法定属性值，未设置的为center
		color 渐变的颜色
		stop 渐变颜色的显示范围
		repeating-  重复显示渐变效果
	background-image:repeating-radial-gradient(circle farther-corner at 20px 30px,red,yellow,green);

过渡属性:

过渡属性：
	说明：在一定的时间区间内，实现元素从一个值到另一个值之间的变化
	过渡属性，必须在触发某个事件时，才会产生过渡效果
语法:
	复合属性：
	transition:property duration delay timing-function;中间用空格隔开
1.参与过渡的属性：
	transition-property:;
		属性值：参与过渡的属性名称，多个属性用逗号隔开，默认值all
2.过渡的持续时间:必须要有的
	transition-duration:;
		属性值：数值；单位：s/ms
3.过度延迟的时间：
	trasition-delay:;
		属性值：数值；单位：s/ms
		小数点的0可以省略
		支持负值：提前执行
4.过渡运动类型
	transition-timing-function:;
		贝塞尔曲线
		linear	匀速
		ease	逐渐慢下来，默认值
		ease-in	 加速
		ease-out 减速
		ease-in-out先加速后减速
		steps(n) 逐帧

2D：

2D：
	表示平面空间
	x轴：向左为负，向右为正
	y轴：向上为负，向下为正

变形属性：

transform:;
属性值：
	1.位移：元素是相对于自身所在位置发生位移的，类似于相对定位
		translate(x) 水平方向的位移
		translate(x,y) 水平方向的位移，垂直方向的位移
		translateX(x)单独设置
		translateY(y)
		属性值的单位：px,%

	2.缩放：
		scale()
		scale(xy) 水平和垂直都会被缩放
		scale(x,y)水平方向和垂直方向
		scaleX(x)单独设置
		scaleY(y)
		属性值：是一个倍数，不加单位，支持负值
			0—1 缩小
			1	不缩小
			>1	放大
			<0	缩小

	3.旋转：
		rotate()
			rotate(z)	沿中心点，左右旋转
			rotateX(x)	沿x轴旋转
			rotateY(y)	沿y轴旋转
		属性值单位：角度deg，支持负值

	4.倾斜：
		skew()
			skew(x)
			skew(x,y)
			skewX(x)
			skewY(y)
		属性值单位：角度deg，支持负值右
2.变形复合属性：
	可以同时设置多种效果，中间用空格隔开，不能分开写
		1.先位移和先旋转的区别：
			位移之后再旋转
			旋转之后再位移：旋转的过程中，xy轴发生了变化，始终和元素保持

3.变形属性的特点：
		1.添加了变形属性的元素，发生了层级变化；
		2.层级关系根据html结构的书写顺序显示，后写的层级最高
		3.变形之后原来的位置是保留的，不影响页面布局，不脱离文档流
		4.变形元素默认时都是相对元素的中心点发生变形的
		5.改变层级关系，加定位属性，应用z-index；

4.设置被旋转元素的背面是否可见
	backface-visibility:;
		hidden 隐藏 不可见
		visible 可见 默认值

5.变形原点属性：
	transform-origin:;
		属性值：默认值为中心点
			数值加单位：px/%;
			法定属性值：left，right，center，top，bottom
		一个值：
			数值时：表示水平方向的原点位置，另一个值默认为center
			法定属性值：另一个值默认为center
		两个值：
			数值时：第一个值表示水平，第二个值表示垂直

渐变，多背景，阴影先写的层级高
定位，变形属性后写的层级高