你不知道的CSS常用属性（不断更新，未完待续）_css那些你不知道的属性-优快云博客

本文链接：https://blog.youkuaiyun.com/Pennyswh/article/details/82701599

颜色

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

字体

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

文本属性

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

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

direction:规定文本的方向

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

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

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

text-indent：文本缩进。

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

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

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

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

text-overflow：文本溢出样式

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

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

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

列表属性

list-style

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

边框属性

border-radius简写

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

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

margin

1个参数：四边。
2个参数：上下、左右。
3个参数：上、左右、下。

display

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

visibility

visible：元素可见。
hidden：元素不可见。
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过渡

transition-property:变换的属性，none（没有属性改变）、all（所有属性改变）、具体属性。
transition-duration：变换持续时间。
transition-timing-function：变换的速率（ease：逐渐变慢）、（liner：匀速）、（ease-in：加速）、（ease-out：减速）、（ease-in-out：加速然后减速）、（cubic-bezier：自定义时间曲线）。
transition-delay：变换延迟时间。

指定属性对应类型

 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：如果缩写的所有部分都可以实现动画，则会像所有单个属性变化一样变化。

支持执行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