CSS3的内容

CSS3的内容：

边框圆角：

这个边框圆角可以单独设置也可以一块设置（取值可以用百分比和像素点），如下：
border-top-left-radius：15px;	//单独设置
border-top-right-radius：15px;
border-bottom-left-radius：15px;
border-bottom-right-radius：15px;
border-radius：15px;			//全部设置
border-radius：5px(左上角)  6px(右上角)  7px(右下角)  8px(左下角);	 

盒子阴影：

盒子阴影有：内阴影、外阴影（默认值）、偏移量、模糊范围、扩展范围、颜色值等
box-shadow：insert(设置内阴影) 1px(横向偏移量) 1px(纵向偏移量) 1px(模糊范围) 1px(扩展范围) red(颜色值);	
	//像素值可正可负也可以设置多个，用逗号分开
box-shadow：1px 1px 1px 1px blue, insert(设置内阴影) 1px 1px 1px 1px red; 

文本：

text-shadow(文本阴影)：横向偏移量 纵向偏移量 模糊范围(选用) 颜色值;
	例:text-shadow：1px 1px 1px red;
 text-overflow(文本省略)：
	有两个值 -clip(默认值)=表示文本截断、  
	 -ellipsis=显示省略号来代表被截断的文本
	例:text-overflow:clip;  |  text-overflow:ellipsis;
 word-break：单词换行
 word-wrap：单词换行

颜色：

 原有颜色---------->关键字颜色、十六进制颜色、RGB颜色、
 新增颜色---------->RGBa颜色、HSL颜色、HSLa颜色
 	RGBa颜色：RGBa比RGB多了一个a，代表透明度
 		例：background-color：rgba(0,0,0,0.35);
 	HSL颜色：
 		H（Hue）：表示色相=====取值（0-360）
 		S（Saturation）：表示饱和度=====取值（0%-100%）
 		L（Lightness）：控制色彩的明爱暗化=====取值（0%-100%）
 		例：background-color：hsl(30,100%,50%);
 	HSLa颜色：HSLa比HSL多了一个a，代表透明度
 	例：background-color：hsl(30,100%,50%,0.35);### 

不透明：

 opacity：设置元素的不透明度，属性值为百分比例：opacity:45%;  

渐变：

 颜色渐变的两种方式：线性渐变、径向渐变
 线性渐变：linear-gradient(方向或角度,颜色1,颜色2...);
 	关键字表示方向：left、right、top、bottom、left top、right top、left bottom、right 	bottom
 	数字表示方向：取值范围（0--360）单位是deg（degree的缩写）
 径向渐变：radial-gradient(形状 大小 at 位置,颜色1,颜色2...)
 	渐变开始的位置：center、left、right、top、bottom、left top、right top、left bottom、	right bottom

盒子尺寸：

 box-sizing：
 	有两个值=content-box、border-box
 	content-box：宽度和高度只包含内容区域
 	border-box：宽度和高度包含内容区域、padding和border

背景：

 多背景：用逗号分开背景图片的属性值
 	例：background-image：url(bg1.png),url(bg2.png);
 背景尺寸：background-size：长度、百分比、cover（保持图像的长宽比例，并将图片缩放成刚	好覆盖在所在区域的最大大小）、contain（保持图像的长宽比例，并将图片缩放成	刚好显示在所在区域的最大大小）
 背景定位：background-origin：border-box、padding-box（默认值）、content-box
 背景裁剪：background-clip：border-box（默认值）、padding-box、content-box
 2D转换：转换就是用transform属性将HTML元素移动translate、旋转rotate、缩放scale、倾斜skew
 translate属性：将元素在x和y轴上进行移动		
 	例：transform：translate(20px,30px);
 	也可以使用translateX、translateY分别设置
 rotate属性：根据指定的角度旋转元素 	
 	例：transform：rotate(20pdeg);
 scale属性：将元素放大或者缩小 	
 	例：transform：scale(1.2);
 	沿X,Y缩放：transform：scale(x,y);
 	沿X,Y分别缩放：transform：scaleX(1.2);	transform：scaleY(1.2);
 skew属性：将元素倾斜显示
 	沿X,Y倾斜：transform：skew(45deg,45deg);
 	沿X,Y分别倾斜：transform：skewX(45deg);	transform：skewY(45deg);
 	transform-origin：x,y,z;
 		x可选值：left、center、right、长度、百分比
 		y可选值：top、center、bottom、长度、百分比
 		z可选值：长度   

过渡：

 一个元素在不同的状态之间进行平滑的转换-transition属性
 transition：过渡属性 执行时间 时间函数 延迟时间;
 过渡属性：指定一个过渡属性
 时间函数：可选值：cubic-bezier()、ease、linear、ease-in、ease-out、ease-in-outsteps()、step-start、step-end
 	例：img:hover{
 		transform:rotate(180deg);
 		background:green;
 	    }
 	    img{
 	    	transition:transform 2s ease-in 3s;
 	    }

动画：

@keyframes 规则
animation 属性
webkit内核的浏览器需要加-webkit-前缀（Safari、Chrome）
@-webkit-keyframes 规则
-webkit-animation 
属性定义关键帧：
	div{
		width:100px;
		height:100px;
	}
	@-webkit-keyframes 名字{
		from {width:50px;}
		to {width:200px;}
	}
	div:hover{
		-webkit-animation-name:名字;
		-webkit-animation-duration:2s;
	}
	时间函数：animation-timing-function	===	-webkit-animation-timing-function
	延迟时间：animation-delay	===	-webkit-animation-delay
	动画执行的次数：animation-iteration-count：正整数 | infinite(循环播放);
	动画播放的方向：animation-direction：normal | reverse (反向播放)| alternate(1正2反) | alternate -reverse(1反2正);
	动画播放的前后状态：animation-fill-mode：none (默认值)| backwards(和第一帧相同) | forwards (和最后一帧相同)|both(前两个结合);
	控制动画运行或暂停：animation-play-atate：running (运行，默认值)| paused(暂停);