CSS3的其他小知识

1、线性渐变
一般是用于背景色的颜色渐变
background:linear-gradient(color1,color2,......)
支持多颜色渐变；
也支持多方向渐变
background:linear-gradient(to bottom,color1,color2,......)
方向可以是四个方向，也可以是四个角度，如top right，默认是bottom；
也可以支持多角度渐变
background:linear-gradient(180deg,color1,color2,......)
deg是度的单位，180deg代表向向下渐变，也是默认值

2、径向渐变
背景颜色的一种涟漪状的渐变，也支持多颜色渐变
background:radial-gradient(color1,color2,......)
支持指定渐变起点
background:radial-gradient(center,color1,color2,......)
默认是中心点，也可以用两个百分比表示x、y轴的偏移量；
支持渐变形状
background:radial-gradient(ellipse,color1,color2,......)
默认是椭圆形ellipse，圆形是circle；
支持每个渐变大小
background:radial-gradient(color1 20%,color2 40%,......)
颜色后面的百分比代表前一个颜色渐变到该颜色的位置，这个也可以适用于线性渐变；
支持整个渐变的大小
background:radial-gradient(closest-side,color1,color2,......)
默认是渐变到最近边closest-side，farthest-side最远边，closest-corner最近角，farthest-corner最远角

3、重复渐变
顾名思义，就是一种渐变重复显示，如果渐变的最后一个颜色渐变位置设置好之后，之后的颜色就单纯一个颜色，可以在渐变属性值前再加一个单词repeating，如
background:repeating-radial-gradient(color1 20%,color2 40%,color3 80%)

4、过渡动画
属性transition，一般用于触发鼠标事件，比如

<style>
	<div>
		height:20px;
		transition:height 2s linear 2s;
	</div>
	<div>
		height:40px;
	</div>
</style>

transition前两个值必填，分别代表需要过渡的属性和时间，后两个值默认是匀速和不延迟；
这个属性不支持display:none/block的过渡；
过渡类型有linear匀速、ease逐渐慢下来、ease-in加速、ease-out减速、ease-in-out先加速后减速、cubic-bezier()贝塞尔曲线；
transition一次性只能支持一个属性的过渡，如果需要支持多个属性同时过渡，可以用另一种方式代替：

<style>
	<div>
		height:20px;
		background:red;
		transition-property:height background;
		transition-duration:2s;
		transition-timing-function:linear;
		transition-delay:2s;
	</div>
	<div>
		height:40px;
		background:yellow;
	</div>
</style>

可以拆开4个属性来进行设置

5、2D属性transform
属性值translate(tx,ty)代表水平平移tx，垂直平移ty，可以负值，也可以设置单方向的平移translateX(tx)、垂直平移translateY(ty)；也是一般用于触发鼠标事件，是瞬间完成，可以搭配transition进行平滑过渡

属性值sclae(num)代表元素缩放原来的num倍，如果是负值的话，是代表倒着缩放num倍；也可以支持单向缩放sclaeX()、scaleY()；也支持改变缩放的中心点，这就需要添加另一个属性transform-origin:left/right/left bottom等等

属性值rotate(deg)代表元素旋转，默认是按照中心点旋转。如果是正值，代表顺时针旋转，反之就是逆时针；rotateX(deg)代表按照x轴旋转，rotateY(deg)代表按照y轴旋转；也可以支持transform-origin属性设置旋转的中心点

transform也可以多值设置，一般建议translate在前，sclae、rotate在后

属性值skew(deg)代表倾斜，如果是一个参数，代表水平位置倾斜，如果是两个参数，第一个代表水平，第二个代表垂直；如果是正值，代表往右或者往下倾斜，反之往左或者往上；支持单方向倾斜skewX()、skewY()

6、关键帧动画animation
animation和transition的区别在于不需要触发事件，搭配keyframes：

<style>
	div{
		.....
		animation:name;
	}
	@keyframes name{
		from{
			.....
		}
		to{
			.....
		}
	}
</style>

keyframes内过渡表示可以用from-to，也可以用多个百分比；
animation也支持多个属性指，常见的有动画名、持续时间、过渡类型、执行次数；
animation复合属性也可以拆分为多个单一属性（比较少用）：
animation-name：对象应用名称
animation-duration：持续时间
animation-timing-function：过渡类型
animation-delay：延迟
animation-iteration-count：执行次数，值可以是数字，也可以是infinite代表无限次
animation-direction：过渡方向，默认是正常方向normal；reverse代表反向执行；alternate代表先正常方向，再反向，并交替运行；alternate-reverse代表先反向运行，然后正常方向，并交替运行
animation-fill-mode：代表动画最后一帧，默认值是none；forwards代表最后画面；backwards代表初始画面

7、3D动画
相对于2D，多了一个Z轴的维度，必须显示的加一个属性transform-style，默认值是flat，表示平面的，可以不写这个属性，如果构建3D的，必须给出该属性preserve-3d的值;
相对于2D来说，平移、缩放、旋转，只是多了translateZ()、scaleZ()、rotateZ()、translate3d()、scale3d()、rotate3d();
另外在使用translateZ平移时，要设置父盒子的景深perspective的属性，一般设置900-1200px，不然感觉不出动态效果；
使用scaleZ缩放时，必须加景深，而且还要搭配其它轴的平移或者旋转，否则不生效

8、网格布局
在父盒子设置一个属性display:grid；这样就变成块级网格，如果设置成inline-grid，就变成行内块级网格，用的比较少；

然后设置网格行列个数grid-tempLate-rows、grid-tempLate-columns，这两个属性的值有4种方式，1、多个px值，2、多个百分比，3、repeat（num，百分比）4、repeat（auto-fill，百分比），这两个属性值尽量刚好占满父盒子的尺寸；另外多个值也可以用fr替代，代表剩下的空间平均分配，如4fr代表4份；还有一种属性值minmax（px1，px2）代表这一个网格能填充的范围；最后一种多个值可以用auto替代，代表自动填充剩下的空间；

网格的列间距grid-row-gap代表行间距，grid-column-gap代表列间距，grid-gap是复合写法

指定区域，代码格式如下：

<style>
	div{
		display:grid;
		grid-tempLate-rows:100px 100px 100px;
		grid-tempLate-colums:100px 100px 100px;
		grid-tempLate-areas:'a b c'
							'd e f'
							'h i j';
	}
</style>

先将每个网格定义名字，需要合并的话，将多个网格取相同的名字即可，然后在子盒子设置grid-area的值为网格名，代表该盒子占据此网格

排列方式grid-auto-flow，默认值是column横向排列，row纵向排列

项目对齐justify-content、align-content、place-content分别代表整个网格的水平对齐方式、垂直对齐方式、复合写法，值有start对齐容器的初始位置、end对齐容器的结束边框、center居中、stretch拉伸整个盒子、space-around在盒子均匀分布网格，网格与容器间隔大一倍、space-between均匀分布网格，和容器没有间隔、space-evenly均匀分布网格、和容器间隔相同

单元格内容对齐justify-items、align-items、place-items分别代表单元格内容的水平对齐方式、垂直对齐方式、复合写法，值一般是start、end、center、stretch

上面的属性都是写在容器上，这次是写在单元格项目上，grid-column-start、grid-column-end、grid-row-start、grid-row-end分别代表单元格横向、纵向占据的起止位置，或者可以这样写grid-column:2/4，grid-row也是这样的写法