你不知道的CSS常用属性（不断更新，未完待续）

颜色

1. HEX(16进制色：color:#FFF000)。
2. RGB(红绿蓝：color:rgb(255,255,0)或color:rgb(100%,100%,20%))。
3. RGBA(红绿蓝透明度：color:rgba(255,255,0,0.5)。
4. HSL(CSS3有效，H：色调，S：饱和度，L：亮度。color:hsl(360,100%,50%))。
5. HSLA（和HSL相似，A表示Alpha透明度，取值0~1之间）。
6. 全透明：color:transparent。
7. filter:alpha(opacity:20))，只适用于早期的IE浏览器。

字体

8. 字体大小（absolute-size）：xx-small、 x-small、 small、 medium、 large、 x-large、 xx-large。
9. 字体大小（relative-size）：相对于父标签中字体尺寸进行调节：smaller、larger。
10. 字体大小（percentage）：百分比指定文字大小。
11. 字体大小（length）：长度值指定文字大小。
12. 字体名称：font-family:one、two、three。优先级从前向后，如果系统中没有当前字体，则往后寻找。

文本属性

white-space:设置元素中空白的处理方式

13. normal，默认。
14. pre，保留空格，当文字超出边界时不换行。
15. nowrap，不保留空格，强制在同一行内显示所有文本，直到文本结束或者碰到br标签。
16. pre-wrap，保留空格，当文字碰到边界时换行。
17. pre-line，不保留空格，保留文字的换行，当文字碰到边界时换行。

direction:规定文本的方向

18. ltr、rtl，文本从左到右和右到左。

vertical-align：文本所在行高的垂直对齐方式

19. baseline，默认。
20. sub，垂直对齐文本的下标，和_{标签一样的效果。}
21. super，垂直对齐文本的上标，和^{标签一样的效果。}
22. top，对象的顶端与所在容器的顶端对齐。
23. text-top，对象的顶端与所在行文字的顶端对齐。
24. middle，元素对象给予基线对齐。
25. bottom，对象的底端与所在行的文字底部对齐。
26. text-bottom，对象的底端与所在行文字的底端对齐。

text-indent：文本缩进。

letter-spacing：添加字母之间的空白。

word-spacing：添加每个单词之间的空白。

text-transform：属性控制文本的大小写

27. capitalize：文本中的每个单词以大写字母开头。
28. uppercase：全部大写。
29. lowercase：全部小写。

text-overflow：文本溢出样式

30. clip：修剪文本。
31. ellipsis：显示省略号…代表被修剪的文本。
32. string：使用给定的字符串来代表被修剪的文本。

text-shadow：左右，上下，虚化，颜色；

word-wrap：break-word；自动换行。

列表属性

list-style

33. list-style-type：none去除、decimal-leading-zero；02、square方框、circle空心圆、upper-aph、disc实心圆。
34. list-style-image：将图像设置为列表项标志。
35. list-style-position：inside、outside，列表项标志的位置。

边框属性

border-radius简写

36. 1个参数：四角。
37. 2个参数：左上右下，左下右上。
38. 3个参数：左上，左下右上，右下。
39. 4个参数：左上、右上、右下、左下（顺时针）

box-shadow：左右、上下、虚化、颜色

margin

40. 1个参数：四边。
41. 2个参数：上下、左右。
42. 3个参数：上、左右、下。

display

43. list-item：列表元素。
44. run-in：根据上下文作为块级元素或内联元素显示。
45. table：作为块级表格元素。
46. inline-table：作为内联表格元素。
47. table-row-group：类似tbody，作为一个或多个行的分组来显示。
48. table-header-group：类似thead，作为一个或多个行的分组来显示。
49. table-footer-group：类似tfoot，作为一个或多个行的分组来显示。
50. table-row：类似tr，作为一个表格行显示。
51. table-colunm-group：类似colgroup，作为一个或多个列的分组来显示。
52. table-colunm：类似col，作为一个单元格列显示。
53. table-cell：类似td和th，作为一个表格单元格显示。
54. table-caption：类似caption，作为一个表格标题显示。

visibility

55. visible： 元素可见。
56. hidden：元素不可见。
57. collapse：当在表格元素中使用时，此值可删除一行或一列，不会影响表格的布局。

clip剪裁图像

rect剪裁定位元素：clip：rect（0px,10px,10px,0px）;四个参数为偏移值。auto默认值，无剪切。区域外的部分是透明的。必须指定position:absolute。

z-index

z-index仅在定位元素上有效：position:absolute

zoom:normal、number、percentage

cursor鼠标的类型形状:

  Auto: 默认
  Default: 默认
  e-resize
  ne-resize
  nw-resize
  n-resize
  se-resize
  sw-resize
  s-resize
  w-resize
  Crosshair
  Pointer
  Move
  text
  wait
  help
  not-allowed

Transition过渡

1. transition-property:变换的属性，none（没有属性改变）、all（所有属性改变）、具体属性。

2. transition-duration：变换持续时间。

3. transition-timing-function：变换的速率（ease：逐渐变慢）、（liner：匀速）、（ease-in：加速）、（ease-out：减速）、（ease-in-out：加速然后减速）、（cubic-bezier：自定义时间曲线）。

4. transition-delay：变换延迟时间。

5. 指定属性对应类型

    1、color： 通过红、绿、蓝和透明度组件变换（每个数值单独处理），如：background-color，border-color，color，outline-color等CSS属性；
    2、length：真实的数字，如：word-spacing，width，vertical- align，top，right，bottom，left，padding，outline-width，margin，min-width，min- height，max-width，max-height，line-height，height，border-width，border- spacing，background-position等属性；
    3、percentage：真实的数字，如：word-spacing，width，vertical- align，top，right，bottom，left，min-width，min- height，max-width，max-height，line-height，height，background-position等属性；
    4、integer 离散步骤（整个数字），在真实的数字空间，以及使用floor()转换为整数时发生，如：outline-offset，z-index等属性；
    5、number真实的（浮点型）数值，如：zoom，opacity，font-weight等属性；
    6、transform list。
    7、rectangle：通过x、 y、 width和height（转为数值）变换，如：crop；
    8、visibility：离散步骤，在0到1数字范围之内，0表示“隐藏”，1表示完全“显示”,如：visibility；
    9、shadow：作用于color、x、y、和blur（模糊）属性，如：text-shadow；
    10、gradient：通过每次停止时的位置和颜色进行变化。它们必须有相同的类型（放射状的或是线性的）和相同的停止数值以便执行动画，如：background-image；
    11、paint server (SVG)：只支持下面的情况：从gradient到gradient以及color到color，然后工作与上面类似；
    12、space-separated list of above：如果列表有相同的项目数值，则列表每一项按照上面的规则进行变化，否则无变化；
    13、a shorthand property：如果缩写的所有部分都可以实现动画，则会像所有单个属性变化一样变化。
   

6. 支持执行transition效果的属性
   Property Name Type
   background-color as color
   background-position as repeatable list of simple list of length, percentage, or calc
   border-bottom-color as color
   border-bottom-width as length
   border-left-color as color
   border-left-width as length
   border-right-color as color
   border-right-width as length
   border-spacing as simple list of length
   border-top-color as color
   border-top-width as length
   bottom as length, percentage, or calc
   clip as rectangle
   color as color
   font-size as length
   font-weight as font weight
   height as length, percentage, or calc
   left as length, percentage, or calc
   letter-spacing as length
   line-height as either number or length
   margin-bottom as length
   margin-left as length
   margin-right as length
   margin-top as length
   max-height as length, percentage, or calc
   max-width as length, percentage, or calc
   min-height as length, percentage, or calc
   min-width as length, percentage, or calc
   opacity as number
   outline-color as color
   outline-width as length
   padding-bottom as length
   padding-left as length
   padding-right as length
   padding-top as length
   right as length, percentage, or calc
   text-indent as length, percentage, or calc
   text-shadow as shadow list
   top as length, percentage, or calc
   vertical-align as length
   visibility as visibility
   width as length, percentage, or calc
   word-spacing as length
   z-index as integer