css3.txt

		
		css3

		
	一、	css3边框
		IE9+支持border-radius和border-shadow
		Firefox、chrome、Safari支持所有新的边框属性
		Opera 支持 border-radius 和 box-shadow 属性，但是对于 border-image 需要前缀 -o-。
	
	1》．border-radius：
		border-radius：25px；
		-moz-border-radius：25px；/*老版本的火狐*/
	
	2》．border-shadow
		border-shadow： px px px #颜色值

	3》．border-image
		标签{
			border:10px solid transparent;
			border-image：url（images/xxx.jpg） 20 30 round/ stretch
			-moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox */
			moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox *- / 
			-webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */
			-o-border-image:url(border.png) 30 30 round; /* Opera */
		}
		20表示边框上下的高度大小
		30表示边框左右两边显示的图片的宽度大小
		
		
	二、	
		1》.背景 backfround:url(images/图片格式)
			background-size 背景图片的尺寸
							以像素或者百分比规定尺寸
			
			background-origin 规定背景图片的定位区域，起始点绘制位置（比如一个div中定位）
				 属性值有border-box 从边框外边缘开始绘制
			
			padding-box、 内边距的外边框开始绘制
			
			conten-box 在内容区绘制
				想要实现定位在三种位置，必须设置border、padding才可以看到
			
			background-clip：背景覆盖范围
				border-box边框以内、padding-box内边距以内、conten-box内容区
	
		2》.双重背景：background-image：url（images/xx.png），（images/xx.png）；
	
	三、文本效果
		IE 10、Firefox、chrome、Safari、Opera都支持text-shadow，word-wrap

		text-shadow 文字阴影
		  text-shadow：5px 5px 5px #颜色值
					分别设置水平阴影、垂直阴影、模糊距离、以及阴影的颜色
		
		word-wrap 自动换行
			允许文本强制文本进行换行，所以也会对单词进行拆分
			
	四、字体
		先定义字体名称（如myfirstfont），然后指向该字体文件：
				<style>
					@font-face{
						font-family：myfirstfont；
						src：url（）
								url（）;
		}
		div
		{font-family:mafirstfont}
		</style>
		
		
	五、2D转换
		transform：
		
		translate(50px，100px) 元素从左侧移动50像素，从顶端移动100像素
		
		rotate(30deg)顺时针旋转30度允许负值
		
		scale(2,4)元素的尺寸增加或者减少，宽度为原尺寸的2倍，高度为原始高度的4倍
		
		skew（30deg，20deg）围绕x轴旋转30度，围绕y轴旋转20度
		
		matrix（）把转换组合方法组合一起，需要6个参数，允许旋转 缩放，移动以及倾斜
	
	六、	3D转换
		transform：
				rotateX（120deg）元素围绕其 X 轴以给定的度数进行旋转。
	
		rotateY（120deg）元素围绕其 Y 轴以给定的度数进行旋转。
				
	七、过渡
		transition
		规定您希望把效果添加到哪个 CSS 属性上
		规定效果的时长
		如果时长未规定，则不会有过渡效果，因为默认值是 0。
		如需向多个样式添加过渡效果，请添加多个属性，由逗号隔开：
			div
		{
		transition: width 2s, height 2s, transform 2s;
		-moz-transition: width 2s, height 2s, -moz-transform 2s;
		-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
		-o-transition: width 2s, height 2s,-o-transform 2s;
		}


	八、动画
		@keyframes规则用于创建动画，在@keyframes中规定某项css样式，就可以创建由当前样式逐渐改为新样式的动画效果
		animation：  
		@keyframe-name duration timing-function delay  iteration-count direction play-state
		@keyframe-name规定动画
		duration完成一周期的时间默认0
		timing-function  速度曲线 默认ease
		delay何时开始 默认.0
		iteration-count播放次数 默认1
		direction是否在下周期逆向地播放
		play-state是否正在运行或者暂停默认running
		实例：
		@keyframes myfirst
		{
		from {background: red;}
		to {background: yellow;}
		}

		@-moz-keyframes myfirst /* Firefox */
		{
		from {background: red;}
		to {background: yellow;}
		}

		@-webkit-keyframes myfirst /* Safari 和 Chrome */
		{
		from {background: red;}
		to {background: yellow;}
		}

		@-o-keyframes myfirst /* Opera */
		{
		from {background: red;}
		to {background: yellow;}
		}

		当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。
		通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：
		规定动画的名称
		规定动画的时长
		实例
		把 "myfirst" （@keyframes定义的名称）动画捆绑到 div 元素，时长：5 秒：
		div
		{
		animation: myfirst 5s;
		-moz-animation: myfirst 5s;	/* Firefox */
		-webkit-animation: myfirst 5s;	/* Safari 和 Chrome */
		-o-animation: myfirst 5s;	/* Opera */
		}


	九、多列
		将文本分为多列显示等
		column-count 属性规定元素应该被分隔的列数：
		column-gap 属性规定列之间的间隔：
		column-rule 属性设置列之间的宽度、样式和颜色规则。
		10、	用户界面
		resize规定是否可由用户调整元素尺寸。
		box-sizing属性允许以确切的方式定义适应某个区域的具体内容
		outline-offset属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。