1.background-clip:
padding-box --->边框以内有背景
content-box	只有内容行才有背景
border-box 边框一起都有背景
注意：需要配合 padding 的时候才有用

2.background-origin:
padding-box --->边框以内有背景
content-box	只有内容行才有背景
border-box 边框一起都有背景

主要是可以加一张背景图片，背景图片左上角显示（可以设置显示位置,前提是照片必须足够小）

3.background-image:url(""),url(""); 
background-repeat:repeat-x,no-repeat;
background-position:100%,100%,center; (可以设置图片的显示百分比位置)
主要用于显示两张背景图片，并且第一张要小于第二张，这样第一张图片在第二张的上面。（可多张叠加）

注意：建议图片为透明的，不的话会有分界

4.border-radius:10px 10px 10px 10px;(分别角为左 右 下右 下左)四个角
可以设置边框为圆角

5.-webkit-border-image:url("")10 10 10 10;
用于对图片进行拉伸，四个值依次意思为：左 上 右 下（正方形的四边来说）

1.transition:background 1s linear,width 1s linear,height 1s linear,transform 1s linear;
（可以对背景，其他任意元素进行设置，过度时间，linear 线性）
注意：还需要配上伪类进行一起实现渐变的效果
(属性那里可以用all, all指的是所有属性都赋予过渡效果)

也可以分开写：
transition-duration:1s;
transition-property:background,transform,width;
transition-timing-function:linear;

2.实现div颜色渐变的方法	
div{
animation:anima(这个是动画名) 5s infinite alternate; /*infinite alternate 可不断重复播放动画*/
-webkit-animation:anima 5s infinite alternate;
}
@-webkit-keyframes mycolor{
0%{
background-color:blue;
}
35%{
background-color:green;
}
60%{
background-color:orange;
}
80%{
background-color:yellow;
}
100%{
background-color:aqua;
}
}
#div1:hover{
-webkit-animation:mycolor 10s linear;
}

3.实现图片旋转起来的效果	
@-webkit-keyframes mycolor{
0%{
background-color:blue;
transform:rotate(0deg);
}
35%{
background-color:green;
transform:rotate(30deg);
}
60%{
background-color:orange;
transform:rotate(60deg);
}
80%{
background-color:yellow;
transform:rotate(30deg);
}
100%{
background-color:aqua;
transform:rotate(-30deg);
}
}
#div1:hover{
-webkit-animation:mycolor 5s ease;
}

注意：这几个是属性值 linear ease-in(慢快) ease-out（慢慢） ease(慢快) ease-in-out （慢快慢）

4.CSS3分列的效果(可以用来做图片的瀑布流)
-webkit-column-count:2; /*分两列*/
column-gap:50px;/* 间距 */
-webkit-column-gap:50px;/* 间距 */
column-rule:1px outset #ff0000;/* 间隔线设置 */
-webkit-column-rule:1px outset #ff0000;
column-width:250px;/* 设置列宽 */
-webkit-column-width:250px;

1.display  设置显示的背景长度
	inline 显示为一条线，也就是元素多大就显示多少
	inline-block和block一样 显示完这个div或span的长高	
	inline-table   只对table才有用，可以让table上下的语句一条线显示
	list-item 可以让div像列表那样显示
	
2.overflow
　　hidden 可以隐藏多余的
　　scroll 可以让多余的不超出然后滚动看
	
　　overflow-x:hidden/scroll  让水平的隐藏或是滚动查看

　　white-space:nowrap 水平显示内容

3.box-shadow:10px 10px 10px #ccc;(分别对应 阴影左右偏移 上下偏移 模糊度 阴影颜色)

4.box-sizing:content-box/border-box;
     一定要和padding 使用才会有变化  （content-box会让box变大，border-box不会让box变大）

1.text-shadow:5px 5px 5px red,
9px 13px 10px blue,
8px 12px 10px #ccc;
字体阴影面积显示（同box-shadow）

