通俗易懂之CSS3新特性整理

边框

CSS3可以使用样式创建圆角边框，添加阴影框。
属性：

border-radius

div{
border:1px solid black;
border-radius:25px;
border-radius:50%; //可以使用百分比或者px来调整圆角。
}

盒阴影

box-shadow

div{
border:1px solid black;
box-shadow:10px 10px 5px #888888;
//box-shadow:水平位置(允许负值) 垂直位置(允许负值) 模糊距离 阴影大小 颜色 外侧阴影边内侧阴影 ;
}

边界图片

css3允许使用图片替换边框

border-image

div{
border-image:url(border.png) 30 30 round;
//border-image:图片 向内偏移 边界宽度 是否重复（repeat）、拉伸（stretch）或铺满（round）;
}

过渡

让元素的样式逐渐变成另一种样式

transition

transition是集合属性:

div{
width:100px;
transition:width 2s;  //属性和时间必填
//transition:要改变的属性(all是全部属性都改变) 改变需要的时间 过渡的时间曲线(快慢) 过渡开始时间(延时)；
//transition 触发方式 可以选择伪元素触发(:hover :focus)，也可以通过Js添加特定class触发，只要要改变的属性 出现了变化即可。
}
div:hover{
width:300px;    //当鼠标放上DIV的时候开始过渡，width从100px逐渐变成300px
}

转换

transform

转换分2D和3D转换

transform有四个属性：   //transform是2D转换
	translate(x,y)   //相对自身位置偏移
	//关于translate 使用时建议使用translate3D(0,0,0) 可以出发GPU硬件加速，使动画更流畅，帧数更高。
	rotate(30deg)    //旋转一定角度，正值顺时针,负值逆时针
	scale(1,2)       //元素放大或减小，宽度为原来的1倍，高度为原来的3倍
	skew(30deg,20deg)//在X轴倾斜30deg，Y轴倾斜20deg

	matrix(旋转，缩放，移动，倾斜)	//将转换属性合并到一起
	transfrom-origin:;    //调整基点的位置 可以写px % top left center botom left right

动画

在CSS中写动画：	
		@keyframes	myanimation{   //@keyframes指定一个css样式和动画逐步变为新的样式
			0%{}       // 可忽略 也可以多添加几个阶段 开始也可以写成from
			100%{           //结束可以写成to 结束时会变回初始样式
				width:300px;
			}
		}
创建完成后将动画绑定到DOM元素,动画不需要触发,自己就可以直接执行：
	div{
	animation:myanimation 5s;
	}
		
使用动画的属性 animation
		animation的八个属性
			animation-name:动画名；
				要使用的动画名字;
			animation-duration:2s;
				动画执行的时间
			animation-timing-function:ease;	
									  steps(3，end) //steps函数是控制帧数,即动画分几帧进行，第一个参数					  		  是帧数,第二个参数是start/end，控制动画结束时样式是开始时的样式还是结束时的样式。
				动画的速度曲线
					常见的速度曲线   ease
				 					ease-in 
									ease-out
									ease-in-out
				 					linear
			animation-delay:0s;
				动画的延迟时间，可以为负

			animation-iteration-count:1;
				动画的执行次数
				如果想一直执行，可以使用infinite;
			animation-direction:normal;
				执行方向
				alternate 0-100%-0-100 循环
				reverse   100-0 100-0 100-0
				alternate-reverse 100-0-100-0 循环
			animation-play-state:running
				播放状态 一般配合js使用
				running 播放 
				paused	暂停
			animation-fill-mode:none;
				填充模式
				forwards 停止在动画结束的位置 执行动画100%的样式
				如果有延迟时间的话
					使用backwards 等候时候的样式会使用0%时候的样式 等候指的是使用动画延迟时
				both：forwards和backwards同时存在
				none： 默认

弹性盒子

flex

弹性盒子一般用来布局，尽量减少使用浮动。
div{
display:flex;   //如果不考虑IE浏览器兼容问题的话可以放心用，ie不兼容11以下的版本
				//移动端可以放心用。
}
flex使用方法：
首先在父元素上使用display:flex;
然后设置父元素属性:
flex-direction 调整主轴
	row 横向向右排列(默认)
	row-reverse 横向从右向左排列
	column	调整为纵轴为主轴 从上往下排列
	column-reverse  调整为纵轴为主轴 从下往上




flex-wrap  控制换行
	nowrap  默认不换行 多的会在一行挤压
	wrap   换行	会把副轴的空间等分
	wrap-reverse	换行 反向
flex-flow
	复合属性
	flex-flow:direction wrap  //直接设置横向排列和是否换行

justify-content
	!主轴!的排列顺序
	flex-start 贴着左边开始
	flex-end   贴着右边

	center	项目居中
	space-around 将剩余空间等分 分别分给每一个项目左右两边
	space-between	将剩余的空间等分 第一个项目和最后一个项目是紧挨着左右两边的
	space-evenly	将剩余的空间等分 所有项目间距相同

align-items	在副轴的排列顺序
	flex-start	项目在副轴的flex-start的位置
	flex-end	项目在副轴的flex-end的位置
	center		项目在副轴的中间
	stretch		如果项目在副轴上没有宽/高，那么宽/高会变成100%

align-content	换行项目的时候生效
	flex-start	换行的项目紧挨着上面的元素，并且在副轴的flex-start的位置
	flex-end	换行的项目紧挨着上面的元素，在副轴的flex-end的位置
	center		换行的项目紧挨着上面的元素，在副轴的中间位置
	space-around	将副轴的剩余空间等分，添加到项目行的上下两边
	space-between	将副轴的剩余空间等分，第一行和最后一行紧挨着容器的副轴两边



	项目(子元素)属性
		flex-grow	放大

			放大后的宽度：本身宽度+剩余宽度/设置的grow的和*本身设置的grow值
			如果没有剩余宽度 设置这个 	没效果
			默认值 0
	
		flex-shrink	压缩
			默认值 1
			项目的宽度=本身宽度-超出宽度/shrink的总值*本身设置的shrink值
			如果一行呃项目没有超出，设置这个没效果

		flex-basis	重置项目大小
			flex-basis:305px;
			将会替换掉项目本身设置的长度

		flex		复合属性
			flex:grow shirnk basis
			默认值 flex:0 1 auto;
			flex:1;
				如果直接这样写,相当于设置的是flex-grow
		
		align-self	项目本身在副轴的位置

			flex-start	在副轴的flex-start
			flex-end	在副轴的end
			center		在副轴的中间

		order		排序
			默认是1
			值越大位置越往后

多媒体查询

@media

可以针对不同的媒体和设备使用不同的样式文件
媒体类型  		all   全部
				print	打印机
				screen	用于电脑屏幕、平板、手机
				speech	用于屏幕阅读器
媒体查询可以查询  vIewport宽高、设备宽高、设备朝向(横竖屏)、分辨率
	例：
		@media screen and (min-width:480px){
		//在屏幕可视窗口尺寸大于 480 像素的设备上修改字体大小
				body{
					font-size:16px;
				}
		}