CSS是一个孰能生巧的东西，就是要天天用天天写，很多属性如果能用CSS写出来的话，JS会好些很多。
so有一些新的或是记不住的属性我觉得比较重要，怕自己会忘记所有特别开一个小博客来记录一下。
关于兼容性：因为css3的一些属性在部分浏览器可能不被识别所以要在属性前面加浏览器厂商的标识符
火狐： -moz- (-moz-linear-gradient(top,#fff,#fff111))
google : -webkit-
欧朋：-o- （这个我喜欢）
1.首先是CSS3里的一些属性：
(1)text-shadow（文本阴影）和box-shadow（盒子阴影）
//第一个值是：水平阴影的位置。允许负值，第二个:垂直阴影的位置。允许负值。第三个：模糊的距离。第四个：阴影的颜色
//box-shadow也是一样
text-shadow：5px 5px 5px #fff
(2)box-sizing
在CSS中有两种盒子模型一种就是W3C的还有一种就是IE的，他们不同之处在于W3C是算元素框内容的尺寸，而IE则是算整个元素框包括了宽高，边框等。现在大部分的浏览器都是以W3C的标准来的，我个人比较喜欢IE的盒子模型（就这一个D:）;
box-sizing有两个属性
1. content-box:仅包括content.即设置的width属性值仅为content的值。（box-sizing的默认值）
2. border-box:包括content+padding+border.设置的width的值是content+padding+border的值.
(3)Rgba
Raba和opacity都是制作透明背景，不同之处在于Rgba更好控制，并且他不会使得文字也变透明下面这篇博客他非常详细的讲解了Rgba的用法对比了和opacity的优缺点，还有关于兼容性的问题.
基本语法:
R：红色值。正整数 （0~255）
G：绿色值。正整数 （0~255）
B：蓝色值。正整数（0~255）
A：透明度。取值0~1之间
rgba(20,20,20,0.4)
参考地址：https://www.cnblogs.com/xiao-pang/p/5517222.html
(4)outline
使你的边框不在干扰你的兄弟元素。
如果你给你的标签添加了鼠标事件，或者hover加个边框。那么你会发现因为box-sizing（参考第二条）的原因，你的边框会挤压你的兄弟元素造成变形。
解决这个问题有两个办法
第一种用outline替代border。
语法：outline：1px solid #fff;
第二种是我在之前不知道这个元素的时候用的一个办法，那就是在给元素添加事件增加边框之前，就添加一个和元素背景颜色一样的边框，大小也要一样，然后你在用鼠标事件的时候就不会挤压兄弟元素了。
#box{
width：100px；
height：100px；
background：#0D86FF；
border：1px solid #0D86FF；
}
#box:hover{
border:1px solid #68696E;
}
(5)background:linear-gradient(top right,green,red,blue);
背景颜色渐变，上面是语法。
第一个属性的是指定从哪里开始，然后如果你想从一个角落开始那么在两个方向之间加一个空格就行了。top right，不然就只需要一个属性即可。
第二个属性就是颜色了，制定从什么颜色开始渐变。
第三个属性也是颜色，制定渐变后的颜色，还可以多次添加颜色。
从黄色渐变到绿色在渐变到灰色，只要 color，color，color就ok了
(6) transition
这是css3的运动属性，需要配合 元素:hover使用。
语法：
分开写法：
transition-property：width //指定监控的属性
transition-duration：2s //指定运动时间
transition-delay：0.5s //指定延迟时间
transition-timing-function：ease-in //运动曲线
简写 ：transition: width 3s 0.2s ease-in；
#hd:hover{
width:300px
}
上面这个code会让，ID为hd的标签在鼠标放上去之后经过0.2s的延迟之后宽度变为300px，并且运动轨迹是由慢到快。
第一个属性是可以指定方向，比如宽高，left，right等属性，或者可以用all 所有的方向都指定。
第二个属性是指定运动的时间
第三个属性是延迟，鼠标放在目标上多少秒之后可以产生变化，这样是为了防止你鼠标不小心放上去之后鬼畜
第四个属性是运动轨迹这个可以去查看transition的API有哪些属性可以调用
transition属性可以监控transform属性，这个可以做一些有趣的效果
（7）transform
这是CSS3的变形效果，transition，transform这两个属性学问还是很大的再次只能是作为一个提点自己的作用，详细的还是浏览下列博文
CSS3 transform介绍：https://www.jianshu.com/p/17e289fcf467
语法:transform :rotate | scale |skew |translate
transform:rotate(30deg)
-
说明：
rotate(angle): //制定一个2d旋转，正数顺时针，负数逆时针旋转；
translate(x,y): //设置移动效果，就是让元素相对于现在的未知去进行一个平移
scale（number，number） //缩放效果scale（1.8,0.6） 两个参数分别是X轴和Y轴
skew（angle，angle） //扭曲的效果skew（30deg，60deg）
-
transform-origin ：设置旋转的基本点未知
语法；transform-origin：20% 40%