2.自己设置字体
@font-face{
/* 可以设置字体 */
font-family:WebFont;
/* ttf :0 otf:t */
src:url(‘ygyxsziti2.0.ttf‘)format("truetype");
}
div{
font-family:WebFont;
}

3.font-size-adjust:0.57; 设置同类字体显示大小一样

4.text-transform:
capitalize：
将每个单词的第一个字母转换成大写
uppercase：
将每个单词转换成大写
lowercase：
将每个单词转换成小写

5.white-space:
pre-wrap：
用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字碰到边界时发生换行。
pre-line：
保持文本的换行，不保留文字间的空白距离，当文字碰到边界时发生换行。

6.	writing-mode 书写格式

-webkit-writing-mode:vertical-rl;
writing-mode:tb-rl;

horizontal-tb：
水平方向自上而下的书写方式。即 left-right-top-bottom（类似IE私有值lr-tb）
vertical-rl：
垂直方向自右而左的书写方式。即 top-bottom-right-left（类似IE私有值tb-rl）
vertical-lr：
垂直方向自左而右的书写方式。即 top-bottom-left-right
lr-tb：
左-右，上-下。对象中的内容在水平方向上从左向右流入，后一行在前一行的下面。 所有的字形都是竖直向上的。这种布局是罗马语系使用的（IE）
tb-rl：
上-下，右-左。对象中的内容在垂直方向上从上向下流入，自右向左。后一竖行在前一竖行的左面。全角字符是竖直向上的，半角字符如拉丁字母或片假名顺时针旋转90度。这种布局是东亚语系通常使用的（IE）

7.文本溢出
text-overflow:
clip：
当内联内容溢出块容器时，将溢出部分裁切掉。
ellipsis：
当内联内容溢出块容器时，将溢出部分替换为（...）。

	1.通配选择器
	[id*=div]{ /*只要id有div的都可以被改变颜色*/
		color:yellow;
	}  
	[id^=div]{ /*只要id开头是div都被改变颜色*/
		color:green;
	}
	[id$=y]{ /*只要id开头是y都被改变颜色*/
		color:red;
	}

	2.	div ~ p{
		color:red;
		}
	同级div下面的p标签则被修改样式
例：
	<div id="div1">
			示例1
		
			<div id="div2">
				<h1>示例2</h1>
					<p>fas</p>
					<p>fas</p>
					<p>fas</p>
			</div>
					<p>fas</p>
					<p>fas</p>
					<p>fas</p>
		</div>

	3.	可以设置p标签前面的首字母为红字
		p:first-letter{
			color:red;
		}
		也可以让li前后部分内容添加进去
		li:before{ 
			content:"这个是首部";
			color:blue;
		}
		li:after{
			content:"这里是尾部了";
			color:green;
			font-size:13px;
		}

	4.	
	<!-- root根元素 -->
	:root{
			background:#ccc;
		}
	/* not 除了哪个标签没有这个样式*/
	div *:not(h1){
		color:red;
	}
	/* empty 空元素补充样式*/
	:empty{
		background-color:yellow;
	}
	a:visited{color:blue;}
	/* target 找到对象然后显示样式*/
		:target{
			background-color:orange;
		}


	5.		/* first-child*/
		li:first-child{
			background:yellow;
		}
		/* last-child*/
		li:last-child{
			background:red;
		}
		/* nth-child(position) 根据子元素位置来选*/
		li:nth-child(3){
			background:green;
		}
		li:nth-last-child(2){
			background:blue;
		}
		li:nth-last-child(odd){
			/*设置为奇数显示颜色*/
			background:orange;
		}  
		li:nth-last-child(even){
			/*设置为偶数显示颜色*/
			background:green;
		}
		li:nth-last-child(even):hover{  /*还可以加伪类*/
			/*设置为偶数显示颜色*/
			color:blue;
		}	

		注意：odd为奇数 even为偶数

	6.
	/* nth-of-type 只计算同类的第几个 */
		h2:nth-of-type(odd){
			background-color:yellow;
		}
		h2:nth-of-type(even){
			background-color:red;
		}
		p:nth-last-of-type(odd){
			background-color:orange;
		}

	7.让第几行有样式
	<!--
		nth-child(n)
		an+b
		意思是看你x列重复一次，则a为x
		b则以此从0到n
	 -->
	/*	li:nth-child(5n+1){
			background-color:aqua;
		}
		li:nth-child(5n+2){
			background:#ccc;
		}
		li:nth-child(5n+3){
			background:orange;
		}
		li:nth-child(5n+4){
			background:blue;
		}
		li:nth-child(5n){
			background:red;
		}*/
		/*  only-child */
		li:nth-child(1){
				background-color: blue;
		}
		li:only-child{  
			/* 只有当ul li中只有li一个时候才会显示背景颜色*/
			background-color: red;
		}

	8.		
		/* hover,foucs,active */
	input[type="text"]:hover{
		background:yellow;
	}
	input[type="text"]:focus{/*focus是焦点的意思*/
		background:red; /*点击会变色*/
	}
	input[type="text"]:active{
		background:blue;/*按住会变色*/
	}
	input[type="checkbox"]:checked{
		outline:2px solid blue; /*可以有外边框*/
	}
	/* enabled，disabled */
	input[type="text"]:enabled{
		background-color:gold;
	}
	input[type="text"]:disabled{
		/* 
			disabled 残废的，残疾的
			enabled 激活的
		*/
		background-color:#666;
	}

