详细的把css3看完还是将近一年前的事情，有时候用起来又记不清楚，用两天事件重新过了一遍，简单记一下，选择器还是很好用的，减少为了单纯加样式还上的id class钩。
CSS3给我们带来了什么好处呢？
简单的说，CSS3把很多以前需要使用图片和脚本来实现的效果、甚至动画效果，只需要短短几行代码就能搞定。比如圆角，图片边框，文字阴影和盒阴影，过渡、动画等。
加快页面载入速度
1、border-radius:1px 1px 1px 1px;(左上 右上 右下 左下)
2、 box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
注意：若没有阴影迷糊半径，只有边框效果，没有模糊的感觉。阴影扩展会加深阴影颜色，扩大阴影范围。
3、border-image:url(xx.png) 50 [repeat round stretch]
给边框应用图片
4、rgba 可制作透明背景
子元素不继承
5、渐变：background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet)
6、自动省略号：text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
7、嵌入字体：@font-face {
font-family : 字体名称;
src : 字体文件在服务器上的相对或绝对路径;
}
需要用时 p{
font-family:"my font";
}
8、text-shadow:x偏移 y偏移 模糊值 颜色
9、背景的起始位置：background-origin：border-box|padding-box|content-box
注意；背景必须是no-repeat
10、背景剪裁：backg-clip:border-box|padding-box|content-box|no-clip
11、多背景
12、选择器
1 、属性选择器：E[attr^="val"]匹配E元素且其属性以val开头的任何字符串
E[attr$="val"]匹配E元素且其属性以val结尾的任何字符串
E[attr*="val"] 字符串任意位置包含val
2 、 结构性伪类选择器
:root 选定html根元素
:not 排除特定 div:not([id=""]){}
:empty 选择空元素（空格都没有一个） div:empty{}
:target 目标选择器 #——>id
:first-child
:last-child
:nth-child(n) 2n+1
:nth-last-child(n) 倒着数
:first-of-type 选择器类似于“:first-child”选择器，不同之处就是指定了
元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素
div>p:first-of-type{}
:last-of-type
:nth-of-type(n)
:nth-last-of-type(n)
:only-child 匹配父元素只有一个子元素
:only-of-type 匹配父元素只有一个此类型的子元素
:enabled 匹配可编辑的输入框
:checked 匹配备选选框，可用于选框自定义样式
::selection(-moz-) 改变文本被选择时的背景色和前景色
:read-only(-moz-)
:read-write(-moz-)
13、变形
transform: scale() | skew() | translate() |matrix
transform-origin:top |top center |50% 0
14:动画
transition：property - duration - timing-function - delay
@keyframes name{0%；}
animation：name duration timing-function delay conut direction(normal|alternate)
控制播放：animation-play-state:paused|running
animation-fill-mode:none | forwards |backwards |both
若某个动画属性为1 延迟3s ，改变此属性的动画有三帧 2、3、4
则上面四个属性，动画播放顺序：1 2 3 4 ，1
1 2 3 4 ，4
2 3 4 ，1
2 3 4 ，4
15、多列布局
需要兼容各浏览器，加前缀。
columns：<column-width> <column-count>
column-gap：多列之间的距离。
column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color> 多列之间边框样式
column-span: 分列中的子元素横跨列数。
16、盒模型
border-box：padding border 算在盒子里面。
content-box：现代浏览器都这样算，不算padding border在其中。
17、伸缩布局
记得加各浏览器前缀
先设置布局方式：display:flex
布局中的排列方向:flex-direction：row |column ；
水平居中：align-items
justify-content
18、媒体查询
@media 媒体类型and （媒体特性）{你的样式}
例如：
@media screen and (max-width:480px){}
关键字：
@media not
@media only