1.background-origin和background-clip
background-origin(背景图片可绘制区域，默认padding-box):border-box,padding-box,content-box。
background-clip(背景图片可显示区域，默认border-box):border-box（边框比背景层级高，但实色背景会透过变透明边框）,padding-box,content-box。
菜鸟教程实验：background-origin对纯色背景好像不起作用，background-clip能限制纯色背景的显示区域。
2.background-repeat和border-image-repeat
background-repeat属性只有重复
border-image-repeat有平铺，重复，拉伸三个属性，(默认值拉伸)，平铺和重复的区别是平铺可能会将图片变形，重复是复制图片。
3.border-image-slice:设置边框背景是一张图的时候怎么剪切边框图片，原理是剪切九宫格，各边剪切的比例，上右下左，顺序和margin一样；值为数值时，默认单位为px，所以不用加px，加px样式会出错。
4.border-image-width:默认值为1，注意：指相应于border-width 的倍数
菜鸟教程实验：只要border存在，那么四个顶角（九宫格的四个顶角）永远都是显示的。这个宽度属性，是先让九宫格四顶角满足条件，比如这个宽度属性，先让四个顶角有那么宽，然后是上下边，然后是左右边；border-image-width控制边框图片的大小，值可以无限大，但是显示大小受内容本身宽度的限制，这个属性可以模仿背景图片的效果。
5.border-image-outset:类似于outline,在边框外部绘制边框图片，值也是border-width的倍数，表示距离边框多远绘制。
6.菜鸟教程实验：transform的skewX表示在水平方向倾斜，默认正值绕Y轴逆时针旋转，水平方向的边长度不变；
transform的skewY表示在垂直方向倾斜，默认正值绕X轴顺时针旋转，垂直方向的边长度不变。
都是绕图像的正中心作X轴，Y轴旋转。以90度为一个反时针循环，就是说30度和120度（30+90）是相反的效果，30度和210度（30+180）是一样的效果。skew有两个值时，两值时针方向相反(默认两正值是相反的)，相加为90度的倍数时，那么图片不可见。
7.transform的rotateX是绕X轴上边向内旋转，相当于坐标系右上方往里，rotateY是绕Y轴右边向内旋转，相当于坐标系右上方往里，rotateZ是绕平面顺时针旋转。
8.css3中只有设置了perspective值的元素才会有Z轴，perspective值即观察点距离图像(Z轴)的垂直距离。
9.用户界面特性:resize(none,both,horizontal,vertical)可以调整元素大小
10.<button>的大小可以用font-size属性来设置，按钮，动画，伪元素。
11.li+li表示给除第一个li元素的所有同级li添加样式，第一个li元素相当于当前的li元素。
12.flex布局，父元素的6属性(flex-direction,flex-wrap,flex-flow,justify-content,align-items,align-content);子元素的6属性(order,flex-grow,flex-shrink,flex-basis,flex,align-self).
flex子元素宽度溢出父元素时
子元素：去除子元素的固定高度，加word-break: break-all; 目的让子元素高度自适应，英文单词放不下时自动换行
父元素加flex-wrap:wrap; 目的让子元素放不下时换行；
13.box-shadow不能响应鼠标事件，且模拟的边框线只能是实线，但是它能有多个边框属性，而且它的描边会跟着border-radius画。虚线需要outline模拟(一个属性边框，目前不能跟着border-radius画，只能是直角)。
14.计算calc:width(calc(100%-20px))这么写不生效，符号中间要有空格，不然解析不了，width(calc(100% - 20px))，这个适用于元素width:100%;margin-left和margin-right不为0的情况。当元素宽度100%，没有margin，设置了padding，那么可以设置box-sizing:border-box;目的，让元素的宽度包括padding。
15.渐变中如果某个色标的位置值比整个列表中在它之前的色标的位置值都要小，则该色标的位置值会被设置为它前面所有色标位置值的最大值.比如background: linear-gradient(red 30%, green 0);表示，绿色从30%开始，占70%宽，背景没有模糊的渐变效果，因为绿色设置的开始色的位置是红色的结束位置
实验，斜向的重复渐变色标值最好用像素，用百分比要数学计算background-size，很麻烦。
http://htmlpreview.github.io/?https://github.com/molleahahs/tendays/blob/master/css/linear-gradient.html
16. Alex Walker的蝉原则:通过相对质数来增加背景等涉及到重复规律的伪随机性
17.clip-path:剪切元素成任意形状，功能很强大。
18.hyphens处理字体的两端对齐(none,normal,auto)
19.有一个Unicode字符是专门代表换行符的：0x000A。在CSS中，这个字符可以写作 "\000A"， 或简化为 "\A"。
20.unicode-range与font-face一起使用，unicode-range不是css属性。