1.	
	/*旋转 缩放 移动 倾斜*/
		/*旋转
		transform:rotate(45deg);
		-webkit-transform:rotate(45deg);
		*/
		/* 缩放
			transform:scale(1,5);
			-webkit-transform:scale(1,5);
		*/
		/*倾斜
			transform:skew(30deg,30deg);
			-webkit-transform:skew(30deg,30deg);
		*/
		/*移动*/
			transform:translate(0px,250px);
			-webkit-transform:translate(0px,250px);
   示例:
    -webkit-transform:translateX(-100%);
    transform:translateX(-100%);

	2.图形变换基准点
		transform-origin:right bottom;
	
	3.图形变形处理可以合在一起写
		transform:rotate(200deg) scale(2.5) skew(210deg,100deg);

1.类型聚焦
		E:focus { sRules }
		input:focus{
		background: #f6f6f6;
		color: #f60;
		border: 1px solid #f60;
		outline: none;
		}

	2.除了这个没有 其他都有这个样式
		E:not(s) { sRules }
		p:not(.abc) {
		color: #f00;
		}

	3.根属性
		E:root { sRules }
		html:root .test {
		color: purple\0;
		}

1.颜色渐变
	background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);

示例:		
	background-image:-webkit-linear-gradient(
			rgba(41,41,41,0.75) 0%,
			rgba(54,54,54,0.72) 50%,
			rgba(24,23,23,0.94) 51%);

	2.颜色渐变属性:
	background:-webkit-gradient(
		linear,left top,right bottom,from(#6cc3fe),to(#21A1D0));


小知识点:
		1.当需要对一些属性进行隐藏的时候可以用:overflow:hidden; 然后再对这个框用hover伪类进行设置left:0(隐藏前需要用到postion:absolute;left-width(对应的宽);)。然后就可以用hover进行显示内容框了。

		2.也可以用display:none;(一开始让它显示的时候什么属性都没有);
		  然后当鼠标放上去的时候把它变成块 display:block;(然后就可以通过伪类加一个 height:0(没有高度就消失)等效果了。)


		3.关于用label标签，可以用for="相对应id" 控制某个元素,拥有同样的css
		  而 ~ 可控制关联div 拥有同样的css样式

		4.制作180度图片旋转换文字特效技巧：
			<div id="all">
				<div class="rotate"> 
					<img src="">
				<div class="wz">
					文字内容
				</div>
				</div>
			</div>

当要旋转的时候:
	文字需要旋转180度，
		rotate部分需要旋转180，(需要过度效果还要用到transition)
			 样式这样写: .con:hover .rotate{}