CSS属性参考手册（一）

CSS属性

文字

属性	描述	属性值	语法
color	文字颜色	颜色的名称、十六进制、RGB、RGBA(a 表示透明度：0=透明；1=不透明)、 HSL、HSLA(色相-饱和度-明度-阿尔法)	color:red(#FF0000); rgba(255,0,0, 1) hsla(240,100%,50%,1)
opacity	元素透明度级别	value	不透明度,0.0(完全透明)到1.0(完全不透明)、inherit
direction	文字书写方向	ltr(文本方向从左到右)、rtl(从右到左)、inherit	direction:rtl;
font	在一个声明中设置所有字体属性	顺序如下：font-style、font-variant、font-weight、font-size/line-height、font-family	font:15px arial,sans-serif;
font-style	文字样式	normal、italic(斜体)、oblique(倾斜)、inherit	font-style:itelic; //文字斜体
font-variant	显示小型大写字母的字体	normal、small-caps、inherit	font-variant:small-caps; //小字体
font-weight	文字粗细	(100-700)、normal(400)、bold(700)、bolder、lighter	font-weight:bold(400); //文字粗体
font-size	文字大小	(xx-small、x-small、small、medium、large、x-large、xx-large)、smaller、larger、length、%、inherit	font-size:12px;
line-height	设置行高	normal、number、length、%、inherit	line-height:200%;
font-family	文字字体	family-name - 指定的系列名称：具体字体的名称(比如：times、courier、arial) generic-family - 通常字体系列名称(比如：serif、sans-serif、cursive、fantasy、monospace)	font-family:宋体,sans-serif;
@font-face	一个规则，允许网站下载并使用其他超过"Web- safe"字体的字体	必需：font-family(name)、src(URL） 可选：font-stretch、font-style、font-weight、unicode-range	@font-face { font-family: myFirstFont; src: url(‘Sansation_Light.ttf’), url(‘Sansation_Light.eot’); } //指定名为"myFirstFont"的字体，并指定在哪里可以找到它的URL
font-size-adjust	为元素规定 aspect 值	none、inherit、number{定义字体的 aspect 值比率。可使用的公式： 首选字体的字体尺寸 * （font-size-adjust 值 / 可用字体的 aspect 值）=可应用到可用字体的字体尺寸}	font-size-adjust:0.58;
font-stretch	文字收缩或拉伸	wider(宽)、narrower(窄)、ultra-condensed、extra-condensed、condensed、semi-condensed(略微紧缩)、normal、semi-expanded、expanded(加宽)、extra-expanded、ultra-expanded、inherit	font-stretch:wider; //文本更宽
letter-spacing	字间距离	normal、length、inherit	letter-spacing:2px;
vertical-align	元素的垂直对齐方式	baseline(默认)、sub(下标字)、super(上标字)、top(垂直向上对齐)、text-top(文字垂直向上对齐)、middle(垂直居中对齐)、bottom(垂直向下对齐)、text-bottom(文字垂直向下对齐)、length、%、inherit	vertical-align:sub; vertical-align:text-top;
text-align	文字的水平对齐方式	left(文字排列到左边)、right(排列到右边)、center(居中)、justify(两端对齐)、inherit	text-align:center;
text-decoration	文字的装饰效果	none(默认)、underline(下划线)、overline(上划线)、line-through(删除线)、blink(闪烁的文字)、inherit	text-decoration: underline overline dotted red; //红色虚线 text-decoration: underline overline wavy red; //红色波浪线
text-emphasis	向元素的文字应用重点标记以及重点标记的前景色	text-emphasis-style、text-emphasis-color	text-emphasis:filled blue;
text-indent	文字块首行缩进	length、%、inherit	text-indent:50px;
text-align-last	当 text-align 设置为 justify 时，最后一行的对齐方式	auto、left(最后一行向左对齐)、right(向右对齐)、center(居中对齐)、justify(两端对齐)、start{最后一行在行开头对齐(如果 text-direction 是从左到右，则向左对齐；如果 text-direction 是从右到左，则向右对齐)}、end{最后一行在行末尾对齐(如果 text-direction 是从左到右，则向右对齐；如果 text-direction 是从右到左，则向左对齐)}、initial、inherit	text-align-last { text-align: justify; text-align-last: right; -moz-text-align-last: right; //针对 Firefox 的代码 }
text-justify	当 text-align 设置为 justify 时指定分散对齐的方式	auto(浏览器决定齐行算法)、none(禁用齐行)、inter-word (增加/减少单词间的间隔)、inter-ideograph (用表意文本来排齐内容)、inter-cluster、distribute、kashida	text-justify { text-align:justify; text-justify:inter-word; }
text-transform	文字大小写	none、capitalize(文本中的每个单词大写字母开头)、uppercase(仅有大写)、lowercase(仅有小写)、inherit	text-transform:none;
text-outline	文字轮廓	必需：thickness(轮廓粗细)、color 可选：blur(轮廓模糊半径)	text-outline: 2px 2px #ff0000;
text-overflow	文字溢出包含元素时发生的事情	clip (修剪文本)、ellipsis(显示省略符号来代表被修剪的文本)、string(给定的字符串)	text-overflow:ellipsis;
text-shadow	文字阴影	必需：h-shadow(水平阴影的位置)、v-shadow(垂直阴影的位置) 可选：blur(模糊的距离)、color(阴影的颜色)	text-shadow: h-shadow v-shadow blur color; text-shadow: 5px 5px 5px #FF0000;
text-wrap	文字换行	normal(换行点换行)、none(不换行)、unrestricted(任意两个字符)、suppress(压缩元素)	text-wrap:normal;
hanging-punctuation	标点符号是否可能超出行框	none(不放置)、first(首行)、last(结尾)、allow-end、force-end	hanging-punctuation:first;
punctuation-trim	标点符号是否要去掉	none(请勿修剪打开或关闭标点符号)、start(开头)、end(末尾)、allow-end、adjacent	punctuation-trim:start;
white-space	处理元素中的空白	normal(默认)、pre(被保留，类似 HTML的<pre>)、nowrap(文本不换行，遇到 <br> 标签为止）、pre-wrap(保留，正常换行)、pre-line(合并，保留换行)、inherit	white-space:pre-wrap;
word-spacing	单词间距	normal、length、inherit	word-spacing:30px;
word-break	非中日韩文字的换行	normal、break-all(单词内换行)、keep-all(半角空格、连字符处换行)	word-break:keep-all;
word-wrap	浏览器是否对过长的单词进行换行	normal(断字点换行)、break-word(长单词URL)	word-wrap:break-word;

项目（列表）

属性	描述	属性值	语法
list-style	设置所有的列表属性	顺序如下： list-style-type、list-style-position、list-style-image	list-style:square inside url(“home.png”);
list-style-image	图象设置为列表项标记	URL(图像路径)、none(无图形)、inherit	list-style-image:url(“logo.png”);
list-style-position	设置列表项标记的放置位置	inside(标记在文本以内)、outside(默认值,标记文本左侧,标记在文本以外)、inheri	list-style-position: inside;

属性	描述	属性值	语法
list-style-type	设置列表项标记的类型	none(无标记)、disc(实心圆)、circle(空心圆)、square(实心方块)、decimal(数字)、decimal-leading-zero(0开头的数字01, 02, 03, 等)、lower-roman(小写罗马数字i, ii, iii,等)、upper-roman(大写罗马数字(I, II, III, 等)、lower-alpha(小写英文字母a, b, c, 等)、upper-alpha(大写英文字母A, B, C, 等)、lower-greek (小写希腊字母alpha, beta, gamma, 等)、lower-latin(小写拉丁字母a, b, c, 等)、upper-latin(大写拉丁字母A, B, C, 等)、hebrew(传统的希伯来编号)、armenian(传统的亚美尼亚编号)、georgian(传统的乔治亚编号方式an, ban, gan, 等)、cjk-ideographic(简单的表意数字)、hiragana(日文平假名字符)、katakana(日文片假名字符)、hiragana-iroha(日文平假名序号)、katakana-iroha(日文片假名序号)	list-style-type:circle; list-style-type:square; list-style-type:upper-roman; list-style-type:lower-alpha;

多列

属性	描述	属性值	语法
columns	简写，列宽和列数	column-width、column-count	columns:80px 4;
column-count	元素列数	number、auto	column-count:3;
column-width	列的宽度	auto、length	column-width:100px;
column-fill	填充列	balance(列长短平衡)、auto(列顺序填充)	column-fill:auto;
column-gap	列之间差距	length、normal	column-gap:30px;
column-rule	简写，列之间的宽度，样式和颜色	column-rule-width、column-rule-style、column-rule-color	column-rule:3px outset #FF0000;
column-rule-color	列之间的颜色	color	column-rule-color:#FF0000;
column-rule-style	列之间的样式	none、hidden(隐藏)、dotted(点状)、dashed(虚线)、solid(实线)、double(双线)、groove(3D grooved)、ridge(3D ridged)、inset(3D inset)、outset(3D outset)	column-rule-style:outset;
column-rule-width	列之间的宽度	thin、medium、thick、length	column-rule-width:1px;
column-span	元素跨越几列	1、all	column-span:all;

背景

属性	描述	属性值	语法
background	复合属性，对象背景特性	各值之间用空格分隔，不分先后顺序(background-color、background-position、background-size、background-repeat、background-origin、background-clip、background-attachment 和 background-image)	background: #FF0000 url(“logo.png”) no-repeat fixed center;
background-attachment	背景图像是否对象内容滚动，必须先指定background-image属性	scroll(默认,背景图片随页面滚动而滚动)、fixed(固定)、local(随元素内容滚动而滚动)、initial、inherit	background-image:url(“logo.png”); background-attachment:fixed;
background-blend-mode	背景层混合模式(图片与颜色)	normal(默认,正常混合模式)、multiply(正片叠底)、screen(滤色）、overlay(叠加）、darken(变暗)、lighten(变亮)、color-dodge(颜色减淡)、saturation(饱和度)、color(颜色)、luminosity(亮度)	background-image: linear-gradient(to right, white 0%,red 100%), url(“logo.png”); background-blend-mode: lighten;
background-clip	背景图像向外裁剪区域	border-box(默认,背景被裁剪到边框盒)、padding-box(内边距框)、content-box(内容框)	background-clip: padding-box;
background-color	背景颜色	color、transparent(透明)、inherit	background-color:#FF0000;
background-image	背景图像	url(“URL”) 图像的路径、none不显示、linear-gradient()线性渐变的 “图像”(从上到下)、radial-gradient()用径向渐变创建 “图像”(center to edges)、repeating-linear-gradient()重复线性渐变 “图像”、repeating-radial-gradient()重复径向渐变 “图像”、inherit	background-image:url(“logo.png”); background-image: linear-gradient(red, green, blue); background-image: radial-gradient(red, green, blue);
background-origin	背景图像定位区域	padding-box(背景图像相对于内边距框来定位)、border-box(边框盒)、content-box(内容框)	background-origin:border-box;
background-position	背景图像位置，必须先指定background-image属性	(left top、left center、left bottom、right top、right center、right bottom、center top、center center、center bottom)、x% y%(水平,垂直)左上角0％0％,右下角100％100％、xpos ypos(水平,垂直)左上角是0,单位可以是像素(0px0px)、inherit	background-image:url(“logo.png”); background-position:center; background-position:50% 50%; background-position:100px 100px;
background-repeat	是否重复背景图像,必须先指定background-image属性	repeat(垂直和水平方向重复)、repeat-x(水平重复)、repeat-y(垂直重复)、no-repeat(background-image不重复)、inherit	background-image:url(“logo.png”); background-repeat:no-repeat;
background-size	背景图像尺寸	length(设置宽度,高度,只给一个值，第二个为 auto)、percentage(背景定位区域的百分比)、cover(覆盖背景)、contain(适合背景)	background-size:50px 50px;

尺寸

属性	描述	属性值	语法
height	元素高度	auto(默认)、length(px、cm 等单位定义高度)、%、inherit	height:100px;
max-height	元素最大高度	none(默认)、length、%、inherit	max-height:50px;
max-width	元素最大宽度	none(默认)、length、%、inherit	max-width:100px;
min-height	元素最小高度	length、%、inherit	min-height:50px;
min-width	元素最小宽度	length、%、inherit	min-height:50px;
width	元素宽度	auto(默认)、length(px、cm 等单位定义宽度)、%、inherit	width:100px;

外边距

属性	描述	属性值	语法
margin	设置所有外边距	auto、length(像素、厘米等，默认值是 0px)、%、inherit	margin:10px 5px 15px 20px; //上右下左 margin:10px 5px 15px; //上/右左/下 margin:10px 5px; //上下/右左 margin:10px;
margin-bottom	下外边距	auto、length、%、inherit	margin-bottom:2cm;
margin-left	左外边距	auto、length、%、inherit	margin-left:2cm;
margin-right	右外边距	auto、length、%、inherit	margin-right:6cm
margin-top	上外边距	auto、length、%、inherit	margin-top:2cm;

内边距

属性	描述	属性值	语法
padding	设置所有内边距	length(像素、厘米等，默认值是 0px)、%、inherit	padding:10px 5px 15px 20px; //上右下左 padding:10px 5px 15px; //上/右左/下 padding:10px 5px; //上下/右左 padding:10px;
padding-bottom	下内边距	length、%、inherit	padding-bottom:3px;
padding-left	左内边距	length、%、inherit	padding-left:2cm;
padding-right	右内边距	length、%、inherit	padding-right:2cm;
padding-top	上内边距	length、%、inherit	padding-top:2cm;

边框

属性	描述	属性值	语法
border	复合属性，设置所有边框	顺序如下：border-width、border-style、border-color	border:3px solid red;
border-color	边框颜色	color、transparent(透明,默认)、inherit	border-color:red green blue pink; //上右下左 border-color:red green blue; //上/左右/下 border-color:red green; //上下/左右 border-color:red;
border-style	边框样式	none(无边框)、hidden(none 相同,应用于表)、dotted(点状边框)、dashed(虚线)、solid(实线)、double(双线)、groove( 3D 凹槽边框)、ridge(3D 垄状边框)、inset(3D inset 边框)、outset(3D outset 边框)、inherit	border-style:dotted solid double dashed; //上右下左 border-style:double;
border-width	边框宽度	thin(细边框)、medium(默认，中等边框)、thick(粗边框)、length(自定义)、inherit	border-width:thin medium thick 10px; //上右下左 border-width:5px;
border-bottom	复合属性,设置所有底部边框	顺序如下：border-bottom-width、 border-bottom-style、border-bottom-color	border-bottom:thick dotted #FF0000;
border-bottom-color	底部边框颜色	color、transparent(透明,默认)、inherit	border-bottom-color:#FF0000;
border-bottom-style	底部边框样式	none(无边框)、hidden(none 相同,应用于表)、dotted(点状边框)、dashed(虚线)、solid(实线)、double(双线)、groove( 3D 凹槽边框)、ridge(3D 垄状边框)、inset(3D inset 边框)、outset(3D outset 边框)、inherit	border-bottom-style:double;
border-bottom-width	底部边框宽度	thin(细边框)、medium(默认，中等边框)、thick(粗边框)、length(自定义)、inherit	border-bottom-width:5px;
border-left	复合属性,设置所有左边边框	顺序如下：border-left-width、border-left-style、and border-left-color	border-left:thick double #FF0000;
border-left-color	左边边框颜色	color、transparent(透明,默认)、inherit	border-left-color:#FF0000
border-left-style	左边边框样式	none(无边框)、hidden(none 相同,应用于表)、dotted(点状边框)、dashed(虚线)、solid(实线)、double(双线)、groove( 3D 凹槽边框)、ridge(3D 垄状边框)、inset(3D inset 边框)、outset(3D outset 边框)、inherit	border-left-style:double;
border-left-width	左边边框宽度	thin(细边框)、medium(默认，中等边框)、thick(粗边框)、length(自定义)、inherit	border-left-width:5px;
border-right	复合属性，设置所有右边边框	顺序如下：border-right-width、border-right-style、border-right-color	border-right:thick double #FF0000;
border-right-color	右边边框颜色	color、transparent(透明,默认)、inherit	border-right-color:#FF0000
border-right-style	右边边框样式	none(无边框)、hidden(none 相同,应用于表)、dotted(点状边框)、dashed(虚线)、solid(实线)、double(双线)、groove( 3D 凹槽边框)、ridge(3D 垄状边框)、inset(3D inset 边框)、outset(3D outset 边框)、inherit	border-right-style:double;
border-right-width	右边边框宽度	thin(细边框)、medium(默认，中等边框)、thick(粗边框)、length(自定义)、inherit	border-right-width:5px;
border-top	复合属性,设置所有顶部边框	顺序如下：border-top-width、 border-top-style、border-top-color	border-top:thick double #FF0000;
border-top-color	顶部边框颜色	color、transparent(透明,默认)、inherit	border-top-color:#FF0000;
border-top-style	顶部边框样式	none(无边框)、hidden(none 相同,应用于表)、dotted(点状边框)、dashed(虚线)、solid(实线)、double(双线)、groove( 3D 凹槽边框)、ridge(3D 垄状边框)、inset(3D inset 边框)、outset(3D outset 边框)、inherit	border-top-style:double;
border-top-width	顶部边框宽度	thin(细边框)、medium(默认，中等边框)、thick(粗边框)、length(自定义)、inherit	border-top-width:5px;
border-collapse	表格边框是否被合并为一	collapse(合并为一,忽略border-spacing、empty-cells）、separate(默认值,分开,不忽略border-spacing、empty-cells)、inherit	border-collapse:collapse;
border-image	边框样式使用图像来填充	border-image-source、border-image-slice、border-image-width、border-image-outset、border-image-repeat	border-image: url(logo.png) 30 stretch;
border-image-outset	边框图像超过边框盒的量	length(边框图像与边框border-image距离,默认为0)、number(代表border-width倍数)	border-image-outset:5px 5px 5px 5px; border-image-outset:0 1 2 1;
border-image-repeat	图像边界	stretch(默认,拉伸图像)、repeat(平铺)、round(缩放)、space(扩展)、initial、inherit	border-image-repeat: repeat;
border-image-slice	图像边框的向内偏移	number、%、fill(保留图像的中间部分）	border-image-slice: 50% 50%;
border-image-source	边框的图片	none(无图像)、image(图像路径)	border-image-source: url(logo.png);
border-image-width	图像边框的宽度	number、%、auto(指定宽度是image slice内在宽度或高度)	border-image-width: 50 50;
border-radius	圆角边框	顺序如下：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius	border-radius:25px 5px 25px 5px; border-radius:25px
border-bottom-left-radius	左下角边框的形状	length(弯道形状)、%(角落形状)	border-bottom-left-radius:12px;
border-bottom-right-radius	右下角边框的形状	length、%	border-bottom-right-radius:12px;
border-top-left-radius	左上角边框的形状	length、%	border-top-left-radius:12px;
border-top-right-radius	右上角边框的形状	length、%	border-top-right-radius:12px;
box-shadow	添加阴影	必需：h-shadow(水平阴影)、v-shadow(垂直阴影) 可选：blur(模糊距离)、spread(阴影大小）、color、inset(外层阴影改变阴影内侧阴影)	box-shadow: 10px 10px 5px #FF0000;
border-spacin	单元格边框间的距离	length length{px、cm 等单位,不允许使用负值,一个length(水平和垂直),两个 length(水平,垂直)}、inherit	border-spacing:10px 20px;
outline	复合属性，外线条轮廓	顺序如下：outline-color、 outline-style、outline-width	outline:red outset 5px;
outline-color	外线条轮廓颜色	color、invert(默认,逆向颜色)、inherit	outline-color:#FF0000;
outline-style	外线条轮廓样式	none(无边框)、dotted(点状边框)、dashed(虚线)、solid(实线)、double(双线)、groove( 3D 凹槽边框)、ridge(3D 垄状边框)、inset(3D inset 边框)、outset(3D outset 边框)、inherit	outline-style:double;
outline-width	外线条轮廓宽度	thin(细边框)、medium(默认，中等边框)、thick(粗边框)、length(自定义)、inherit	outline-width:5px;

盒子

属性	描述	属性值	语法
overflow-x	内容溢出了区域，对左/右边缘裁剪	visible(不裁剪)、hidden(裁剪，不提供滚动)、scroll(裁剪，滚动)、auto(溢出应该提供滚动)、no-display(内容不适合，删除框)、no-content(内容不适合，隐藏)	overflow-x:scroll;
overflow-y	内容溢出了区域，对上/下边缘裁剪	visible(不裁剪)、hidden(裁剪，不提供滚动)、scroll(裁剪，滚动)、auto(溢出应该提供滚动)、no-display(内容不适合，删除框)、no-content(内容不适合，隐藏)	overflow-y:scroll;
overflow-style	溢出元素滚动	auto、scrollbar(添加滚动条)、panner、move(移动内容)、marquee(内容自主移动)	overflow-style:marquee,panner;
rotation	rotation-point定义的点对元素旋转	angle (元素旋转角度,值：0deg 到 360deg)	rotation:180deg;
rotation-point	距离上左边框边缘的偏移点	left top、left center、left bottom、right top、right center、right bottom、center top、center center、center bottom、x% y%	rotation-point:50% 50%;

过渡

属性	描述	属性值	语法
transition	简写，元素当过渡效果	transition-property、transition-duration、transition-timing-function、transition-delay	transition: width 2s;
transition-property	过渡的 CSS 属性	none、all、property(CSS 属性名称列表)	transition-property:width/height;
transition-duration	过渡进行的时间长度	time(秒或毫秒)	transition-duration:4s;
transition-timing-function	过渡进行的时序函数	linear[相同速度开始至结束(cubic-bezier(0,0,1,1))]、ease[慢速开始变快，慢速结束(cubic-bezier(0.25,0.1,0.25,1))]、ease-in [慢速开始cubic-bezier(0.42,0,1,1)]、ease-out[慢速结束(cubic-bezier(0,0,0.58,1)]、ease-in-out[慢速开始和结束(cubic-bezier(0.42,0,0.58,1)]、cubic-bezier(n,n,n,n)值是 0 至 1 之间	transition-timing-function:linear;
transition-delay	过渡开始的时间	所有元素::before和::after 伪元素、time(秒或毫秒)	transition-delay:2s