css3

 -  background-size: length|percentage|cover|contain; 
length 设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。
如果只给出一个值，第二个是设置为 auto(自动) percentage    将计算相对于背景定位区域的百分比。
第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)" cover    
此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
 contain  此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

-------------------------------------------------
 -box-sizing:content-box | border-box; 
默认值：content-box 适用于：所有接受width和height的元素 	content-box:    padding和
border不被包含在定义的width和height之内。
对象的实际宽度等于设置的width值和border、padding之和，即( Element width = width + 
border + padding )此属性表现为标准模式下的盒模型。	
border-box:    padding和border被包含在定义的width和height之内对象的实际宽度就等于设置的width值
即使定义有border和padding也不会改变对象的实际宽度通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
即 ( Element width =    width-border-padding)。此属性表现为怪异模式下的盒模型。 假如需要并排放置两个带边框的框，可通过将    box-sizing 设置为 "border-box"

-------------------------------------------------

 - 设置圆角方式： 	/*设置圆角20px，可以是像素或者百分比*/ 	
 border-radius: 20px; 	/*使用 / 来表示，左边的值表示水平轴的值，右边表示垂直轴的值*/ 
 border-radius:150px / 30px;

------------------------------------------------- 

 - 设置阴影的方式：  	
 /*偏移值为负数时表示阴影向相反方向偏移  ，inset为内阴影  */   
   	/* 水平偏移 垂直偏移 羽化大小 扩展大小 颜色*/       
   	 	box-shadow: 5px 5px 15px 1px #636C72;   
   	 	 /*    文字阴影效果 */ 	
   	 	 text-shadow:  5px -5px 5px #000011; 
 -  背景透明度
     /*0.4为透明度*/   background: rgba(0, 0, 0, 0.4); 
     
--- ----------------------------------------------
     
 -  calc()函数用于动态计算长度值。
    ●需要注意的是，运算符前后都需要保留一个空  格，例如：	
    with: calc(50% - 50px);	     	   
    ●任何长度值都可以使用calc（）函数进行计算;
    ●calc()函数支持“+”，“ - ”，“*”，“/”运算;
    ●calc()函数使用标准的数学运算优先级规则


------------------------------------------------ 
 - 线性渐变    /* 使用之前得设置宽高，-webkit-linear-gradient(参数1, 参数2, 参数3);*/
    /*参数1表示渐变开始方向：可以写上下左右和角度（left | top | right|bottom|50deg|-50deg）等  */    /*    参数2可以设置两个值，一个代表渐变的起始颜色；一个为渐变的起始位置，可以填 像素或者百分比（正负数都可以） 代表从此位置开始渐变 */      /* 参数3可以设置两个值，一个代表渐的终止颜色；一个为渐变的结束位置，可以填 像素或者百分比（正负数都可以） 代表从此位置结束渐变 */    （1）background: -webkit-linear-gradient(left, blue, red );
       （2）/* 现代浏览器通用 background: linear-gradient(to left,pink, purple);  to    left 渐变方向从purple渐变到pink ，也可以写角度deg：0deg代表从下到上 90deg代表从左到右*/
   	（3）背景图片渐变： 	background: -webkit-linear-gradient(left,    rgba(2,150,100,0.3), rgba(160,32,240,0.8)),url(../img/me12.gif);
   	
 - 放射渐变
      /* 放射渐变background:radial-gradient  (参数1,参数2)*/ /*    参数1为center|ellipse 表示从中心开始 ellipse 的中心主颜色圈更大些*/ background:    -webkit-radial-gradient(center,red,yellow,blue,white);  背景图片放射渐变：  background:    -webkit-radial-gradient(ellipse,rgba(255,0,0,0.9),rgba(255,255,255,0.4)),url(../img/me12.gif);

-----------------------------------------------
 - 自定义字体
    /* 自定义字体必须要有的属性：
   		1.font-family自定义字体名称
   		2.src指字体来源url表示路径 		使用的时候，就和平时使用字体一样    */  @font-face{ 	/* 自定义字体  名称 */ 	font-family: "selffont"; 	/* 自定义字体  字体文件所在路径 */ 	src:url("China.ttf"); } .self2{ 	/* 使用自定义字体 */
   	font-family: "selffont"; }
  --------------------------------------------- 
 -  transform属性  向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜 	
 	 	 transform: translate(-50%,-50%);/*x,y轴位移 */  
		1、translate（x，y）设置盒子位移 
		2，scale（x，y）设置盒子缩放
		3，rotate（deg）设置盒子旋转
		4，skew（x-angle，y-angle）设置盒子斜切
		5，perspective(800px)透视设置透视距离
		6，transform-style flat | preserve-3d设置盒子是否按3d空间显示
		7，translateX，translateY，translateZ设置三维移动
		8，rotateX，rotateY，rotateZ设置三维旋转
		9，scaleX，scaleY，scaleZ设置三维缩放
		10，tranform-origin设置变形的中心点
		11，backface-visibility设置盒子背面是否可见
	
 - transition属性 需要手动触发（hover）的动画属性，与transform连用
 /* transition:过渡效果属性名 完成过渡需要的时间 速度线  效果开始时间 */
 		transition: all 200ms ease 1s;
 - 动画过渡合写方法：
.fish{
	transition:transform 5s ease 1s;	
}
.fish:hover{
	/* 边移动边缩小 */
	transform:translate(500px) scale(0.2);
}
 - animation自动运行动画
 	animation可以结合transform效果使用
 /* animation:keyframe名称 完成时间 运动效果 延时时间 播放次数 轮流反向播放  */
	/*infinite无限次  "alternate"，则动画会在奇数次数正常播放，而在偶数次数向后播放。 */
	/* forwards动画定格在最后的位置 backward动画定格在开始位置 */
	animation: myfish1 10s ease 1s infinite alternate;
@-webkit-keyframes myfish1{
	/* 写法一 用from {} to{} */
	/* from{margin-top: 0;}
	to{margin-top: 200px;} */
	/* 写法二  用百分比*/
	0%{margin-left: 0;}
	25%{margin-top: 100px;transform: rotate(20deg) scale(0.4);}
	50%{margin-left: 200px;margin-top: 0px;transform: rotate(20deg);}
	75%{margin-left: 300px;margin-top: 200px;transform: rotate(20deg) scale(0.4);}
	100%{margin-left: 400px;margin-top: 0;}
}
@keyframes myx{
/* scaleX(-1)图片翻转*/
	0%{ transform:scaleX(-1) ;}
	50%{transform: scaleX(-1) translateX(-600px);}
	/* @keyframes关键帧 可以用小数表示 */
	50.1%{transform: scaleX(1)  translateX(600px);}
	100% { transform: scaleX(1);}
}