css3学习笔记
1）属性选择器 ：
div[id="adang"]{}
div[id^="adang"]{}
div[id$="adang"]{}
div[id*="adang"]{}
2）伪类：
:first-line :first-letter
:before :after
body *:not(h1){}
:empty
:noly-child
:target
:first-child :last-child
:nth-child(3) :nth-last-child(3) :nth-child(even) :nth-child(odd) :nth-child(3n) :nth-last-child(3n+1)
:nth-of-type(3) :nth-last-of-type(3)
:hover :active :focus :enabled :disabled :read-only :read-write :checked :default :indeterminate
input:required input:focus:invalid input:focus:valid
::selection
3) css为某些满足条件的选择器集体添加内容：
li:before{
content : "hot";
color: red,
font-size : 20px,
margin - right : 5px
}
p:after{
content :url(abc.png)
}
div:after{
content : none
}
4）文字阴影：
div{ text-shadow : 5px 5px 5px gray;}
p{text-shadow : 10px 10px 10px red, 5px 5px 5px blue, 3px 3px 3px green;} // 多重阴影
5）文本换行：
word-break: keep-all | break-all | normal
word-wrap: break-word;
white-space: nowrap;
text-overflow:ellipsis;
6）网络字体：
@font-face{
font-family : abc;
src: rul('font/xxx.otf' format("opentype"))
font-weight: normal;
}
h1{
font-family : abc;
}
7）盒阴影：
box-shadow: 10px 10px 10px #000;
box-shadow: inset 10px 10px 10px #000; //内阴影
box-shadow: 10px 10px 10px #000, -10px -10px 10px #000 //多重阴影
8）背景：
css3可以让背景从border处开始，或者从padding处开始，又或者从内容处开始，不像css2只能从padding处开始。
background-clip : border | padding
background-origin: border | padding | content
css3还可以设置背景的缩放，这是css2无法做到的。可以直接设置长宽，也可以只设置一个，另一个设为auto以保持长宽比不变。
background-size: 40px 20px;
background-size: auto 20px;
css3还可以对同一个元素设置多个背景，用逗号间隔。
background-image : url(a.png), url(b.png), url(c.png)
background-repeat : no-repeat, repeat-x, no-repeat
9）图像边框：
css3支持图像边框，并非只是简单地给边框设置背景那边简单，而是直接帮我们完成了九宫格！
border-image: url(a.png) 20 30 10 20 / 20px 10px 20px 15px
10）变形功能：
transform : translate(150px,200px) rotate(45deg) scale(1.5,2) skew(30deg,20deg)
transform-origin : left bottom
11) 补间动画：
transition : background-color 1s linear // linear | ease-in ease-out ease ease-in-out
transition ： color 1s linear, width 2s linear, transform 3s linear // 同时多个动画
12）关键帧动画：
@keyframes myAni{ // @-webkit-keyframes myAni
0 % {
background-color : red;
}
40 % {
background-color : darkblue;
}
70 % {
background-color : yellow;
}
100 % {
background-color : red;
}
}
div:hover{
animation-name : myAni;
animation-duration : 5s;
animation-timing-function : linear; // ease | ease-in | ease-out | ease-in-out | step-start（逐帧播放）| cubic-bezier（x1,y1,x2,y2）
animation-iteration-count : infinite; // 重播次数 infinite是无限次
animation-direction : alternate; // 动画播放的方向，两个值，默认为normal，这个时候动画的每次循环都向前播放。另一个值是alternate，则第偶数次向前播放，第奇数次向反方向播放。
}
13）多栏：
多栏用于将一段文字的内容按多栏来显示，缺点是只能对同一段文字来设置多栏，每一栏的内容是自动往后推的，并不能指定每一栏显示什么内容，所以只适合用来做段落的排版，不适合做页面布局。另外，多栏只能设置每一栏的宽度相等，不能单独定置某栏的宽度。如果想要实现弹性的布局，可以使用盒布局。
colum-count : 3; // 栏数
colum-width : 100px; // 可以不设置，不设置的话自动将父容器的宽度按栏数均分
colum-gap : 10px; // 栏与栏之间的间隔距离
colum-rule : 1px solid red; // 将栏与栏之间设置间隔线
14）盒布局：
.wrapper{
width : 500px;
height : 300px;
display:box; // -webkit-box
box-orient : vertical | horizontal // 盒子横竖排
box-pack : start | center | end // 盒子居左(上)、居中、居右（下）
box-align : start | center | end
}
.left{
width : 300px;
box-ordinal-group : 3; // 排第三个
}
.center{
box-flex : 2; // 宽度自适应，占比 2 / (2+1)
box-ordinal-group : 1; // 排第1个
}
.right{
box-flex : 1; // 宽度自适应，占比 1 / (2+1)
box-ordinal-group : 2; // 排第2个
}
15）outline：
outline和border很像，但outline不会占文档流中的位置，而且outline可以设置line-offset为负值，从而让边框线在容器内部显示。最后一个差别是，outline不能像border那样只设置某个方向，比如border-right, outline只能四个方向一起设置。
outline : 2px solid #000;
outline-offset : 5px; // 可为负值
16）resize：
resize只能为设置了overflow的元素生效，所以都会需要和overflow配合使用。
div{
overflow : auto;
resize : none | both | horizontal | vertical
17）box-sizing
box-sizing 其实很简单，css2时代，怪异模式下，一个盒子的宽度是包容padding和border的，而非怪异模式下是不包括的。到了css3，可以显式地设置某个元素是否按怪异模式的计算方式来计算宽度。
box-sizing : content-box | border-box
