CSS 属性

CSS 属性组：

"CSS" 列指示属性是在哪个 CSS 版本中定义的 (CSS1, CSS2, 或者 CSS3).

动画属性

属性	描述	CSS
@keyframes	定义一个动画,@keyframes定义的动画名称用来被animation-name所使用。	3
animation	复合属性。检索或设置对象所应用的动画特效。	3
animation-name	检索或设置对象所应用的动画名称 ,必须与规则@keyframes配合使用，因为动画名称由@keyframes定义	3
animation-duration	检索或设置对象动画的持续时间	3
animation-timing-function	检索或设置对象动画的过渡类型	3
animation-delay	检索或设置对象动画的延迟时间	3
animation-iteration-count	检索或设置对象动画的循环次数	3
animation-direction	检索或设置对象动画在循环中是否反向运动	3
animation-play-state	检索或设置对象动画的状态	3

背景属性

属性	描述	CSS
background	复合属性。设置对象的背景特性。	1
background-attachment	设置或检索背景图像是随对象内容滚动还是固定的。必须先指定background-image属性。	1
background-color	设置或检索对象的背景颜色。	1
background-image	设置或检索对象的背景图像。	1
background-position	设置或检索对象的背景图像位置。必须先指定background-image属性。	1
background-repeat	设置或检索对象的背景图像如何铺排填充。必须先指定background-image属性。	1
background-clip	指定对象的背景图像向外裁剪的区域。	3
background-origin	S设置或检索对象的背景图像计算background-position时的参考原点(位置)。	3
background-size	检索或设置对象的背景图像的尺寸大小。	3

边框(Border) 和轮廓(Outline) 属性

属性	描述	CSS
border	复合属性。设置对象边框的特性。	1
border-bottom	复合属性。设置对象底部边框的特性。	1
border-bottom-color	设置或检索对象的底部边框颜色。	1
border-bottom-style	设置或检索对象的底部边框样式。	1
border-bottom-width	设置或检索对象的底部边框宽度。	1
border-color	置或检索对象的边框颜色。	1
border-left	复合属性。设置对象左边边框的特性。	1
border-left-color	设置或检索对象的左边边框颜色。	1
border-left-style	设置或检索对象的左边边框样式。	1
border-left-width	设置或检索对象的左边边框宽度。	1
border-right	复合属性。设置对象右边边框的特性。	1
border-right-color	设置或检索对象的右边边框颜色。	1
border-right-style	设置或检索对象的右边边框样式。	1
border-right-width	设置或检索对象的右边边框宽度。	1
border-style	设置或检索对象的边框样式。	1
border-top	复合属性。设置对象顶部边框的特性。	1
border-top-color	设置或检索对象的顶部边框颜色	1
border-top-style	设置或检索对象的顶部边框样式。	1
border-top-width	设置或检索对象的顶部边框宽度。	1
border-width	设置或检索对象的边框宽度。	1
outline	复合属性。设置或检索对象外的线条轮廓。	2
outline-color	设置或检索对象外的线条轮廓的颜色。	2
outline-style	设置或检索对象外的线条轮廓的样式。	2
outline-width	设置或检索对象外的线条轮廓的宽度。	2
border-bottom-left-radius	设置或检索对象的左下角圆角边框。提供2个参数，2个参数以空格分隔，每个参数允许设置1个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数	3
border-bottom-right-radius	设置或检索对象的右下角圆角边框。	3
border-image	设置或检索对象的边框样式使用图像来填充。	3
border-image-outset	规定边框图像超过边框的量。	3
border-image-repeat	规定图像边框是否应该被重复（repeated）、拉伸（stretched）或铺满（rounded）。	3
border-image-slice	规定图像边框的向内偏移。	3
border-image-source	规定要使用的图像，代替 border-style 属性中设置的边框样式。	3
border-image-width	规定图像边框的宽度。	3
border-radius	设置或检索对象使用圆角边框。	3
border-top-left-radius	定义左上角边框的形状。	3
border-top-right-radius	定义右下角边框的形状。	3
box-decoration-break	规定行内元素被折行	3
box-shadow	向方框添加一个或多个阴影。	3

盒子(Box) 属性

属性	描述	CSS
overflow-x	如果内容溢出了元素内容区域，是否对内容的左/右边缘进行裁剪。	3
overflow-y	如果内容溢出了元素内容区域，是否对内容的上/下边缘进行裁剪。	3
overflow-style	规定溢出元素的首选滚动方法。	3
rotation	围绕由 rotation-point 属性定义的点对元素进行旋转。	3
rotation-point	定义距离上左边框边缘的偏移点。	3

颜色(Color) 属性

属性	描述	CSS
color-profile	允许使用源的颜色配置文件的默认以外的规范	3
opacity	设置一个元素的透明度级别	3
rendering-intent	允许超过默认颜色配置文件渲染意向的其他规范	3

内边距(Padding) 属性

属性	说明	CSS
padding	在一个声明中设置所有填充属性	1
padding-bottom	设置元素的底填充	1
padding-left	设置元素的左填充	1
padding-right	设置元素的右填充	1
padding-top	设置元素的顶部填充	1

媒体页面内容属性

属性	说明	CSS
bookmark-label	指定书签的标签	3
bookmark-level	指定了书签级别	3
bookmark-target	指定了书签链接的目标	3
float-offset	在相反的方向推动浮动元素，他们一直具有浮动	3
hyphenate-after	指定一个断字的单词断字字符后的最少字符数	3
hyphenate-before	指定一个断字的单词断字字符前的最少字符数	3
hyphenate-character	指定了当一个断字发生时，要显示的字符串	3
hyphenate-lines	表示连续断字的行在元素的最大数目	3
hyphenate-resource	外部资源指定一个逗号分隔的列表，可以帮助确定浏览器的断字点	3
hyphens	设置如何分割单词以改善该段的布局	3
image-resolution	指定了正确的图像分辨率	3
marks	将crop and/or cross标志添加到文档	3
string-set		3

尺寸(Dimension) 属性

属性	描述	CSS
height	设置元素的高度	1
max-height	设置元素的最大高度	2
max-width	设置元素的最大宽度	2
min-height	设置元素的最小高度	2
min-width	设置元素的最小宽度	2
width	设置元素的宽度	1

弹性盒子模型（Flexible Box）属性(新)

属性	说明	CSS
flex	复合属性。设置或检索弹性盒模型对象的子元素如何分配空间。	3
flex-grow	设置或检索弹性盒的扩展比率。	3
flex-shrink	设置或检索弹性盒的收缩比率。	3
flex-basis	设置或检索弹性盒伸缩基准值。	3
flex-flow	复合属性。设置或检索弹性盒模型对象的子元素排列方式。	3
flex-direction	该属性通过定义flex容器的主轴方向来决定felx子项在flex容器中的位置。	3
flex-wrap	该属性控制flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。	3
align-content	在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）。	3
align-items	定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。	3
align-self	定义flex子项单独在侧轴（纵轴）方向上的对齐方式。	3
justify-content	设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。	3
order	设置或检索弹性盒模型对象的子元素出现的順序。	3

弹性盒子模型（Flexible Box）属性(旧)

属性	说明	CSS
box-align	指定如何对齐一个框的子元素	3
box-direction	指定在哪个方向，显示一个框的子元素	3
box-flex	指定一个框的子元素是否是灵活的或固定的大小	3
box-flex-group	指派灵活的元素到Flex组	3
box-lines	每当它在父框的空间运行时，是否指定将再上一个新的行列	3
box-ordinal-group	指定一个框的子元素的显示顺序	3
box-orient	指定一个框的子元素是否在水平或垂直方向应铺设	3
box-pack	指定横向盒在垂直框的水平位置和垂直位置	3

字体（Font）属性

属性	说明	CSS
font	在一个声明中设置所有字体属性	1
font-family	规定文本的字体系列	1
font-size	规定文本的字体尺寸	1
font-style	规定文本的字体样式	1
font-variant	规定文本的字体样式	1
font-weight	规定字体的粗细	1
@font-face	一个规则，允许网站下载并使用其他超过"Web- safe"字体的字体	3
font-size-adjust	为元素规定 aspect 值	3
font-stretch	收缩或拉伸当前的字体系列	3

内容生成属性(Generated Content Properties)

属性	说明	CSS
content	与 :before 以及 :after 伪元素配合使用，来插入生成内容	2
counter-increment	递增或递减一个或多个计数器	2
counter-reset	创建或重置一个或多个计数器	2
quotes	设置嵌套引用的引号类型	2
crop	允许replaced元素只是作为一个对象代替整个对象的矩形区域	3
move-to	Causes an element to be removed from the flow and reinserted at a later point in the document	3
page-policy	判定基于页面的给定元素的适用于计数器的字符串值	3

网格（Grid）属性

属性	说明	CSS
grid-columns	指定在网格中每列的宽度	3
grid-rows	指定在网格中每列的高度	3

超链接(Hyperlink) 属性

属性	说明	CSS
target	简写属性设置target-name, target-new,和target-position属性	3
target-name	指定在何处打开链接（目标位置）	3
target-new	指定是否有新的目标链接打开一个新窗口或在现有窗口打开新标签	3
target-position	指定应该放置新的目标链接的位置	3

线框(Linebox) 属性

属性	说明	CSS
alignment-adjust	允许更精确的元素的对齐方式	3
alignment-baseline	其父级指定的内联级别的元素如何对齐	3
baseline-shift	允许重新定位相对于dominant-baseline的dominant-baseline	3
dominant-baseline	指定scaled-baseline-table	3
drop-initial-after-adjust	设置下拉的主要连接点的初始对齐点	3
drop-initial-after-align	校准行内的初始行的设置就是具有首字母的框使用初级连接点	3
drop-initial-before-adjust	设置下拉的辅助连接点的初始对齐点	3
drop-initial-before-align	校准行内的初始行的设置就是具有首字母的框使用辅助连接点	3
drop-initial-size	控制局部的首字母下沉	3
drop-initial-value	激活一个下拉式的初步效果	3
inline-box-align	设置一个多行的内联块内的行具有前一个和后一个内联元素的对齐	3
line-stacking	一个速记属性设置line-stacking-strategy, line-stacking-ruby,和line-stacking-shift属性	3
line-stacking-ruby	设置包含Ruby注释元素的行对于块元素的堆叠方法	3
line-stacking-shift	设置base-shift行中块元素包含元素的堆叠方法	3
line-stacking-strategy	设置内部包含块元素的堆叠线框的堆叠方法	3
text-height	行内框的文本内容区域设置block-progression维数	3

列表(List) 属性

属性	说明	CSS
list-style	在一个声明中设置所有的列表属性	1
list-style-image	将图象设置为列表项标记	1
list-style-position	设置列表项标记的放置位置	1
list-style-type	设置列表项标记的类型	1

外边距(Margin) 属性

属性	说明	CSS
margin	在一个声明中设置所有外边距属性	1
margin-bottom	设置元素的下外边距	1
margin-left	设置元素的左外边距	1
margin-right	设置元素的右外边距	1
margin-top	设置元素的上外边距	1

字幕(Marquee) 属性

属性	说明	CSS
marquee-direction	设置内容移动的方向	3
marquee-play-count	设置内容移动多少次	3
marquee-speed	设置内容滚动的速度有多快	3
marquee-style	设置内容移动的样式	3

多列(Multi-column) 属性

属性	说明	CSS
column-count	指定元素应该分为的列数	3
column-fill	指定如何填充列	3
column-gap	指定列之间的差距	3
column-rule	对于设置所有column-rule-*属性的简写属性	3
column-rule-color	指定列之间的颜色规则	3
column-rule-style	指定列之间的样式规则	3
column-rule-width	指定列之间的宽度规则	3
column-span	指定元素应该跨越多少列	3
column-width	指定列的宽度	3
columns	缩写属性设置列宽和列数	3

页面媒体(Paged Media) 属性

属性	思念	CSS
fit	如果其宽度和高度属性都不是auto给出一个提示，如何大规模替换元素	3
fit-position	判定方框内对象的对齐方式	3
image-orientation	指定用户代理适用于图像中的向右或顺时针方向的旋转	3
page	指定一个元素应显示的页面的特定类型	3
size	指定含有BOX的页面内容的大小和方位	3

定位（Positioning）属性

属性	说明	CSS
bottom	设置定位元素下外边距边界与其包含块下边界之间的偏移	2
clear	规定元素的哪一侧不允许其他浮动元素	1
clip	剪裁绝对定位元素	2
cursor	规定要显示的光标的类型（形状）	2
display	规定元素应该生成的框的类型	1
float	规定框是否应该浮动	1
left	设置定位元素左外边距边界与其包含块左边界之间的偏移	2
overflow	规定当内容溢出元素框时发生的事情	2
position	规定元素的定位类型	2
right	设置定位元素右外边距边界与其包含块右边界之间的偏移	2
top	设置定位元素的上外边距边界与其包含块上边界之间的偏移	2
visibility	规定元素是否可见	2
z-index	设置元素的堆叠顺序	2

分页（Print）属性

属性	说明	CSS
orphans	设置当元素内部发生分页时必须在页面底部保留的最少行数	2
page-break-after	设置元素后的分页行为	2
page-break-before	设置元素前的分页行为	2
page-break-inside	设置元素内部的分页行为	2
widows	设置当元素内部发生分页时必须在页面顶部保留的最少行数	2

Ruby 属性

属性	说明	CSS
ruby-align	控制Ruby文本和Ruby基础内容相对彼此的文本对齐方式	3
ruby-overhang	当Ruby文本超过Ruby的基础宽，确定ruby文本是否允许局部悬置任意相邻的文本，除了自己的基础	3
ruby-position	它的base控制Ruby文本的位置	3
ruby-span	控制annotation 元素的跨越行为	3

语音（Speech）属性

属性	说明	CSS
mark	缩写属性设置mark-before和mark-after属性	3
mark-after	允许命名的标记连接到音频流	3
mark-before	允许命名的标记连接到音频流	3
phonemes	指定包含文本的相应元素中的一个音标发音	3
rest	一个缩写属性设置rest-before和rest-after属性	3
rest-after	一个元素的内容讲完之后，指定要休息一下或遵守韵律边界	3
rest-before	一个元素的内容讲完之前，指定要休息一下或遵守韵律边界	3
voice-balance	指定了左，右声道之间的平衡	3
voice-duration	指定应采取呈现所选元素的内容的长度	3
voice-pitch	指定平均说话的声音的音调（频率）	3
voice-pitch-range	指定平均间距的变化	3
voice-rate	控制语速	3
voice-stress	指示着重力度	3
voice-volume	语音合成是指波形输出幅度	3

表格（Table）属性

属性	说明	CSS
border-collapse	规定是否合并表格边框	2
border-spacing	规定相邻单元格边框之间的距离	2
caption-side	规定表格标题的位置	2
empty-cells	规定是否显示表格中的空单元格上的边框和背景	2
table-layout	设置用于表格的布局算法	2

文本（Text）属性

属性	说明	CSS
color	设置文本的颜色	1
direction	规定文本的方向 / 书写方向	2
letter-spacing	设置字符间距	1
line-height	设置行高	1
text-align	规定文本的水平对齐方式	1
text-decoration	规定添加到文本的装饰效果	1
text-indent	规定文本块首行的缩进	1
text-transform	控制文本的大小写	1
unicode-bidi		2
vertical-align	设置元素的垂直对齐方式	1
white-space	设置怎样给一元素控件留白	1
word-spacing	设置单词间距	1
hanging-punctuation	指定一个标点符号是否可能超出行框	3
punctuation-trim	指定一个标点符号是否要去掉	3
text-align-last	当 text-align 设置为 justify 时，最后一行的对齐方式。	3
text-justify	当 text-align 设置为 justify 时指定分散对齐的方式。	3
text-outline	设置文字的轮廓。	3
text-overflow	指定当文本溢出包含的元素，应该发生什么	3
text-shadow	为文本添加阴影	3
text-wrap	指定文本换行规则	3
word-break	指定非CJK文字的断行规则	3
word-wrap	设置浏览器是否对过长的单词进行换行。	3

2D/3D 转换属性

属性	说明	CSS
transform	适用于2D或3D转换的元素	3
transform-origin	允许您更改转化元素位置	3
transform-style	3D空间中的指定如何嵌套元素	3
perspective	指定3D元素是如何查看透视图	3
perspective-origin	指定3D元素底部位置	3
backface-visibility	定义一个元素是否应该是可见的，不对着屏幕时	3

过渡（Transition）属性

属性	说明	CSS
transition	此属性是 transition-property、transition-duration、transition-timing-function、transition-delay 的简写形式。	3
transition-property	设置用来进行过渡的 CSS 属性。	3
transition-duration	设置过渡进行的时间长度。	3
transition-timing-function	设置过渡进行的时序函数。	3
transition-delay	指定过渡开始的时间。	3

用户外观(User-interface) 属性

属性	说明	CSS
appearance	定义元素的外观样式	3
box-sizing	允许您为了适应区域以某种方式定义某些元素	3
icon	为元素指定图标	3
nav-down	指定用户按向下键时向下导航的位置	3
nav-index	指定导航（tab）顺序。	3
nav-left	指定用户按向左键时向左导航的位置	3
nav-right	指定用户按向右键时向右导航的位置	3
nav-up	指定用户按向上键时向上导航的位置a	3
outline-offset	设置轮廓框架在 border 边缘外的偏移	3
resize	定义元素是否可以改变大小	3

CSS 选择器

CSS选择器用于选择你想要的元素的样式的模式。

"CSS"列表示在CSS版本的属性定义（CSS1，CSS2，或对CSS3）。

选择器	示例	示例说明	CSS
.class	.intro	选择所有 class="intro" 的元素	1
#id	#firstname	选择所有 id="firstname" 的元素	1
*	*	选择所有元素	2
element	p	选择所有 <p> 元素	1
element,element	div,p	选择所有 <div> 元素和 <p> 元素	1
element element	div p	选择 <div> 元素内的所有 <p> 元素	1
element>element	div>p	选择所有父级是 <div> 元素的 <p> 元素	2
element+element	div+p	选择所有紧接着 <div> 元素之后的 <p> 元素	2
[attribute]	[target]	选择所有带有 target 属性元素	2
[attribute=value]	[target=-blank]	选择所有使用 target="-blank" 的元素	2
[attribute~=value]	[title~=flower]	选择标题属性包含单词 "flower" 的所有元素	2
[attribute\|=language]	[lang\|=en]	选择一个 lang 属性以 en 为开头的所有元素	2
:link	a:link	选择所有未访问链接	1
:visited	a:visited	选择所有访问过的链接	1
:active	a:active	选择活动链接	1
:hover	a:hover	选择鼠标在链接上面时	1
:focus	input:focus	选择具有焦点的输入元素	2
:first-letter	p:first-letter	选择每一个 <p> 元素的第一个字母	1
:first-line	p:first-line	选择每一个 <p> 元素的第一行	1
:first-child	p:first-child	指定只有当 <p> 元素是其父级的第一个子级的样式。	2
:before	p:before	在每个 <p> 元素之前插入内容	2
:after	p:after	在每个 <p> 元素之后插入内容	2
:lang(language)	p:lang(it)	选择一个 lang 属性的起始值="it"的所有 <p> 元素	2
element1~element2	p~ul	选择 <p> 元素之后的每一个 <ul> 元素	3
[attribute^=value]	a[src^="https"]	选择每一个 src 属性的值以 "https" 开头的元素	3
[attribute$=value]	a[src$=".pdf"]	选择每一个 src 属性的值以 ".pdf" 结尾的元素	3
[attribute=value*]	a[src*="W3Cschool"]	选择每一个 src 属性的值包含子字符串 "W3Cschool" 的元素	3
:first-of-type	p:first-of-type	选择每个 <p> 元素是其父级的第一个 <p> 元素	3
:last-of-type	p:last-of-type	选择每个 <p> 元素是其父级的最后一个 <p> 元素	3
:only-of-type	p:only-of-type	选择每个 <p> 元素是其父级的唯一 <p> 元素	3
:only-child	p:only-child	选择每个 <p> 元素是其父级的唯一子元素	3
:nth-child(n)	p:nth-child(2)	选择每个 <p> 元素是其父级的第二个子元素	3
:nth-last-child(n)	p:nth-last-child(2)	选择每个 <p> 元素的是其父级的第二个子元素，从最后一个子项计数	3
:nth-of-type(n)	p:nth-of-type(2)	选择每个 <p> 元素是其父级的第二个 <p> 元素	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择每个 <p> 元素的是其父级的第二个 <p> 元素，从最后一个子项计数	3
:last-child	p:last-child	选择每个 <p> 元素是其父级的最后一个子级。	3
:root	:root	选择文档的根元素	3
:empty	p:empty	选择每个没有任何子级的 <p> 元素（包括文本节点）	3
:target	#news:target	选择当前活动的 #news 元素（包含该锚名称的点击的 URL ）	3
:enabled	input:enabled	选择每一个已启用的输入元素	3
:disabled	input:disabled	选择每一个禁用的输入元素	3
:checked	input:checked	选择每个选中的输入元素	3
:not(selector)	:not(p)	选择每个并非 <p> 元素的元素	3
::selection	::selection	匹配元素中被用户选中或处于高亮状态的部分	3
:out-of-range	:out-of-range	匹配值在指定区间之外的 <input> 元素	3
:in-range	:in-range	匹配值在指定区间之内的 <input> 元素	3
:read-write	:read-write	用于匹配可读及可写的元素	3
:read-only	:read-only	用于匹配设置 "readonly"（只读）属性的元素	3
:optional	:optional	用于匹配可选的输入元素	3
:required	:required	用于匹配设置了 "required" 属性的元素	3
:valid	:valid	用于匹配输入值为合法的元素	3
:invalid	:invalid	用于匹配输入值为非法的元素	3

CSS 语音参考

听觉样式表使用了语音合成和声音效果的结合，让用户收听信息，而不是读取信息。

有声显示可用于：

失明人士
帮助用户学习阅读
帮助具有阅读问题的用户
家庭娱乐
在车上

听觉呈现通常会把文档转化为纯文本，然后传给屏幕阅读器（可读出屏幕上所有字符的一种程序）。

听觉样式表的一个例子：

h1,h2,h3,h4
{
voice-family:male;
richness:80;
cue-before:url("beep.au")
}

上面的例子用语音合成器播放声音，开头有一个男性的声音说话。

CSS 语音参考手册

CSS"列表示在CSS版本的属性定义（CSS1或CSS2）。

Property	Description	Values	CSS
azimuth	设置声音应该来自哪里	angle left-side far-left left center-left center center-right right far-right right-side behind leftwards rightwards	2
cue	在一个声明中设置cue属性	cue-before cue-after	2
cue-after	指定要播放的声音在一个元素的内容后面	none url	2
cue-before	指定要播放的声音在一个元素的内容前面	none url	2
elevation	设置声音应该来自哪里	angle below level above higher lower	2
pause	在一个声明中设置pause属性	pause-before pause-after	2
pause-after	在一个元素的内容之后，指定暂停	time %	2
pause-before	在一个元素的内容之前，指定暂停	time %	2
pitch	指定讲话声音	frequency x-low low medium high x-high	2
pitch-range	指定讲话声音的变化。（单调的声音或动态的声音？）	number	2
play-during	指定在读一个元素的内容时要播放的声音	auto none url mix repeat	2
richness	指定丰富的讲话声音。（浑厚的声音或细的声音？）	number	2
speak	指定内容是否会提供听觉方式	normal none spell-out	2
speak-header	此属性设置或检索表格标题是在所有的单元格之前发声，还是到一个不与之关联的单元格就结束发声。	always once	2
speak-numeral	设置或检索数字如何发音。	digits continuous	2
speak-punctuation	设置或检索标点字符如何发音	none code	2
speech-rate	指定发言速度	number x-slow slow medium fast x-fast faster slower	2
stress	讲话声音在指定的地方"重音"	number	2
voice-family	设置或检索当前声音类型	specific-voice generic-voice	2
volume	指定发言的音量	number % silent x-soft soft medium loud x-loud	2

CSS Web安全字体组合

常用的字体组合

font-family属性是多种字体的名称，作为一个"应变"制度，以确保浏览器/操作系统之间的最大兼容性。如果浏览器不支持的第一个字体，它尝试下一个的字体。

你想要的字体类型如果浏览器找不到，它会从通用的字体类型中找到与你相似的:

实例

p{font-family:"Times New Roman", Times, serif}

尝试一下 »

下面是一些常用的字体组合，通用的字体系列。

Serif 字体

字体	文本示例
Georgia, serif	This is a heading This is a paragraph
"Palatino Linotype", "Book Antiqua", Palatino, serif	This is a heading This is a paragraph
"Times New Roman", Times, serif	This is a heading This is a paragraph

字体

文本示例

Georgia, serif

This is a heading

This is a paragraph

"Palatino Linotype", "Book Antiqua", Palatino, serif

This is a heading

This is a paragraph

"Times New Roman", Times, serif

This is a heading

This is a paragraph

sans - serif字体

字体	文本示例
Arial, Helvetica, sans-serif	This is a heading This is a paragraph
Arial Black, Gadget, sans-serif	This is a heading This is a paragraph
"Comic Sans MS", cursive, sans-serif	This is a heading This is a paragraph
Impact, Charcoal, sans-serif	This is a heading This is a paragraph
"Lucida Sans Unicode", "Lucida Grande", sans-serif	This is a heading This is a paragraph
Tahoma, Geneva, sans-serif	This is a heading This is a paragraph
"Trebuchet MS", Helvetica, sans-serif	This is a heading This is a paragraph
Verdana, Geneva, sans-serif	This is a heading This is a paragraph

Monospace 字体

字体	文本示例
"Courier New", Courier, monospace	This is a heading This is a paragraph
"Lucida Console", Monaco, monospace	This is a heading This is a paragraph

字体

文本示例

"Courier New", Courier, monospace

This is a heading

This is a paragraph

"Lucida Console", Monaco, monospace

This is a heading

This is a paragraph

CSS 动画

定义和用法

一些 CSS 属性是可以有动画效果的，这意味着它们可以用于动画和过渡。

动画属性可以逐渐地从一个值变化到另一个值，比如尺寸大小、数量、百分比和颜色。

浏览器支持

表格中的数字表示支持该方法的第一个浏览器的版本号。

紧跟在数字后面的 -webkit-, -moz-, 或 -o- 指定了第一个支持该属性的浏览器版本前缀。

动画属性实例

背景颜色逐渐地从红色变化到蓝色：

@keyframes mymove
{
from {background-color:red;}
to {left:blue;}
}

/*Safari 和 Chrome:*/
@-webkit-keyframes mymove
{
from {background-color:red;}
to {background-color:blue;}
}

尝试一下 »

CSS 中的动画属性：

属性	实例
background	尝试一下》
background-color	尝试一下》
background-position	尝试一下》
background-size	尝试一下》
border	尝试一下》
border-bottom	尝试一下》
border-bottom-color	尝试一下》
border-bottom-left-radius	尝试一下》
border-bottom-right-radius	尝试一下》
border-bottom-width	尝试一下》
border-color	尝试一下》
border-left	尝试一下》
border-left-color	尝试一下》
border-left-width	尝试一下》
border-right	尝试一下》
border-right-color	尝试一下》
border-right-width	尝试一下》
border-spacing	尝试一下》
border-top	尝试一下》
border-top-color	尝试一下》
border-top-left-radius	尝试一下》
border-top-right-radius	尝试一下》
border-top-width	尝试一下》
bottom	尝试一下》
box-shadow	尝试一下》
clip	尝试一下》
color	尝试一下》
column-count	尝试一下》
column-gap	尝试一下》
column-rule	尝试一下》
column-rule-color	尝试一下》
column-rule-width	尝试一下》
column-width	尝试一下》
columns	尝试一下》
filter	尝试一下》
flex
flex-basis	尝试一下》
flex-grow	尝试一下》
flex-shrink	尝试一下》
font	尝试一下》
font-size	尝试一下》
font-size-adjust
font-stretch
font-weight	尝试一下》
height	尝试一下》
left	尝试一下》
letter-spacing	尝试一下》
line-height	尝试一下》
margin	尝试一下》
margin-bottom	尝试一下》
margin-left	尝试一下》
margin-right	尝试一下》
margin-top	尝试一下》
max-height	尝试一下》
max-width	尝试一下》
min-height	尝试一下》
min-width	尝试一下》
opacity	尝试一下》
order	尝试一下》
outline	尝试一下》
outline-color	尝试一下》
outline-offset	尝试一下》
outline-width	尝试一下》
padding	尝试一下》
padding-bottom	尝试一下》
padding-left	尝试一下》
padding-right	尝试一下》
padding-top	尝试一下》
perspective	尝试一下》
perspective-origin	尝试一下》
right	尝试一下》
text-decoration-color	尝试一下》
text-indent	尝试一下》
text-shadow	尝试一下》
top	尝试一下》
transform	尝试一下》
transform-origin	尝试一下》
vertical-align	尝试一下》
visibility
width	尝试一下》
word-spacing	尝试一下》
z-index	尝试一下》

CSS 有几个不同的单位用于表示长度。

一些设置 CSS 长度的属性有 width, margin, padding, font-size, border-width等。

长度由一个数字和单位组成如 10px, 2em等。

数字与单位之间不能出现空格。如果长度值为 0，则可以省略单位。

对于一些 CSS 属性，长度可以是负数。

有两种类型的长度单位：相对和绝对。

浏览器支持

下表中的数字表示支持该长度单位的最低浏览器版本。

长度单位
em, ex, %, px, cm, mm, in, pt, pc	1.0	3.0	1.0	1.0	3.5
ch	27.0	9.0	1.0	7.0	20.0
rem	4.0	9.0	3.6	4.1	11.6
vh, vw	20.0	9.0	19.0	6.0	20.0
vmin	20.0	9.0*	19.0	6.0	20.0
vmax	26.0	不支持	19.0	不支持	20.0

注意: Internet Explorer 9 通过不标准的名称 vm 来支持 vmin 。

相对长度

相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。

单位	描述	在线实例
em	它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。一般浏览器字体大小默认为16px，则2em == 32px；	尝试一下
ex	依赖于英文子母小 x 的高度	尝试一下
ch	数字 0 的宽度
rem	根元素（html）的 font-size
vw	viewpoint width，视窗宽度，1vw=视窗宽度的1%	尝试一下
vh	viewpoint height，视窗高度，1vh=视窗高度的1%	尝试一下
vmin	vw和vh中较小的那个。	尝试一下
vmax	vw和vh中较大的那个。	尝试一下
%

	提示: rem与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。

绝对长度

绝对长度单位是一个固定的值，它反应一个真实的物理尺寸。绝对长度单位视输出介质而定，不依赖于环境（显示器、分辨率、操作系统等）。

单位	描述	在线实例
cm	厘米	尝试一下
mm	毫米	尝试一下
in	英寸 (1in = 96px = 2.54cm)	尝试一下
px *	像素 (1px = 1/96th of 1in)	尝试一下
pt	point，大约1/72英寸； (1pt = 1/72in)	尝试一下
pc	pica，大约6pt，1/6英寸； (1pc = 12 pt)	尝试一下

像素或许被认为是最好的"设备像素"，而这种像素长度和你在显示器上看到的文字屏幕像素无关。px实际上是一个按角度度量的单位。

CSS 颜色

颜色是由红（RED），绿（GREEN），蓝（BLUE ）光线的显示结合。

颜色值

CSS中定义颜色使用十六进制（hex）表示法为红，绿，蓝的颜色值结合。可以是最低值是0（十六进制00）到最高值是255（十六进制FF）

3个双位数字的十六进制值写法，以＃符号开始。

Color Examples

Color	Color HEX	Color RGB
	#000000	rgb(0,0,0)
	#FF0000	rgb(255,0,0)
	#00FF00	rgb(0,255,0)
	#0000FF	rgb(0,0,255)
	#FFFF00	rgb(255,255,0)
	#00FFFF	rgb(0,255,255)
	#FF00FF	rgb(255,0,255)
	#C0C0C0	rgb(192,192,192)
	#FFFFFF	rgb(255,255,255)

尝试一下 »

16万个不同的颜色

红，绿，蓝值从0到255的结合，给出了总额超过16万不同的颜色（256 × 256 ×256）。

现代大多数显示器能够显示至少16384种颜色。

如果你看看下面的颜色表，你会看到从0到255不同的红灯颜色。

要看到充满色彩混合时红灯从0到255变化，单击十六进制或RGB值。

红光	16进制值	RGB
	#000000	rgb(0,0,0)
	#080000	rgb(8,0,0)
	#100000	rgb(16,0,0)
	#180000	rgb(24,0,0)
	#200000	rgb(32,0,0)
	#280000	rgb(40,0,0)
	#300000	rgb(48,0,0)
	#380000	rgb(56,0,0)
	#400000	rgb(64,0,0)
	#480000	rgb(72,0,0)
	#500000	rgb(80,0,0)
	#580000	rgb(88,0,0)
	#600000	rgb(96,0,0)
	#680000	rgb(104,0,0)
	#700000	rgb(112,0,0)
	#780000	rgb(120,0,0)
	#800000	rgb(128,0,0)
	#880000	rgb(136,0,0)
	#900000	rgb(144,0,0)
	#980000	rgb(152,0,0)
	#A00000	rgb(160,0,0)
	#A80000	rgb(168,0,0)
	#B00000	rgb(176,0,0)
	#B80000	rgb(184,0,0)
	#C00000	rgb(192,0,0)
	#C80000	rgb(200,0,0)
	#D00000	rgb(208,0,0)
	#D80000	rgb(216,0,0)
	#E00000	rgb(224,0,0)
	#E80000	rgb(232,0,0)
	#F00000	rgb(240,0,0)
	#F80000	rgb(248,0,0)
	#FF0000	rgb(255,0,0)

灰阶

灰阶代表了由最暗到最亮之间不同亮度的层次级别,为了使您更容易选择合适的灰色，我们已编制了灰色色调的表：

Gray Shades	HEX	RGB
	#000000	rgb(0,0,0)
	#080808	rgb(8,8,8)
	#101010	rgb(16,16,16)
	#181818	rgb(24,24,24)
	#202020	rgb(32,32,32)
	#282828	rgb(40,40,40)
	#303030	rgb(48,48,48)
	#383838	rgb(56,56,56)
	#404040	rgb(64,64,64)
	#484848	rgb(72,72,72)
	#505050	rgb(80,80,80)
	#585858	rgb(88,88,88)
	#606060	rgb(96,96,96)
	#686868	rgb(104,104,104)
	#707070	rgb(112,112,112)
	#787878	rgb(120,120,120)
	#808080	rgb(128,128,128)
	#888888	rgb(136,136,136)
	#909090	rgb(144,144,144)
	#989898	rgb(152,152,152)
	#A0A0A0	rgb(160,160,160)
	#A8A8A8	rgb(168,168,168)
	#B0B0B0	rgb(176,176,176)
	#B8B8B8	rgb(184,184,184)
	#C0C0C0	rgb(192,192,192)
	#C8C8C8	rgb(200,200,200)
	#D0D0D0	rgb(208,208,208)
	#D8D8D8	rgb(216,216,216)
	#E0E0E0	rgb(224,224,224)
	#E8E8E8	rgb(232,232,232)
	#F0F0F0	rgb(240,240,240)
	#F8F8F8	rgb(248,248,248)
	#FFFFFF	rgb(255,255,255)

网络安全色?

若干年前，当计算机支持最大256个不同的颜色，一个216"网络安全颜色"列表被建议作为Web标准，保留了40个固定的系统颜色。

这在现在看来不是很重要，因为大多数计算机可以显示数百万种不同的色彩，但选择是留给你。

跨浏览器的调色板创建，以确保所有的计算机将显示正确的颜色，运行一个256色调色板：

000000	000033	000066	000099	0000CC	0000FF
003300	003333	003366	003399	0033CC	0033FF
006600	006633	006666	006699	0066CC	0066FF
009900	009933	009966	009999	0099CC	0099FF
00CC00	00CC33	00CC66	00CC99	00CCCC	00CCFF
00FF00	00FF33	00FF66	00FF99	00FFCC	00FFFF
330000	330033	330066	330099	3300CC	3300FF
333300	333333	333366	333399	3333CC	3333FF
336600	336633	336666	336699	3366CC	3366FF
339900	339933	339966	339999	3399CC	3399FF
33CC00	33CC33	33CC66	33CC99	33CCCC	33CCFF
33FF00	33FF33	33FF66	33FF99	33FFCC	33FFFF
660000	660033	660066	660099	6600CC	6600FF
663300	663333	663366	663399	6633CC	6633FF
666600	666633	666666	666699	6666CC	6666FF
669900	669933	669966	669999	6699CC	6699FF
66CC00	66CC33	66CC66	66CC99	66CCCC	66CCFF
66FF00	66FF33	66FF66	66FF99	66FFCC	66FFFF
990000	990033	990066	990099	9900CC	9900FF
993300	993333	993366	993399	9933CC	9933FF
996600	996633	996666	996699	9966CC	9966FF
999900	999933	999966	999999	9999CC	9999FF
99CC00	99CC33	99CC66	99CC99	99CCCC	99CCFF
99FF00	99FF33	99FF66	99FF99	99FFCC	99FFFF
CC0000	CC0033	CC0066	CC0099	CC00CC	CC00FF
CC3300	CC3333	CC3366	CC3399	CC33CC	CC33FF
CC6600	CC6633	CC6666	CC6699	CC66CC	CC66FF
CC9900	CC9933	CC9966	CC9999	CC99CC	CC99FF
CCCC00	CCCC33	CCCC66	CCCC99	CCCCCC	CCCCFF
CCFF00	CCFF33	CCFF66	CCFF99	CCFFCC	CCFFFF
FF0000	FF0033	FF0066	FF0099	FF00CC	FF00FF
FF3300	FF3333	FF3366	FF3399	FF33CC	FF33FF
FF6600	FF6633	FF6666	FF6699	FF66CC	FF66FF
FF9900	FF9933	FF9966	FF9999	FF99CC	FF99FF
FFCC00	FFCC33	FFCC66	FFCC99	FFCCCC	FFCCFF
FFFF00	FFFF33	FFFF66	FFFF99	FFFFCC	FFFFFF

CSS 合法颜色值

CSS Colors

CSS的颜色可以通过以下方法指定：

十六进制颜色
RGB颜色
RGBA颜色
HSL色彩
HSLA颜色
预定义/跨浏览器的颜色名称

十六进制颜色

所有主要浏览器都支持十六进制颜色值。

指定一个十六进制的颜色其组成部分是：＃RRGGBB，其中RR（红色），GG（绿色）和BB（蓝色）。所有值必须介于0和FF之间。

<p例如，＃0000FF值呈现为蓝色，因为蓝色的组成设置为最高值（FF）而其他设置为0。

实例

p
{
background-color:#ff0000;
}

尝试一下 »

RGB颜色

RGB颜色值在所有主要浏览器都支持。

RGB颜色值指定：RGB（红，绿，蓝）。每个参数（红色，绿色和蓝色）定义颜色的亮度，可在0和255之间，或一个百分比值（从0％到100％）之间的整数。

例如RGB（0,0,255）值呈现为蓝色，因为蓝色的参数设置为最高值（255）而其他设置为0。

此外，下面的值定义相同的颜色：RGB（0,0,255），RGB（0％，0％，100％）。

实例

p
{
background-color:rgb(255,0,0);
}

尝试一下 »

RGBA颜色

RGBA颜色值被IE9, Firefox3+, Chrome, Safari,和Opera10+支持。

RGBA颜色值是RGB颜色值alpha通道的延伸 - 指定对象的透明度。

RGBA颜色值指定：RGBA（红，绿，蓝，alpha）。 Alpha参数是一个介于0.0（完全透明）和1.0（完全不透明）之间的参数。

实例

p
{
background-color:rgba(255,0,0,0.5);
}

尝试一下 »

HSL颜色

IE9, Firefox, Chrome, Safari,和Opera 10+.支持HSL颜色值。

HSL代表色相，饱和度和亮度 - 使用色彩圆柱坐标表示。

HSL颜色值指定：HSL（色调，饱和度，明度）。

色相是在色轮上的程度（从0到360）-0（或360）是红色的，120是绿色的，240是蓝色的。饱和度是一个百分比值;0％意味着灰色和100％的阴影，是全彩。亮度也是一个百分点;0％是黑色的，100％是白色的。

实例

p
{
background-color:hsl(120,65%,75%);
}

尝试一下 »

HSLA颜色

HSLA颜色值被IE9, Firefox3+, Chrome, Safari,和Opera10+.支持.

HSLA的颜色值是一个带有alpha通道的HSL颜色值的延伸 - 指定对象的透明度。

指定HSLA颜色值：HSLA（色调，饱和度，亮度，α），α是Alpha参数定义的不透明度。 Alpha参数是一个介于0.0（完全透明）和1.0（完全不透明）之间的参数。

实例

p
{
background-color:hsla(120,65%,75%,0.3);
}

尝试一下 »

预定义/跨浏览器的颜色名称

147是在HTML和CSS颜色规范预定义的颜色名称。你可以查看我们的预定义颜色名称表。

CSS 颜色名称

所有浏览器都支持颜色名称

147颜色名称定义在HTML和CSS的颜色规格(17个标准色加上130多个其他)。下表列出了所有这些，连同其十六进制值。

Remark 提示: 17种标准颜色：浅绿色，黑色，蓝色，紫红色，灰色，灰色，绿色，石灰，栗色，海军，橄榄，紫，红，银，蓝绿色，白色和黄色。

点击颜色的名称或十六进制值，伴随着不同的颜色名称或值其背景颜色会改变:

按颜色名称排序

列表按十六进制值进行排序

Color Name	HEX	Color
AliceBlue	#F0F8FF
AntiqueWhite	#FAEBD7
Aqua	#00FFFF
Aquamarine	#7FFFD4
Azure	#F0FFFF
Beige	#F5F5DC
Bisque	#FFE4C4
Black	#000000
BlanchedAlmond	#FFEBCD
Blue	#0000FF
BlueViolet	#8A2BE2
Brown	#A52A2A
BurlyWood	#DEB887
CadetBlue	#5F9EA0
Chartreuse	#7FFF00
Chocolate	#D2691E
Coral	#FF7F50
CornflowerBlue	#6495ED
Cornsilk	#FFF8DC
Crimson	#DC143C
Cyan	#00FFFF
DarkBlue	#00008B
DarkCyan	#008B8B
DarkGoldenRod	#B8860B
DarkGray	#A9A9A9
DarkGreen	#006400
DarkKhaki	#BDB76B
DarkMagenta	#8B008B
DarkOliveGreen	#556B2F
DarkOrange	#FF8C00
DarkOrchid	#9932CC
DarkRed	#8B0000
DarkSalmon	#E9967A
DarkSeaGreen	#8FBC8F
DarkSlateBlue	#483D8B
DarkSlateGray	#2F4F4F
DarkTurquoise	#00CED1
DarkViolet	#9400D3
DeepPink	#FF1493
DeepSkyBlue	#00BFFF
DimGray	#696969
DodgerBlue	#1E90FF
FireBrick	#B22222
FloralWhite	#FFFAF0
ForestGreen	#228B22
Fuchsia	#FF00FF
Gainsboro	#DCDCDC
GhostWhite	#F8F8FF
Gold	#FFD700
GoldenRod	#DAA520
Gray	#808080
Green	#008000
GreenYellow	#ADFF2F
HoneyDew	#F0FFF0
HotPink	#FF69B4
IndianRed	#CD5C5C
Indigo	#4B0082
Ivory	#FFFFF0
Khaki	#F0E68C
Lavender	#E6E6FA
LavenderBlush	#FFF0F5
LawnGreen	#7CFC00
LemonChiffon	#FFFACD
LightBlue	#ADD8E6
LightCoral	#F08080
LightCyan	#E0FFFF
LightGoldenRodYellow	#FAFAD2
LightGray	#D3D3D3
LightGreen	#90EE90
LightPink	#FFB6C1
LightSalmon	#FFA07A
LightSeaGreen	#20B2AA
LightSkyBlue	#87CEFA
LightSlateGray	#778899
LightSteelBlue	#B0C4DE
LightYellow	#FFFFE0
Lime	#00FF00
LimeGreen	#32CD32
Linen	#FAF0E6
Magenta	#FF00FF
Maroon	#800000
MediumAquaMarine	#66CDAA
MediumBlue	#0000CD
MediumOrchid	#BA55D3
MediumPurple	#9370DB
MediumSeaGreen	#3CB371
MediumSlateBlue	#7B68EE
MediumSpringGreen	#00FA9A
MediumTurquoise	#48D1CC
MediumVioletRed	#C71585
MidnightBlue	#191970
MintCream	#F5FFFA
MistyRose	#FFE4E1
Moccasin	#FFE4B5
NavajoWhite	#FFDEAD
Navy	#000080
OldLace	#FDF5E6
Olive	#808000
OliveDrab	#6B8E23
Orange	#FFA500
OrangeRed	#FF4500
Orchid	#DA70D6
PaleGoldenRod	#EEE8AA
PaleGreen	#98FB98
PaleTurquoise	#AFEEEE
PaleVioletRed	#DB7093
PapayaWhip	#FFEFD5
PeachPuff	#FFDAB9
Peru	#CD853F
Pink	#FFC0CB
Plum	#DDA0DD
PowderBlue	#B0E0E6
Purple	#800080
Red	#FF0000
RosyBrown	#BC8F8F
RoyalBlue	#4169E1
SaddleBrown	#8B4513
Salmon	#FA8072
SandyBrown	#F4A460
SeaGreen	#2E8B57
SeaShell	#FFF5EE
Sienna	#A0522D
Silver	#C0C0C0
SkyBlue	#87CEEB
SlateBlue	#6A5ACD
SlateGray	#708090
Snow	#FFFAFA
SpringGreen	#00FF7F
SteelBlue	#4682B4
Tan	#D2B48C
Teal	#008080
Thistle	#D8BFD8
Tomato	#FF6347
Turquoise	#40E0D0
Violet	#EE82EE
Wheat	#F5DEB3
White	#FFFFFF
WhiteSmoke	#F5F5F5
Yellow	#FFFF00
YellowGreen	#9ACD32

CSS 颜色十六进制值

按十六进制值排序

列表按颜色名称进行排序

Color Name	HEX	Color
Black	#000000
Navy	#000080
DarkBlue	#00008B
MediumBlue	#0000CD
Blue	#0000FF
DarkGreen	#006400
Green	#008000
Teal	#008080
DarkCyan	#008B8B
DeepSkyBlue	#00BFFF
DarkTurquoise	#00CED1
MediumSpringGreen	#00FA9A
Lime	#00FF00
SpringGreen	#00FF7F
Aqua	#00FFFF
Cyan	#00FFFF
MidnightBlue	#191970
DodgerBlue	#1E90FF
LightSeaGreen	#20B2AA
ForestGreen	#228B22
SeaGreen	#2E8B57
DarkSlateGray	#2F4F4F
LimeGreen	#32CD32
MediumSeaGreen	#3CB371
Turquoise	#40E0D0
RoyalBlue	#4169E1
SteelBlue	#4682B4
DarkSlateBlue	#483D8B
MediumTurquoise	#48D1CC
Indigo	#4B0082
DarkOliveGreen	#556B2F
CadetBlue	#5F9EA0
CornflowerBlue	#6495ED
MediumAquaMarine	#66CDAA
DimGray	#696969
SlateBlue	#6A5ACD
OliveDrab	#6B8E23
SlateGray	#708090
LightSlateGray	#778899
MediumSlateBlue	#7B68EE
LawnGreen	#7CFC00
Chartreuse	#7FFF00
Aquamarine	#7FFFD4
Maroon	#800000
Purple	#800080
Olive	#808000
Gray	#808080
SkyBlue	#87CEEB
LightSkyBlue	#87CEFA
BlueViolet	#8A2BE2
DarkRed	#8B0000
DarkMagenta	#8B008B
SaddleBrown	#8B4513
DarkSeaGreen	#8FBC8F
LightGreen	#90EE90
MediumPurple	#9370DB
DarkViolet	#9400D3
PaleGreen	#98FB98
DarkOrchid	#9932CC
YellowGreen	#9ACD32
Sienna	#A0522D
Brown	#A52A2A
DarkGray	#A9A9A9
LightBlue	#ADD8E6
GreenYellow	#ADFF2F
PaleTurquoise	#AFEEEE
LightSteelBlue	#B0C4DE
PowderBlue	#B0E0E6
FireBrick	#B22222
DarkGoldenRod	#B8860B
MediumOrchid	#BA55D3
RosyBrown	#BC8F8F
DarkKhaki	#BDB76B
Silver	#C0C0C0
MediumVioletRed	#C71585
IndianRed	#CD5C5C
Peru	#CD853F
Chocolate	#D2691E
Tan	#D2B48C
LightGray	#D3D3D3
Thistle	#D8BFD8
Orchid	#DA70D6
GoldenRod	#DAA520
PaleVioletRed	#DB7093
Crimson	#DC143C
Gainsboro	#DCDCDC
Plum	#DDA0DD
BurlyWood	#DEB887
LightCyan	#E0FFFF
Lavender	#E6E6FA
DarkSalmon	#E9967A
Violet	#EE82EE
PaleGoldenRod	#EEE8AA
LightCoral	#F08080
Khaki	#F0E68C
AliceBlue	#F0F8FF
HoneyDew	#F0FFF0
Azure	#F0FFFF
SandyBrown	#F4A460
Wheat	#F5DEB3
Beige	#F5F5DC
WhiteSmoke	#F5F5F5
MintCream	#F5FFFA
GhostWhite	#F8F8FF
Salmon	#FA8072
AntiqueWhite	#FAEBD7
Linen	#FAF0E6
LightGoldenRodYellow	#FAFAD2
OldLace	#FDF5E6
Red	#FF0000
Fuchsia	#FF00FF
Magenta	#FF00FF
DeepPink	#FF1493
OrangeRed	#FF4500
Tomato	#FF6347
HotPink	#FF69B4
Coral	#FF7F50
DarkOrange	#FF8C00
LightSalmon	#FFA07A
Orange	#FFA500
LightPink	#FFB6C1
Pink	#FFC0CB
Gold	#FFD700
PeachPuff	#FFDAB9
NavajoWhite	#FFDEAD
Moccasin	#FFE4B5
Bisque	#FFE4C4
MistyRose	#FFE4E1
BlanchedAlmond	#FFEBCD
PapayaWhip	#FFEFD5
LavenderBlush	#FFF0F5
SeaShell	#FFF5EE
Cornsilk	#FFF8DC
LemonChiffon	#FFFACD
FloralWhite	#FFFAF0
Snow	#FFFAFA
Yellow	#FFFF00
LightYellow	#FFFFE0
Ivory	#FFFFF0
White	#FFFFFF

CSS3 浏览器支持参考手册

Note W3CSchool CSS3的浏览器支持参考会定期与所有主要浏览器进行测试。

CSS3 浏览器支持

对CSS3是没有一个W3C标准的，但全部的主流浏览器都已经支持许多新的功能。下面是有关所有的新的CSS3属性和他们的浏览器支持的参考：

属性	IE	Firefox	Chrome	Safari	Opera
alignment-adjust
alignment-baseline
@keyframes	10	16			12.1
animation	10	16			12.1
animation-name	10	16			12.1
animation-duration	10	16			12.1
animation-timing-function	10	16			12.1
animation-delay	10	16			12.1
animation-iteration-count	10	16			12.1
animation-direction	10	16			12.1
animation-play-state	10	16			12.1
appearance		3
backface-visibility	10
background-clip	9	4	4	5	10.5
background-origin	9	4	4	5	10.5
background-size	9	4	4	5	10.5
baseline-shift
bookmark-label
bookmark-level
bookmark-target
border-bottom-left-radius	9	4	5	5	10.5
border-bottom-right-radius	9	4	5	5	10.5
border-image		15	16	6	11
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-radius	9	4	5	5	10.5
border-top-left-radius	9	4	5	5	10.5
border-top-right-radius	9	4	5	5	10.5
box-decoration-break
box-align
box-direction
box-flex					12.1
box-flex-group
box-lines
box-ordinal-group
box-orient
box-pack
box-shadow	9	4	10	5.1	10.5
box-sizing	8		10	5.1	9.5
color-profile
column-fill
column-gap	10				11.1
column-rule	10				11.1
column-rule-color	10				11.1
column-rule-style	10				11.1
column-rule-width	10				11.1
column-span	10				11.1
column-width	10				11.1
columns	10				11.1
column-count	10				11.1
crop
dominant-baseline
drop-initial-after-adjust
drop-initial-after-align
drop-initial-before-adjust
drop-initial-before-align
drop-initial-size
drop-initial-value
fit
fit-position
float-offset
@font-face	9	3.6	4	3	10
font-size-adjust		2
font-stretch
grid-columns
grid-rows
hanging-punctuation
hyphenate-after
hyphenate-before
hyphenate-characters
hyphenate-lines
hyphenate-resource
hyphens
icon
image-orientation
image-resolution
inline-box-align
line-stacking
line-stacking-ruby
line-stacking-shift
line-stacking-strategy
mark
mark-after
mark-before
marks
marquee-direction
marquee-play-count
marquee-speed
marquee-style
move-to
nav-down					11.5
nav-index					11.5
nav-left					11.5
nav-right					11.5
nav-up					11.5
opacity	9	2	4	3.1	9
outline-offset					11
overflow-style
overflow-x	9	2
overflow-y	9	2
page
page-policy
perspective				5
perspective-origin
punctuation-trim
rendering-intent
resize		5	4	4
rest
rest-after
rest-before
rotation
rotation-point
ruby-align
ruby-overhang
ruby-position
ruby-span
size
string-set
target
target-name
target-new
target-position
text-align-last
text-emphasis
text-height
text-justify	5
text-outline
text-overflow	6	7	4	3.1	11
text-shadow	10	3.5	4	4	9.5
text-wrap
transform	10	16			12.1
transform-origin	10	16			12.1
transform-style				5
transition	10	16	26		12.1
transition-property	10	16	26		12.1
transition-duration	10	16	26		12.1
transition-timing-function	10	16	26		12.1
transition-delay	10	16	26		12.1
word-break	5.5	15	4	3
word-wrap	5	3.5	4	3.1	10.5

图标说明

	IE浏览器
	火狐浏览器
	Google Chrome浏览器
	Safari浏览器
	Opera浏览器

	前缀-ms-的IE浏览器
	前缀-moz-的火狐浏览器
	前缀-webkit-的Google Chrome浏览器
	前缀-webkit-的Safari浏览器
	前缀-o-的Opera浏览器
	前缀-xv-的Opera浏览器

对于某些属性，你会看到浏览器的图标和一个数字：

10.5

数字表示是第一次支持该属性的浏览器版本。

CSS 属性

CSS 属性组：

"CSS" 列指示属性是在哪个 CSS 版本中定义的 (CSS1, CSS2, 或者 CSS3).

动画属性

属性	描述	CSS
@keyframes	定义一个动画,@keyframes定义的动画名称用来被animation-name所使用。	3
animation	复合属性。检索或设置对象所应用的动画特效。	3
animation-name	检索或设置对象所应用的动画名称 ,必须与规则@keyframes配合使用，因为动画名称由@keyframes定义	3
animation-duration	检索或设置对象动画的持续时间	3
animation-timing-function	检索或设置对象动画的过渡类型	3
animation-delay	检索或设置对象动画的延迟时间	3
animation-iteration-count	检索或设置对象动画的循环次数	3
animation-direction	检索或设置对象动画在循环中是否反向运动	3
animation-play-state	检索或设置对象动画的状态	3

背景属性

属性	描述	CSS
background	复合属性。设置对象的背景特性。	1
background-attachment	设置或检索背景图像是随对象内容滚动还是固定的。必须先指定background-image属性。	1
background-color	设置或检索对象的背景颜色。	1
background-image	设置或检索对象的背景图像。	1
background-position	设置或检索对象的背景图像位置。必须先指定background-image属性。	1
background-repeat	设置或检索对象的背景图像如何铺排填充。必须先指定background-image属性。	1
background-clip	指定对象的背景图像向外裁剪的区域。	3
background-origin	S设置或检索对象的背景图像计算background-position时的参考原点(位置)。	3
background-size	检索或设置对象的背景图像的尺寸大小。	3

边框(Border) 和轮廓(Outline) 属性

属性	描述	CSS
border	复合属性。设置对象边框的特性。	1
border-bottom	复合属性。设置对象底部边框的特性。	1
border-bottom-color	设置或检索对象的底部边框颜色。	1
border-bottom-style	设置或检索对象的底部边框样式。	1
border-bottom-width	设置或检索对象的底部边框宽度。	1
border-color	置或检索对象的边框颜色。	1
border-left	复合属性。设置对象左边边框的特性。	1
border-left-color	设置或检索对象的左边边框颜色。	1
border-left-style	设置或检索对象的左边边框样式。	1
border-left-width	设置或检索对象的左边边框宽度。	1
border-right	复合属性。设置对象右边边框的特性。	1
border-right-color	设置或检索对象的右边边框颜色。	1
border-right-style	设置或检索对象的右边边框样式。	1
border-right-width	设置或检索对象的右边边框宽度。	1
border-style	设置或检索对象的边框样式。	1
border-top	复合属性。设置对象顶部边框的特性。	1
border-top-color	设置或检索对象的顶部边框颜色	1
border-top-style	设置或检索对象的顶部边框样式。	1
border-top-width	设置或检索对象的顶部边框宽度。	1
border-width	设置或检索对象的边框宽度。	1
outline	复合属性。设置或检索对象外的线条轮廓。	2
outline-color	设置或检索对象外的线条轮廓的颜色。	2
outline-style	设置或检索对象外的线条轮廓的样式。	2
outline-width	设置或检索对象外的线条轮廓的宽度。	2
border-bottom-left-radius	设置或检索对象的左下角圆角边框。提供2个参数，2个参数以空格分隔，每个参数允许设置1个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数	3
border-bottom-right-radius	设置或检索对象的右下角圆角边框。	3
border-image	设置或检索对象的边框样式使用图像来填充。	3
border-image-outset	规定边框图像超过边框的量。	3
border-image-repeat	规定图像边框是否应该被重复（repeated）、拉伸（stretched）或铺满（rounded）。	3
border-image-slice	规定图像边框的向内偏移。	3
border-image-source	规定要使用的图像，代替 border-style 属性中设置的边框样式。	3
border-image-width	规定图像边框的宽度。	3
border-radius	设置或检索对象使用圆角边框。	3
border-top-left-radius	定义左上角边框的形状。	3
border-top-right-radius	定义右下角边框的形状。	3
box-decoration-break	规定行内元素被折行	3
box-shadow	向方框添加一个或多个阴影。	3

盒子(Box) 属性

属性	描述	CSS
overflow-x	如果内容溢出了元素内容区域，是否对内容的左/右边缘进行裁剪。	3
overflow-y	如果内容溢出了元素内容区域，是否对内容的上/下边缘进行裁剪。	3
overflow-style	规定溢出元素的首选滚动方法。	3
rotation	围绕由 rotation-point 属性定义的点对元素进行旋转。	3
rotation-point	定义距离上左边框边缘的偏移点。	3

颜色(Color) 属性

属性	描述	CSS
color-profile	允许使用源的颜色配置文件的默认以外的规范	3
opacity	设置一个元素的透明度级别	3
rendering-intent	允许超过默认颜色配置文件渲染意向的其他规范	3

内边距(Padding) 属性

属性	说明	CSS
padding	在一个声明中设置所有填充属性	1
padding-bottom	设置元素的底填充	1
padding-left	设置元素的左填充	1
padding-right	设置元素的右填充	1
padding-top	设置元素的顶部填充	1

媒体页面内容属性

属性	说明	CSS
bookmark-label	指定书签的标签	3
bookmark-level	指定了书签级别	3
bookmark-target	指定了书签链接的目标	3
float-offset	在相反的方向推动浮动元素，他们一直具有浮动	3
hyphenate-after	指定一个断字的单词断字字符后的最少字符数	3
hyphenate-before	指定一个断字的单词断字字符前的最少字符数	3
hyphenate-character	指定了当一个断字发生时，要显示的字符串	3
hyphenate-lines	表示连续断字的行在元素的最大数目	3
hyphenate-resource	外部资源指定一个逗号分隔的列表，可以帮助确定浏览器的断字点	3
hyphens	设置如何分割单词以改善该段的布局	3
image-resolution	指定了正确的图像分辨率	3
marks	将crop and/or cross标志添加到文档	3
string-set		3

尺寸(Dimension) 属性

属性	描述	CSS
height	设置元素的高度	1
max-height	设置元素的最大高度	2
max-width	设置元素的最大宽度	2
min-height	设置元素的最小高度	2
min-width	设置元素的最小宽度	2
width	设置元素的宽度	1

弹性盒子模型（Flexible Box）属性(新)

属性	说明	CSS
flex	复合属性。设置或检索弹性盒模型对象的子元素如何分配空间。	3
flex-grow	设置或检索弹性盒的扩展比率。	3
flex-shrink	设置或检索弹性盒的收缩比率。	3
flex-basis	设置或检索弹性盒伸缩基准值。	3
flex-flow	复合属性。设置或检索弹性盒模型对象的子元素排列方式。	3
flex-direction	该属性通过定义flex容器的主轴方向来决定felx子项在flex容器中的位置。	3
flex-wrap	该属性控制flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。	3
align-content	在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）。	3
align-items	定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。	3
align-self	定义flex子项单独在侧轴（纵轴）方向上的对齐方式。	3
justify-content	设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。	3
order	设置或检索弹性盒模型对象的子元素出现的順序。	3

弹性盒子模型（Flexible Box）属性(旧)

属性	说明	CSS
box-align	指定如何对齐一个框的子元素	3
box-direction	指定在哪个方向，显示一个框的子元素	3
box-flex	指定一个框的子元素是否是灵活的或固定的大小	3
box-flex-group	指派灵活的元素到Flex组	3
box-lines	每当它在父框的空间运行时，是否指定将再上一个新的行列	3
box-ordinal-group	指定一个框的子元素的显示顺序	3
box-orient	指定一个框的子元素是否在水平或垂直方向应铺设	3
box-pack	指定横向盒在垂直框的水平位置和垂直位置	3

字体（Font）属性

属性	说明	CSS
font	在一个声明中设置所有字体属性	1
font-family	规定文本的字体系列	1
font-size	规定文本的字体尺寸	1
font-style	规定文本的字体样式	1
font-variant	规定文本的字体样式	1
font-weight	规定字体的粗细	1
@font-face	一个规则，允许网站下载并使用其他超过"Web- safe"字体的字体	3
font-size-adjust	为元素规定 aspect 值	3
font-stretch	收缩或拉伸当前的字体系列	3

内容生成属性(Generated Content Properties)

属性	说明	CSS
content	与 :before 以及 :after 伪元素配合使用，来插入生成内容	2
counter-increment	递增或递减一个或多个计数器	2
counter-reset	创建或重置一个或多个计数器	2
quotes	设置嵌套引用的引号类型	2
crop	允许replaced元素只是作为一个对象代替整个对象的矩形区域	3
move-to	Causes an element to be removed from the flow and reinserted at a later point in the document	3
page-policy	判定基于页面的给定元素的适用于计数器的字符串值	3

网格（Grid）属性

属性	说明	CSS
grid-columns	指定在网格中每列的宽度	3
grid-rows	指定在网格中每列的高度	3

超链接(Hyperlink) 属性

属性	说明	CSS
target	简写属性设置target-name, target-new,和target-position属性	3
target-name	指定在何处打开链接（目标位置）	3
target-new	指定是否有新的目标链接打开一个新窗口或在现有窗口打开新标签	3
target-position	指定应该放置新的目标链接的位置	3

线框(Linebox) 属性

属性	说明	CSS
alignment-adjust	允许更精确的元素的对齐方式	3
alignment-baseline	其父级指定的内联级别的元素如何对齐	3
baseline-shift	允许重新定位相对于dominant-baseline的dominant-baseline	3
dominant-baseline	指定scaled-baseline-table	3
drop-initial-after-adjust	设置下拉的主要连接点的初始对齐点	3
drop-initial-after-align	校准行内的初始行的设置就是具有首字母的框使用初级连接点	3
drop-initial-before-adjust	设置下拉的辅助连接点的初始对齐点	3
drop-initial-before-align	校准行内的初始行的设置就是具有首字母的框使用辅助连接点	3
drop-initial-size	控制局部的首字母下沉	3
drop-initial-value	激活一个下拉式的初步效果	3
inline-box-align	设置一个多行的内联块内的行具有前一个和后一个内联元素的对齐	3
line-stacking	一个速记属性设置line-stacking-strategy, line-stacking-ruby,和line-stacking-shift属性	3
line-stacking-ruby	设置包含Ruby注释元素的行对于块元素的堆叠方法	3
line-stacking-shift	设置base-shift行中块元素包含元素的堆叠方法	3
line-stacking-strategy	设置内部包含块元素的堆叠线框的堆叠方法	3
text-height	行内框的文本内容区域设置block-progression维数	3

列表(List) 属性

属性	说明	CSS
list-style	在一个声明中设置所有的列表属性	1
list-style-image	将图象设置为列表项标记	1
list-style-position	设置列表项标记的放置位置	1
list-style-type	设置列表项标记的类型	1

外边距(Margin) 属性

属性	说明	CSS
margin	在一个声明中设置所有外边距属性	1
margin-bottom	设置元素的下外边距	1
margin-left	设置元素的左外边距	1
margin-right	设置元素的右外边距	1
margin-top	设置元素的上外边距	1

字幕(Marquee) 属性

属性	说明	CSS
marquee-direction	设置内容移动的方向	3
marquee-play-count	设置内容移动多少次	3
marquee-speed	设置内容滚动的速度有多快	3
marquee-style	设置内容移动的样式	3

多列(Multi-column) 属性

属性	说明	CSS
column-count	指定元素应该分为的列数	3
column-fill	指定如何填充列	3
column-gap	指定列之间的差距	3
column-rule	对于设置所有column-rule-*属性的简写属性	3
column-rule-color	指定列之间的颜色规则	3
column-rule-style	指定列之间的样式规则	3
column-rule-width	指定列之间的宽度规则	3
column-span	指定元素应该跨越多少列	3
column-width	指定列的宽度	3
columns	缩写属性设置列宽和列数	3

页面媒体(Paged Media) 属性

属性	思念	CSS
fit	如果其宽度和高度属性都不是auto给出一个提示，如何大规模替换元素	3
fit-position	判定方框内对象的对齐方式	3
image-orientation	指定用户代理适用于图像中的向右或顺时针方向的旋转	3
page	指定一个元素应显示的页面的特定类型	3
size	指定含有BOX的页面内容的大小和方位	3

定位（Positioning）属性

属性	说明	CSS
bottom	设置定位元素下外边距边界与其包含块下边界之间的偏移	2
clear	规定元素的哪一侧不允许其他浮动元素	1
clip	剪裁绝对定位元素	2
cursor	规定要显示的光标的类型（形状）	2
display	规定元素应该生成的框的类型	1
float	规定框是否应该浮动	1
left	设置定位元素左外边距边界与其包含块左边界之间的偏移	2
overflow	规定当内容溢出元素框时发生的事情	2
position	规定元素的定位类型	2
right	设置定位元素右外边距边界与其包含块右边界之间的偏移	2
top	设置定位元素的上外边距边界与其包含块上边界之间的偏移	2
visibility	规定元素是否可见	2
z-index	设置元素的堆叠顺序	2

分页（Print）属性

属性	说明	CSS
orphans	设置当元素内部发生分页时必须在页面底部保留的最少行数	2
page-break-after	设置元素后的分页行为	2
page-break-before	设置元素前的分页行为	2
page-break-inside	设置元素内部的分页行为	2
widows	设置当元素内部发生分页时必须在页面顶部保留的最少行数	2

Ruby 属性

属性	说明	CSS
ruby-align	控制Ruby文本和Ruby基础内容相对彼此的文本对齐方式	3
ruby-overhang	当Ruby文本超过Ruby的基础宽，确定ruby文本是否允许局部悬置任意相邻的文本，除了自己的基础	3
ruby-position	它的base控制Ruby文本的位置	3
ruby-span	控制annotation 元素的跨越行为	3

语音（Speech）属性

属性	说明	CSS
mark	缩写属性设置mark-before和mark-after属性	3
mark-after	允许命名的标记连接到音频流	3
mark-before	允许命名的标记连接到音频流	3
phonemes	指定包含文本的相应元素中的一个音标发音	3
rest	一个缩写属性设置rest-before和rest-after属性	3
rest-after	一个元素的内容讲完之后，指定要休息一下或遵守韵律边界	3
rest-before	一个元素的内容讲完之前，指定要休息一下或遵守韵律边界	3
voice-balance	指定了左，右声道之间的平衡	3
voice-duration	指定应采取呈现所选元素的内容的长度	3
voice-pitch	指定平均说话的声音的音调（频率）	3
voice-pitch-range	指定平均间距的变化	3
voice-rate	控制语速	3
voice-stress	指示着重力度	3
voice-volume	语音合成是指波形输出幅度	3

表格（Table）属性

属性	说明	CSS
border-collapse	规定是否合并表格边框	2
border-spacing	规定相邻单元格边框之间的距离	2
caption-side	规定表格标题的位置	2
empty-cells	规定是否显示表格中的空单元格上的边框和背景	2
table-layout	设置用于表格的布局算法	2

文本（Text）属性

属性	说明	CSS
color	设置文本的颜色	1
direction	规定文本的方向 / 书写方向	2
letter-spacing	设置字符间距	1
line-height	设置行高	1
text-align	规定文本的水平对齐方式	1
text-decoration	规定添加到文本的装饰效果	1
text-indent	规定文本块首行的缩进	1
text-transform	控制文本的大小写	1
unicode-bidi		2
vertical-align	设置元素的垂直对齐方式	1
white-space	设置怎样给一元素控件留白	1
word-spacing	设置单词间距	1
hanging-punctuation	指定一个标点符号是否可能超出行框	3
punctuation-trim	指定一个标点符号是否要去掉	3
text-align-last	当 text-align 设置为 justify 时，最后一行的对齐方式。	3
text-justify	当 text-align 设置为 justify 时指定分散对齐的方式。	3
text-outline	设置文字的轮廓。	3
text-overflow	指定当文本溢出包含的元素，应该发生什么	3
text-shadow	为文本添加阴影	3
text-wrap	指定文本换行规则	3
word-break	指定非CJK文字的断行规则	3
word-wrap	设置浏览器是否对过长的单词进行换行。	3

2D/3D 转换属性

属性	说明	CSS
transform	适用于2D或3D转换的元素	3
transform-origin	允许您更改转化元素位置	3
transform-style	3D空间中的指定如何嵌套元素	3
perspective	指定3D元素是如何查看透视图	3
perspective-origin	指定3D元素底部位置	3
backface-visibility	定义一个元素是否应该是可见的，不对着屏幕时	3

过渡（Transition）属性

属性	说明	CSS
transition	此属性是 transition-property、transition-duration、transition-timing-function、transition-delay 的简写形式。	3
transition-property	设置用来进行过渡的 CSS 属性。	3
transition-duration	设置过渡进行的时间长度。	3
transition-timing-function	设置过渡进行的时序函数。	3
transition-delay	指定过渡开始的时间。	3

用户外观(User-interface) 属性

属性	说明	CSS
appearance	定义元素的外观样式	3
box-sizing	允许您为了适应区域以某种方式定义某些元素	3
icon	为元素指定图标	3
nav-down	指定用户按向下键时向下导航的位置	3
nav-index	指定导航（tab）顺序。	3
nav-left	指定用户按向左键时向左导航的位置	3
nav-right	指定用户按向右键时向右导航的位置	3
nav-up	指定用户按向上键时向上导航的位置a	3
outline-offset	设置轮廓框架在 border 边缘外的偏移	3
resize	定义元素是否可以改变大小	3

CSS 选择器

CSS选择器用于选择你想要的元素的样式的模式。

"CSS"列表示在CSS版本的属性定义（CSS1，CSS2，或对CSS3）。

选择器	示例	示例说明	CSS
.class	.intro	选择所有 class="intro" 的元素	1
#id	#firstname	选择所有 id="firstname" 的元素	1
*	*	选择所有元素	2
element	p	选择所有 <p> 元素	1
element,element	div,p	选择所有 <div> 元素和 <p> 元素	1
element element	div p	选择 <div> 元素内的所有 <p> 元素	1
element>element	div>p	选择所有父级是 <div> 元素的 <p> 元素	2
element+element	div+p	选择所有紧接着 <div> 元素之后的 <p> 元素	2
[attribute]	[target]	选择所有带有 target 属性元素	2
[attribute=value]	[target=-blank]	选择所有使用 target="-blank" 的元素	2
[attribute~=value]	[title~=flower]	选择标题属性包含单词 "flower" 的所有元素	2
[attribute\|=language]	[lang\|=en]	选择一个 lang 属性以 en 为开头的所有元素	2
:link	a:link	选择所有未访问链接	1
:visited	a:visited	选择所有访问过的链接	1
:active	a:active	选择活动链接	1
:hover	a:hover	选择鼠标在链接上面时	1
:focus	input:focus	选择具有焦点的输入元素	2
:first-letter	p:first-letter	选择每一个 <p> 元素的第一个字母	1
:first-line	p:first-line	选择每一个 <p> 元素的第一行	1
:first-child	p:first-child	指定只有当 <p> 元素是其父级的第一个子级的样式。	2
:before	p:before	在每个 <p> 元素之前插入内容	2
:after	p:after	在每个 <p> 元素之后插入内容	2
:lang(language)	p:lang(it)	选择一个 lang 属性的起始值="it"的所有 <p> 元素	2
element1~element2	p~ul	选择 <p> 元素之后的每一个 <ul> 元素	3
[attribute^=value]	a[src^="https"]	选择每一个 src 属性的值以 "https" 开头的元素	3
[attribute$=value]	a[src$=".pdf"]	选择每一个 src 属性的值以 ".pdf" 结尾的元素	3
[attribute=value*]	a[src*="W3Cschool"]	选择每一个 src 属性的值包含子字符串 "W3Cschool" 的元素	3
:first-of-type	p:first-of-type	选择每个 <p> 元素是其父级的第一个 <p> 元素	3
:last-of-type	p:last-of-type	选择每个 <p> 元素是其父级的最后一个 <p> 元素	3
:only-of-type	p:only-of-type	选择每个 <p> 元素是其父级的唯一 <p> 元素	3
:only-child	p:only-child	选择每个 <p> 元素是其父级的唯一子元素	3
:nth-child(n)	p:nth-child(2)	选择每个 <p> 元素是其父级的第二个子元素	3
:nth-last-child(n)	p:nth-last-child(2)	选择每个 <p> 元素的是其父级的第二个子元素，从最后一个子项计数	3
:nth-of-type(n)	p:nth-of-type(2)	选择每个 <p> 元素是其父级的第二个 <p> 元素	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择每个 <p> 元素的是其父级的第二个 <p> 元素，从最后一个子项计数	3
:last-child	p:last-child	选择每个 <p> 元素是其父级的最后一个子级。	3
:root	:root	选择文档的根元素	3
:empty	p:empty	选择每个没有任何子级的 <p> 元素（包括文本节点）	3
:target	#news:target	选择当前活动的 #news 元素（包含该锚名称的点击的 URL ）	3
:enabled	input:enabled	选择每一个已启用的输入元素	3
:disabled	input:disabled	选择每一个禁用的输入元素	3
:checked	input:checked	选择每个选中的输入元素	3
:not(selector)	:not(p)	选择每个并非 <p> 元素的元素	3
::selection	::selection	匹配元素中被用户选中或处于高亮状态的部分	3
:out-of-range	:out-of-range	匹配值在指定区间之外的 <input> 元素	3
:in-range	:in-range	匹配值在指定区间之内的 <input> 元素	3
:read-write	:read-write	用于匹配可读及可写的元素	3
:read-only	:read-only	用于匹配设置 "readonly"（只读）属性的元素	3
:optional	:optional	用于匹配可选的输入元素	3
:required	:required	用于匹配设置了 "required" 属性的元素	3
:valid	:valid	用于匹配输入值为合法的元素	3
:invalid	:invalid	用于匹配输入值为非法的元素	3

CSS 语音参考

听觉样式表使用了语音合成和声音效果的结合，让用户收听信息，而不是读取信息。

有声显示可用于：

失明人士
帮助用户学习阅读
帮助具有阅读问题的用户
家庭娱乐
在车上

听觉呈现通常会把文档转化为纯文本，然后传给屏幕阅读器（可读出屏幕上所有字符的一种程序）。

听觉样式表的一个例子：

h1,h2,h3,h4
{
voice-family:male;
richness:80;
cue-before:url("beep.au")
}

上面的例子用语音合成器播放声音，开头有一个男性的声音说话。

CSS 语音参考手册

CSS"列表示在CSS版本的属性定义（CSS1或CSS2）。

Property	Description	Values	CSS
azimuth	设置声音应该来自哪里	angle left-side far-left left center-left center center-right right far-right right-side behind leftwards rightwards	2
cue	在一个声明中设置cue属性	cue-before cue-after	2
cue-after	指定要播放的声音在一个元素的内容后面	none url	2
cue-before	指定要播放的声音在一个元素的内容前面	none url	2
elevation	设置声音应该来自哪里	angle below level above higher lower	2
pause	在一个声明中设置pause属性	pause-before pause-after	2
pause-after	在一个元素的内容之后，指定暂停	time %	2
pause-before	在一个元素的内容之前，指定暂停	time %	2
pitch	指定讲话声音	frequency x-low low medium high x-high	2
pitch-range	指定讲话声音的变化。（单调的声音或动态的声音？）	number	2
play-during	指定在读一个元素的内容时要播放的声音	auto none url mix repeat	2
richness	指定丰富的讲话声音。（浑厚的声音或细的声音？）	number	2
speak	指定内容是否会提供听觉方式	normal none spell-out	2
speak-header	此属性设置或检索表格标题是在所有的单元格之前发声，还是到一个不与之关联的单元格就结束发声。	always once	2
speak-numeral	设置或检索数字如何发音。	digits continuous	2
speak-punctuation	设置或检索标点字符如何发音	none code	2
speech-rate	指定发言速度	number x-slow slow medium fast x-fast faster slower	2
stress	讲话声音在指定的地方"重音"	number	2
voice-family	设置或检索当前声音类型	specific-voice generic-voice	2
volume	指定发言的音量	number % silent x-soft soft medium loud x-loud	2

CSS Web安全字体组合

常用的字体组合

你想要的字体类型如果浏览器找不到，它会从通用的字体类型中找到与你相似的:

实例

p{font-family:"Times New Roman", Times, serif}

尝试一下 »

下面是一些常用的字体组合，通用的字体系列。

Serif 字体

字体

文本示例

Georgia, serif

This is a heading

This is a paragraph

"Palatino Linotype", "Book Antiqua", Palatino, serif

This is a heading

This is a paragraph

"Times New Roman", Times, serif

This is a heading

This is a paragraph

sans - serif字体

字体	文本示例
Arial, Helvetica, sans-serif	This is a heading This is a paragraph
Arial Black, Gadget, sans-serif	This is a heading This is a paragraph
"Comic Sans MS", cursive, sans-serif	This is a heading This is a paragraph
Impact, Charcoal, sans-serif	This is a heading This is a paragraph
"Lucida Sans Unicode", "Lucida Grande", sans-serif	This is a heading This is a paragraph
Tahoma, Geneva, sans-serif	This is a heading This is a paragraph
"Trebuchet MS", Helvetica, sans-serif	This is a heading This is a paragraph
Verdana, Geneva, sans-serif	This is a heading This is a paragraph

Monospace 字体

字体

文本示例

"Courier New", Courier, monospace

This is a heading

This is a paragraph

"Lucida Console", Monaco, monospace

This is a heading

This is a paragraph

CSS 动画

定义和用法

一些 CSS 属性是可以有动画效果的，这意味着它们可以用于动画和过渡。

动画属性可以逐渐地从一个值变化到另一个值，比如尺寸大小、数量、百分比和颜色。

浏览器支持

表格中的数字表示支持该方法的第一个浏览器的版本号。

紧跟在数字后面的 -webkit-, -moz-, 或 -o- 指定了第一个支持该属性的浏览器版本前缀。

动画属性实例

背景颜色逐渐地从红色变化到蓝色：

@keyframes mymove
{
from {background-color:red;}
to {left:blue;}
}

/*Safari 和 Chrome:*/
@-webkit-keyframes mymove
{
from {background-color:red;}
to {background-color:blue;}
}

尝试一下 »

CSS 中的动画属性：

属性	实例
background	尝试一下》
background-color	尝试一下》
background-position	尝试一下》
background-size	尝试一下》
border	尝试一下》
border-bottom	尝试一下》
border-bottom-color	尝试一下》
border-bottom-left-radius	尝试一下》
border-bottom-right-radius	尝试一下》
border-bottom-width	尝试一下》
border-color	尝试一下》
border-left	尝试一下》
border-left-color	尝试一下》
border-left-width	尝试一下》
border-right	尝试一下》
border-right-color	尝试一下》
border-right-width	尝试一下》
border-spacing	尝试一下》
border-top	尝试一下》
border-top-color	尝试一下》
border-top-left-radius	尝试一下》
border-top-right-radius	尝试一下》
border-top-width	尝试一下》
bottom	尝试一下》
box-shadow	尝试一下》
clip	尝试一下》
color	尝试一下》
column-count	尝试一下》
column-gap	尝试一下》
column-rule	尝试一下》
column-rule-color	尝试一下》
column-rule-width	尝试一下》
column-width	尝试一下》
columns	尝试一下》
filter	尝试一下》
flex
flex-basis	尝试一下》
flex-grow	尝试一下》
flex-shrink	尝试一下》
font	尝试一下》
font-size	尝试一下》
font-size-adjust
font-stretch
font-weight	尝试一下》
height	尝试一下》
left	尝试一下》
letter-spacing	尝试一下》
line-height	尝试一下》
margin	尝试一下》
margin-bottom	尝试一下》
margin-left	尝试一下》
margin-right	尝试一下》
margin-top	尝试一下》
max-height	尝试一下》
max-width	尝试一下》
min-height	尝试一下》
min-width	尝试一下》
opacity	尝试一下》
order	尝试一下》
outline	尝试一下》
outline-color	尝试一下》
outline-offset	尝试一下》
outline-width	尝试一下》
padding	尝试一下》
padding-bottom	尝试一下》
padding-left	尝试一下》
padding-right	尝试一下》
padding-top	尝试一下》
perspective	尝试一下》
perspective-origin	尝试一下》
right	尝试一下》
text-decoration-color	尝试一下》
text-indent	尝试一下》
text-shadow	尝试一下》
top	尝试一下》
transform	尝试一下》
transform-origin	尝试一下》
vertical-align	尝试一下》
visibility
width	尝试一下》
word-spacing	尝试一下》
z-index	尝试一下》

CSS 有几个不同的单位用于表示长度。

一些设置 CSS 长度的属性有 width, margin, padding, font-size, border-width等。

长度由一个数字和单位组成如 10px, 2em等。

数字与单位之间不能出现空格。如果长度值为 0，则可以省略单位。

对于一些 CSS 属性，长度可以是负数。

有两种类型的长度单位：相对和绝对。

浏览器支持

下表中的数字表示支持该长度单位的最低浏览器版本。

长度单位
em, ex, %, px, cm, mm, in, pt, pc	1.0	3.0	1.0	1.0	3.5
ch	27.0	9.0	1.0	7.0	20.0
rem	4.0	9.0	3.6	4.1	11.6
vh, vw	20.0	9.0	19.0	6.0	20.0
vmin	20.0	9.0*	19.0	6.0	20.0
vmax	26.0	不支持	19.0	不支持	20.0

注意: Internet Explorer 9 通过不标准的名称 vm 来支持 vmin 。

相对长度

相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。

单位	描述	在线实例
em	它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。一般浏览器字体大小默认为16px，则2em == 32px；	尝试一下
ex	依赖于英文子母小 x 的高度	尝试一下
ch	数字 0 的宽度
rem	根元素（html）的 font-size
vw	viewpoint width，视窗宽度，1vw=视窗宽度的1%	尝试一下
vh	viewpoint height，视窗高度，1vh=视窗高度的1%	尝试一下
vmin	vw和vh中较小的那个。	尝试一下
vmax	vw和vh中较大的那个。	尝试一下
%

	提示: rem与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。

绝对长度

绝对长度单位是一个固定的值，它反应一个真实的物理尺寸。绝对长度单位视输出介质而定，不依赖于环境（显示器、分辨率、操作系统等）。

单位	描述	在线实例
cm	厘米	尝试一下
mm	毫米	尝试一下
in	英寸 (1in = 96px = 2.54cm)	尝试一下
px *	像素 (1px = 1/96th of 1in)	尝试一下
pt	point，大约1/72英寸； (1pt = 1/72in)	尝试一下
pc	pica，大约6pt，1/6英寸； (1pc = 12 pt)	尝试一下

像素或许被认为是最好的"设备像素"，而这种像素长度和你在显示器上看到的文字屏幕像素无关。px实际上是一个按角度度量的单位。

CSS 颜色

颜色是由红（RED），绿（GREEN），蓝（BLUE ）光线的显示结合。

颜色值

CSS中定义颜色使用十六进制（hex）表示法为红，绿，蓝的颜色值结合。可以是最低值是0（十六进制00）到最高值是255（十六进制FF）

3个双位数字的十六进制值写法，以＃符号开始。

Color Examples

Color	Color HEX	Color RGB
	#000000	rgb(0,0,0)
	#FF0000	rgb(255,0,0)
	#00FF00	rgb(0,255,0)
	#0000FF	rgb(0,0,255)
	#FFFF00	rgb(255,255,0)
	#00FFFF	rgb(0,255,255)
	#FF00FF	rgb(255,0,255)
	#C0C0C0	rgb(192,192,192)
	#FFFFFF	rgb(255,255,255)

尝试一下 »

16万个不同的颜色

红，绿，蓝值从0到255的结合，给出了总额超过16万不同的颜色（256 × 256 ×256）。

现代大多数显示器能够显示至少16384种颜色。

如果你看看下面的颜色表，你会看到从0到255不同的红灯颜色。

要看到充满色彩混合时红灯从0到255变化，单击十六进制或RGB值。

红光	16进制值	RGB
	#000000	rgb(0,0,0)
	#080000	rgb(8,0,0)
	#100000	rgb(16,0,0)
	#180000	rgb(24,0,0)
	#200000	rgb(32,0,0)
	#280000	rgb(40,0,0)
	#300000	rgb(48,0,0)
	#380000	rgb(56,0,0)
	#400000	rgb(64,0,0)
	#480000	rgb(72,0,0)
	#500000	rgb(80,0,0)
	#580000	rgb(88,0,0)
	#600000	rgb(96,0,0)
	#680000	rgb(104,0,0)
	#700000	rgb(112,0,0)
	#780000	rgb(120,0,0)
	#800000	rgb(128,0,0)
	#880000	rgb(136,0,0)
	#900000	rgb(144,0,0)
	#980000	rgb(152,0,0)
	#A00000	rgb(160,0,0)
	#A80000	rgb(168,0,0)
	#B00000	rgb(176,0,0)
	#B80000	rgb(184,0,0)
	#C00000	rgb(192,0,0)
	#C80000	rgb(200,0,0)
	#D00000	rgb(208,0,0)
	#D80000	rgb(216,0,0)
	#E00000	rgb(224,0,0)
	#E80000	rgb(232,0,0)
	#F00000	rgb(240,0,0)
	#F80000	rgb(248,0,0)
	#FF0000	rgb(255,0,0)

灰阶

灰阶代表了由最暗到最亮之间不同亮度的层次级别,为了使您更容易选择合适的灰色，我们已编制了灰色色调的表：

Gray Shades	HEX	RGB
	#000000	rgb(0,0,0)
	#080808	rgb(8,8,8)
	#101010	rgb(16,16,16)
	#181818	rgb(24,24,24)
	#202020	rgb(32,32,32)
	#282828	rgb(40,40,40)
	#303030	rgb(48,48,48)
	#383838	rgb(56,56,56)
	#404040	rgb(64,64,64)
	#484848	rgb(72,72,72)
	#505050	rgb(80,80,80)
	#585858	rgb(88,88,88)
	#606060	rgb(96,96,96)
	#686868	rgb(104,104,104)
	#707070	rgb(112,112,112)
	#787878	rgb(120,120,120)
	#808080	rgb(128,128,128)
	#888888	rgb(136,136,136)
	#909090	rgb(144,144,144)
	#989898	rgb(152,152,152)
	#A0A0A0	rgb(160,160,160)
	#A8A8A8	rgb(168,168,168)
	#B0B0B0	rgb(176,176,176)
	#B8B8B8	rgb(184,184,184)
	#C0C0C0	rgb(192,192,192)
	#C8C8C8	rgb(200,200,200)
	#D0D0D0	rgb(208,208,208)
	#D8D8D8	rgb(216,216,216)
	#E0E0E0	rgb(224,224,224)
	#E8E8E8	rgb(232,232,232)
	#F0F0F0	rgb(240,240,240)
	#F8F8F8	rgb(248,248,248)
	#FFFFFF	rgb(255,255,255)

网络安全色?

若干年前，当计算机支持最大256个不同的颜色，一个216"网络安全颜色"列表被建议作为Web标准，保留了40个固定的系统颜色。

这在现在看来不是很重要，因为大多数计算机可以显示数百万种不同的色彩，但选择是留给你。

跨浏览器的调色板创建，以确保所有的计算机将显示正确的颜色，运行一个256色调色板：

000000	000033	000066	000099	0000CC	0000FF
003300	003333	003366	003399	0033CC	0033FF
006600	006633	006666	006699	0066CC	0066FF
009900	009933	009966	009999	0099CC	0099FF
00CC00	00CC33	00CC66	00CC99	00CCCC	00CCFF
00FF00	00FF33	00FF66	00FF99	00FFCC	00FFFF
330000	330033	330066	330099	3300CC	3300FF
333300	333333	333366	333399	3333CC	3333FF
336600	336633	336666	336699	3366CC	3366FF
339900	339933	339966	339999	3399CC	3399FF
33CC00	33CC33	33CC66	33CC99	33CCCC	33CCFF
33FF00	33FF33	33FF66	33FF99	33FFCC	33FFFF
660000	660033	660066	660099	6600CC	6600FF
663300	663333	663366	663399	6633CC	6633FF
666600	666633	666666	666699	6666CC	6666FF
669900	669933	669966	669999	6699CC	6699FF
66CC00	66CC33	66CC66	66CC99	66CCCC	66CCFF
66FF00	66FF33	66FF66	66FF99	66FFCC	66FFFF
990000	990033	990066	990099	9900CC	9900FF
993300	993333	993366	993399	9933CC	9933FF
996600	996633	996666	996699	9966CC	9966FF
999900	999933	999966	999999	9999CC	9999FF
99CC00	99CC33	99CC66	99CC99	99CCCC	99CCFF
99FF00	99FF33	99FF66	99FF99	99FFCC	99FFFF
CC0000	CC0033	CC0066	CC0099	CC00CC	CC00FF
CC3300	CC3333	CC3366	CC3399	CC33CC	CC33FF
CC6600	CC6633	CC6666	CC6699	CC66CC	CC66FF
CC9900	CC9933	CC9966	CC9999	CC99CC	CC99FF
CCCC00	CCCC33	CCCC66	CCCC99	CCCCCC	CCCCFF
CCFF00	CCFF33	CCFF66	CCFF99	CCFFCC	CCFFFF
FF0000	FF0033	FF0066	FF0099	FF00CC	FF00FF
FF3300	FF3333	FF3366	FF3399	FF33CC	FF33FF
FF6600	FF6633	FF6666	FF6699	FF66CC	FF66FF
FF9900	FF9933	FF9966	FF9999	FF99CC	FF99FF
FFCC00	FFCC33	FFCC66	FFCC99	FFCCCC	FFCCFF
FFFF00	FFFF33	FFFF66	FFFF99	FFFFCC	FFFFFF

CSS 合法颜色值

CSS Colors

CSS的颜色可以通过以下方法指定：

十六进制颜色
RGB颜色
RGBA颜色
HSL色彩
HSLA颜色
预定义/跨浏览器的颜色名称

十六进制颜色

所有主要浏览器都支持十六进制颜色值。

指定一个十六进制的颜色其组成部分是：＃RRGGBB，其中RR（红色），GG（绿色）和BB（蓝色）。所有值必须介于0和FF之间。

<p例如，＃0000FF值呈现为蓝色，因为蓝色的组成设置为最高值（FF）而其他设置为0。

实例

p
{
background-color:#ff0000;
}

尝试一下 »

RGB颜色

RGB颜色值在所有主要浏览器都支持。

RGB颜色值指定：RGB（红，绿，蓝）。每个参数（红色，绿色和蓝色）定义颜色的亮度，可在0和255之间，或一个百分比值（从0％到100％）之间的整数。

例如RGB（0,0,255）值呈现为蓝色，因为蓝色的参数设置为最高值（255）而其他设置为0。

此外，下面的值定义相同的颜色：RGB（0,0,255），RGB（0％，0％，100％）。

实例

p
{
background-color:rgb(255,0,0);
}

尝试一下 »

RGBA颜色

RGBA颜色值被IE9, Firefox3+, Chrome, Safari,和Opera10+支持。

RGBA颜色值是RGB颜色值alpha通道的延伸 - 指定对象的透明度。

RGBA颜色值指定：RGBA（红，绿，蓝，alpha）。 Alpha参数是一个介于0.0（完全透明）和1.0（完全不透明）之间的参数。

实例

p
{
background-color:rgba(255,0,0,0.5);
}

尝试一下 »

HSL颜色

IE9, Firefox, Chrome, Safari,和Opera 10+.支持HSL颜色值。

HSL代表色相，饱和度和亮度 - 使用色彩圆柱坐标表示。

HSL颜色值指定：HSL（色调，饱和度，明度）。

实例

p
{
background-color:hsl(120,65%,75%);
}

尝试一下 »

HSLA颜色

HSLA颜色值被IE9, Firefox3+, Chrome, Safari,和Opera10+.支持.

HSLA的颜色值是一个带有alpha通道的HSL颜色值的延伸 - 指定对象的透明度。

指定HSLA颜色值：HSLA（色调，饱和度，亮度，α），α是Alpha参数定义的不透明度。 Alpha参数是一个介于0.0（完全透明）和1.0（完全不透明）之间的参数。

实例

p
{
background-color:hsla(120,65%,75%,0.3);
}

尝试一下 »

预定义/跨浏览器的颜色名称

147是在HTML和CSS颜色规范预定义的颜色名称。你可以查看我们的预定义颜色名称表。

CSS 颜色名称

所有浏览器都支持颜色名称

147颜色名称定义在HTML和CSS的颜色规格(17个标准色加上130多个其他)。下表列出了所有这些，连同其十六进制值。

Remark 提示: 17种标准颜色：浅绿色，黑色，蓝色，紫红色，灰色，灰色，绿色，石灰，栗色，海军，橄榄，紫，红，银，蓝绿色，白色和黄色。

点击颜色的名称或十六进制值，伴随着不同的颜色名称或值其背景颜色会改变:

按颜色名称排序

列表按十六进制值进行排序

Color Name	HEX	Color
AliceBlue	#F0F8FF
AntiqueWhite	#FAEBD7
Aqua	#00FFFF
Aquamarine	#7FFFD4
Azure	#F0FFFF
Beige	#F5F5DC
Bisque	#FFE4C4
Black	#000000
BlanchedAlmond	#FFEBCD
Blue	#0000FF
BlueViolet	#8A2BE2
Brown	#A52A2A
BurlyWood	#DEB887
CadetBlue	#5F9EA0
Chartreuse	#7FFF00
Chocolate	#D2691E
Coral	#FF7F50
CornflowerBlue	#6495ED
Cornsilk	#FFF8DC
Crimson	#DC143C
Cyan	#00FFFF
DarkBlue	#00008B
DarkCyan	#008B8B
DarkGoldenRod	#B8860B
DarkGray	#A9A9A9
DarkGreen	#006400
DarkKhaki	#BDB76B
DarkMagenta	#8B008B
DarkOliveGreen	#556B2F
DarkOrange	#FF8C00
DarkOrchid	#9932CC
DarkRed	#8B0000
DarkSalmon	#E9967A
DarkSeaGreen	#8FBC8F
DarkSlateBlue	#483D8B
DarkSlateGray	#2F4F4F
DarkTurquoise	#00CED1
DarkViolet	#9400D3
DeepPink	#FF1493
DeepSkyBlue	#00BFFF
DimGray	#696969
DodgerBlue	#1E90FF
FireBrick	#B22222
FloralWhite	#FFFAF0
ForestGreen	#228B22
Fuchsia	#FF00FF
Gainsboro	#DCDCDC
GhostWhite	#F8F8FF
Gold	#FFD700
GoldenRod	#DAA520
Gray	#808080
Green	#008000
GreenYellow	#ADFF2F
HoneyDew	#F0FFF0
HotPink	#FF69B4
IndianRed	#CD5C5C
Indigo	#4B0082
Ivory	#FFFFF0
Khaki	#F0E68C
Lavender	#E6E6FA
LavenderBlush	#FFF0F5
LawnGreen	#7CFC00
LemonChiffon	#FFFACD
LightBlue	#ADD8E6
LightCoral	#F08080
LightCyan	#E0FFFF
LightGoldenRodYellow	#FAFAD2
LightGray	#D3D3D3
LightGreen	#90EE90
LightPink	#FFB6C1
LightSalmon	#FFA07A
LightSeaGreen	#20B2AA
LightSkyBlue	#87CEFA
LightSlateGray	#778899
LightSteelBlue	#B0C4DE
LightYellow	#FFFFE0
Lime	#00FF00
LimeGreen	#32CD32
Linen	#FAF0E6
Magenta	#FF00FF
Maroon	#800000
MediumAquaMarine	#66CDAA
MediumBlue	#0000CD
MediumOrchid	#BA55D3
MediumPurple	#9370DB
MediumSeaGreen	#3CB371
MediumSlateBlue	#7B68EE
MediumSpringGreen	#00FA9A
MediumTurquoise	#48D1CC
MediumVioletRed	#C71585
MidnightBlue	#191970
MintCream	#F5FFFA
MistyRose	#FFE4E1
Moccasin	#FFE4B5
NavajoWhite	#FFDEAD
Navy	#000080
OldLace	#FDF5E6
Olive	#808000
OliveDrab	#6B8E23
Orange	#FFA500
OrangeRed	#FF4500
Orchid	#DA70D6
PaleGoldenRod	#EEE8AA
PaleGreen	#98FB98
PaleTurquoise	#AFEEEE
PaleVioletRed	#DB7093
PapayaWhip	#FFEFD5
PeachPuff	#FFDAB9
Peru	#CD853F
Pink	#FFC0CB
Plum	#DDA0DD
PowderBlue	#B0E0E6
Purple	#800080
Red	#FF0000
RosyBrown	#BC8F8F
RoyalBlue	#4169E1
SaddleBrown	#8B4513
Salmon	#FA8072
SandyBrown	#F4A460
SeaGreen	#2E8B57
SeaShell	#FFF5EE
Sienna	#A0522D
Silver	#C0C0C0
SkyBlue	#87CEEB
SlateBlue	#6A5ACD
SlateGray	#708090
Snow	#FFFAFA
SpringGreen	#00FF7F
SteelBlue	#4682B4
Tan	#D2B48C
Teal	#008080
Thistle	#D8BFD8
Tomato	#FF6347
Turquoise	#40E0D0
Violet	#EE82EE
Wheat	#F5DEB3
White	#FFFFFF
WhiteSmoke	#F5F5F5
Yellow	#FFFF00
YellowGreen	#9ACD32

CSS 颜色十六进制值

按十六进制值排序

列表按颜色名称进行排序

Color Name	HEX	Color
Black	#000000
Navy	#000080
DarkBlue	#00008B
MediumBlue	#0000CD
Blue	#0000FF
DarkGreen	#006400
Green	#008000
Teal	#008080
DarkCyan	#008B8B
DeepSkyBlue	#00BFFF
DarkTurquoise	#00CED1
MediumSpringGreen	#00FA9A
Lime	#00FF00
SpringGreen	#00FF7F
Aqua	#00FFFF
Cyan	#00FFFF
MidnightBlue	#191970
DodgerBlue	#1E90FF
LightSeaGreen	#20B2AA
ForestGreen	#228B22
SeaGreen	#2E8B57
DarkSlateGray	#2F4F4F
LimeGreen	#32CD32
MediumSeaGreen	#3CB371
Turquoise	#40E0D0
RoyalBlue	#4169E1
SteelBlue	#4682B4
DarkSlateBlue	#483D8B
MediumTurquoise	#48D1CC
Indigo	#4B0082
DarkOliveGreen	#556B2F
CadetBlue	#5F9EA0
CornflowerBlue	#6495ED
MediumAquaMarine	#66CDAA
DimGray	#696969
SlateBlue	#6A5ACD
OliveDrab	#6B8E23
SlateGray	#708090
LightSlateGray	#778899
MediumSlateBlue	#7B68EE
LawnGreen	#7CFC00
Chartreuse	#7FFF00
Aquamarine	#7FFFD4
Maroon	#800000
Purple	#800080
Olive	#808000
Gray	#808080
SkyBlue	#87CEEB
LightSkyBlue	#87CEFA
BlueViolet	#8A2BE2
DarkRed	#8B0000
DarkMagenta	#8B008B
SaddleBrown	#8B4513
DarkSeaGreen	#8FBC8F
LightGreen	#90EE90
MediumPurple	#9370DB
DarkViolet	#9400D3
PaleGreen	#98FB98
DarkOrchid	#9932CC
YellowGreen	#9ACD32
Sienna	#A0522D
Brown	#A52A2A
DarkGray	#A9A9A9
LightBlue	#ADD8E6
GreenYellow	#ADFF2F
PaleTurquoise	#AFEEEE
LightSteelBlue	#B0C4DE
PowderBlue	#B0E0E6
FireBrick	#B22222
DarkGoldenRod	#B8860B
MediumOrchid	#BA55D3
RosyBrown	#BC8F8F
DarkKhaki	#BDB76B
Silver	#C0C0C0
MediumVioletRed	#C71585
IndianRed	#CD5C5C
Peru	#CD853F
Chocolate	#D2691E
Tan	#D2B48C
LightGray	#D3D3D3
Thistle	#D8BFD8
Orchid	#DA70D6
GoldenRod	#DAA520
PaleVioletRed	#DB7093
Crimson	#DC143C
Gainsboro	#DCDCDC
Plum	#DDA0DD
BurlyWood	#DEB887
LightCyan	#E0FFFF
Lavender	#E6E6FA
DarkSalmon	#E9967A
Violet	#EE82EE
PaleGoldenRod	#EEE8AA
LightCoral	#F08080
Khaki	#F0E68C
AliceBlue	#F0F8FF
HoneyDew	#F0FFF0
Azure	#F0FFFF
SandyBrown	#F4A460
Wheat	#F5DEB3
Beige	#F5F5DC
WhiteSmoke	#F5F5F5
MintCream	#F5FFFA
GhostWhite	#F8F8FF
Salmon	#FA8072
AntiqueWhite	#FAEBD7
Linen	#FAF0E6
LightGoldenRodYellow	#FAFAD2
OldLace	#FDF5E6
Red	#FF0000
Fuchsia	#FF00FF
Magenta	#FF00FF
DeepPink	#FF1493
OrangeRed	#FF4500
Tomato	#FF6347
HotPink	#FF69B4
Coral	#FF7F50
DarkOrange	#FF8C00
LightSalmon	#FFA07A
Orange	#FFA500
LightPink	#FFB6C1
Pink	#FFC0CB
Gold	#FFD700
PeachPuff	#FFDAB9
NavajoWhite	#FFDEAD
Moccasin	#FFE4B5
Bisque	#FFE4C4
MistyRose	#FFE4E1
BlanchedAlmond	#FFEBCD
PapayaWhip	#FFEFD5
LavenderBlush	#FFF0F5
SeaShell	#FFF5EE
Cornsilk	#FFF8DC
LemonChiffon	#FFFACD
FloralWhite	#FFFAF0
Snow	#FFFAFA
Yellow	#FFFF00
LightYellow	#FFFFE0
Ivory	#FFFFF0
White	#FFFFFF

CSS3 浏览器支持参考手册

Note W3CSchool CSS3的浏览器支持参考会定期与所有主要浏览器进行测试。

CSS3 浏览器支持

对CSS3是没有一个W3C标准的，但全部的主流浏览器都已经支持许多新的功能。下面是有关所有的新的CSS3属性和他们的浏览器支持的参考：

属性	IE	Firefox	Chrome	Safari	Opera
alignment-adjust
alignment-baseline
@keyframes	10	16			12.1
animation	10	16			12.1
animation-name	10	16			12.1
animation-duration	10	16			12.1
animation-timing-function	10	16			12.1
animation-delay	10	16			12.1
animation-iteration-count	10	16			12.1
animation-direction	10	16			12.1
animation-play-state	10	16			12.1
appearance		3
backface-visibility	10
background-clip	9	4	4	5	10.5
background-origin	9	4	4	5	10.5
background-size	9	4	4	5	10.5
baseline-shift
bookmark-label
bookmark-level
bookmark-target
border-bottom-left-radius	9	4	5	5	10.5
border-bottom-right-radius	9	4	5	5	10.5
border-image		15	16	6	11
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-radius	9	4	5	5	10.5
border-top-left-radius	9	4	5	5	10.5
border-top-right-radius	9	4	5	5	10.5
box-decoration-break
box-align
box-direction
box-flex					12.1
box-flex-group
box-lines
box-ordinal-group
box-orient
box-pack
box-shadow	9	4	10	5.1	10.5
box-sizing	8		10	5.1	9.5
color-profile
column-fill
column-gap	10				11.1
column-rule	10				11.1
column-rule-color	10				11.1
column-rule-style	10				11.1
column-rule-width	10				11.1
column-span	10				11.1
column-width	10				11.1
columns	10				11.1
column-count	10				11.1
crop
dominant-baseline
drop-initial-after-adjust
drop-initial-after-align
drop-initial-before-adjust
drop-initial-before-align
drop-initial-size
drop-initial-value
fit
fit-position
float-offset
@font-face	9	3.6	4	3	10
font-size-adjust		2
font-stretch
grid-columns
grid-rows
hanging-punctuation
hyphenate-after
hyphenate-before
hyphenate-characters
hyphenate-lines
hyphenate-resource
hyphens
icon
image-orientation
image-resolution
inline-box-align
line-stacking
line-stacking-ruby
line-stacking-shift
line-stacking-strategy
mark
mark-after
mark-before
marks
marquee-direction
marquee-play-count
marquee-speed
marquee-style
move-to
nav-down					11.5
nav-index					11.5
nav-left					11.5
nav-right					11.5
nav-up					11.5
opacity	9	2	4	3.1	9
outline-offset					11
overflow-style
overflow-x	9	2
overflow-y	9	2
page
page-policy
perspective				5
perspective-origin
punctuation-trim
rendering-intent
resize		5	4	4
rest
rest-after
rest-before
rotation
rotation-point
ruby-align
ruby-overhang
ruby-position
ruby-span
size
string-set
target
target-name
target-new
target-position
text-align-last
text-emphasis
text-height
text-justify	5
text-outline
text-overflow	6	7	4	3.1	11
text-shadow	10	3.5	4	4	9.5
text-wrap
transform	10	16			12.1
transform-origin	10	16			12.1
transform-style				5
transition	10	16	26		12.1
transition-property	10	16	26		12.1
transition-duration	10	16	26		12.1
transition-timing-function	10	16	26		12.1
transition-delay	10	16	26		12.1
word-break	5.5	15	4	3
word-wrap	5	3.5	4	3.1	10.5

图标说明

	IE浏览器
	火狐浏览器
	Google Chrome浏览器
	Safari浏览器
	Opera浏览器

	前缀-ms-的IE浏览器
	前缀-moz-的火狐浏览器
	前缀-webkit-的Google Chrome浏览器
	前缀-webkit-的Safari浏览器
	前缀-o-的Opera浏览器
	前缀-xv-的Opera浏览器

对于某些属性，你会看到浏览器的图标和一个数字：

10.5

数字表示是第一次支持该属性的浏览器版本。

CSS align-content 属性

CSS 参考手册

定义和用法

align-content 属性在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）。

提示：使用 justify-content 属性对齐主轴上的各项（水平）。

注意：容器内必须有多行的项目，该属性才能渲染出效果。

默认值：	stretch
继承：	否
可动画化：	否。请参阅可动画化（animatable）。
版本：	CSS3
JavaScript 语法：	object.style.alignContent="center"

CSS 语法

align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;

默认值

值	描述	测试
stretch	默认值。项目被拉伸以适应容器。	测试 »
center	项目位于容器的中心。	测试 »
flex-start	项目位于容器的开头。	测试 »
flex-end	项目位于容器的结尾。	测试 »
space-between	项目位于各行之间留有空白的容器内。	测试 »
space-around	项目位于各行之前、之间、之后都留有空白的容器内。	测试 »
initial	设置该属性为它的默认值。请参阅 initial。	测试 »
inherit	从父元素继承该属性。请参阅 inherit。

实例

对齐弹性盒的 <div> 元素的各项：

div
{
display: flex;
flex-flow: row wrap;
align-content:space-around;
}

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。

属性
align-content	21.0	11.0	28.0	9.0 7.0 -webkit-	12.1

CSS 参考手册：align-items 属性

CSS 参考手册：align-self 属性

CSS 参考手册：justify-content 属性

CSS 参考手册

CSS align-items 属性

CSS 参考手册

定义和用法

align-items：设置了 flex 容器的对齐方式。

提示：使用每个 flex 对象元素的 align-self 属性可重写 align-items 属性。

默认值：	stretch
继承：	否
可动画化：	否。请参阅可动画化（animatable）。
版本：	CSS3
JavaScript 语法：	object.style.alignItems="center"尝试一下

CSS 语法

属性值

值	描述	测试
stretch	默认，拉伸元件以适应容器。	测试 »
center	中心元素在容器内。	测试 »
flex-start	位置元素在容器的开头。	测试 »
flex-end	位置元素在容器的末端。	测试 »
baseline	位置元素在容器的基线。	测试 »
initial	设置为默认值。请参阅 initial。	测试 »
inherit	从其父元素继承此属性。请参阅 inherit。

实例

居中对齐弹性盒的各项 <div> 元素：

div
{
display: flex;
align-items:center;
}

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。

属性
align-items	21.0	11.0	20.0	9.0 7.0 -webkit-	12.1

CSS 参考手册：align-content 属性

CSS 参考手册：align-self 属性

CSS 参考手册

CSS align-self 属性

CSS 参考手册

定义和用法

align-self 属性定义flex子项单独在侧轴（纵轴）方向上的对齐方式。。

注意：align-self 属性可重写灵活容器的 align-items 属性。

默认值：	auto
继承：	否
可动画化：	否。请参阅可动画化（animatable）。
版本：	CSS3
JavaScript 语法：	object.style.alignSelf="center"

CSS 语法

参数

值	描述	测试
auto	默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。	测试 »
stretch	元素被拉伸以适应容器。	测试 »
center	元素位于容器的中心。	测试 »
flex-start	元素位于容器的开头。	测试 »
flex-end	元素位于容器的结尾。	测试 »
baseline	元素位于容器的基线上。	测试 »
initial	设置该属性为它的默认值。请参阅 initial。	测试 »
inherit	从父元素继承该属性。请参阅 inherit。

实例

居中对齐弹性对象元素内的某个项：

#myBlueDiv
{
align-self:center;
}

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。

属性
align-self	21.0	11.0	20.0	9.0 7.0 -webkit-	12.1

CSS 参考手册：align-content 属性

CSS 参考手册：align-items 属性

CSS 参考手册

CSS all 属性

实例

修改所有元素或其父元素的属性为初始值：

div {
    background-color: yellow;
    color: red;
    all: initial;
}

尝试一下 »

定义和使用

all 属性用于重置所有属性，除了 unicode-bidi 和 direction。

默认值:	none
继承:	无
动画:	no。阅读 animatable
版本:	CSS3
JavaScript 语法:	object.style.all="initial"

浏览器支持

The numbers in the table specify the first browser version that fully supports the property.

表格中的数字表示支持该属性的浏览器最低版本号。

属性
all	37.0	不支持	不支持	27.0	不支持	24.0

CSS 语法

all: initial|inherit|unset;

属性值

值	描述
initial	修改所有元素属性或父元素的值为其初始化值
inherit	修改所有元素属性或父元素的值为其父元素的值
unset	修改所有元素属性或父元素的值为其父元素的值(如果有继承)或其初始值

Body 对象参考手册 CSS 参考手册

定义和用法

animation 属性是六个动画属性的速记属性：

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction

注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。

默认值：	none 0 ease 0 1 normal
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.animation="mymove 5s infinite"

语法

animation: name duration timing-function delay iteration-count direction;

值	描述
animation-name	规定需要绑定到选择器的 keyframe 名称。。
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数。
animation-direction	规定是否应该轮流反向播放动画。

实例

使用简写属性，将动画与 div 元素绑定：

div
{
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
}

尝试一下 »

浏览器支持

属性
animation	43.0 4.0 -webkit-	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.0 -o-

Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。

Safari 和 Chrome 支持替代的 -webkit-animation 属性。

注释：Internet Explorer 9 以及更早的版本不支持 animation 属性。

定义和用法

animation-delay 属性定义动画什么时候开始。

animation-delay 值单位可以是秒（s）或毫秒（ms）。

提示: 允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画。

默认值:	0
继承:	no
版本:	CSS3
JavaScript 语法:	object object.style.animationDelay="2s"

语法

animation-delay: time;

值	描述	测试
time	可选。定义动画开始前等待的时间，以秒或毫秒计。默认值为0	测试 »

实例

等待两秒，然后开始动画：

animation-delay:2s;-webkit-animation-delay:2s; /* Safari 和 Chrome */

尝试一下 »

实例

负值，请注意动画跳过 2 秒进入动画周期：

animation-delay: -2s /* Opera */
-moz-animation-delay: -2s /* Firefox */
-webkit-animation-delay: -2s /* Safari 和 Chrome */

尝试一下 »

浏览器支持


`animation-delay`	4.0 -webkit-	10.0	16.0 (5.0 -moz-)	4.0 -webkit-	15.0 -webkit- (12.0 -o-)

CSS3 教程: CSS3 动画

CSS 参考手册

定义和用法

animation-direction：属性控制如何在reverse或alternate周期播放动画。

如果 animation-direction 值是 "alternate"，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放。

注释：如果把动画设置为只播放一次，则该属性没有效果。

默认值：	normal
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.animationDirection="alternate"

语法

animation-direction: normal|reverse|alternate|alternate-reverse;

值	描述	测试
normal	以正常的方式播放动画	测试
reverse	以相反方向播放动画
alternate	播放动画作为正常每奇数时间（1,3,5等）和反方向每偶数时间（2,4,6，等...）	测试
alternate-reverse	在每个奇数时间（1,3,5等）在相反方向上播放动画，并且在每个偶数时间（2,4,6等等）的正常方向上播放动画

实例

暂停动画：

div
{
animation-direction:alternate;
-webkit-animation-direction:alternate; /* Safari 和 Chrome */
}

尝试一下 »

浏览器支持

属性
animation-direction	43.0 4.0 -webkit-	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.0 -o-

Internet Explorer 10、Firefox 以及 Opera 支持 animation-direction 属性。

Safari 和 Chrome 支持替代的 -webkit-animation-direction 属性。

注释：Internet Explorer 9 以及更早的版本不支持 animation-direction 属性。

CSS3 animation-duration 属性

定义和用法

animation-duration：定义动画完成一个周期需要多少秒或毫秒。

默认值:	0
继承:	no
版本:	CSS3
JavaScript 语法:	object object.style.animationDuration="3s"

语法

animation-duration: time;

值	说明
time	设置一个动画周期的时间间隔（以秒或毫秒为单位）。默认值为0，表示不会有动画

实例

设置动画在两秒内完成:

animation-duration:2s;
-webkit-animation-duration:2s; /* Safari and Chrome */

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
animation-duration	43.0 3.0 -webkit-	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.0 -o-

CSS3 tutorial: CSS3 动画

Body 对象参考手册 CSS 参考手册

定义和用法

animation-fill-mode：设置样式以在动画不播放时应用元素。

注释：其属性值是由逗号分隔的一个或多个填充模式关键词。

默认值：	none
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.animationFillMode=none

语法

animation-fill-mode: none|forwards|backwards|both|initial|inherit;

值	描述
none	默认值。无样式
forwards	动画结束后，使用元素的结束属性值。
backwards	使用元素的起始值。
both	动画将遵循向前和向后的规则。

实例

为 h1 元素规定填充模式：

h1
{
animation-fill-mode: forwards;
}

尝试一下 »

浏览器支持

属性
animation-fill-mode	4.0 -webkit-	10.0	16.0 5.0 -moz-	4.0 -webkit-	15.0 -webkit- 12.1 12.0 -o-

Internet Explorer 10、Firefox 以及 Opera 支持 animation-fill-mode 属性。

Safari 和 Chrome 支持替代的 -webkit-animation-fill-mode 属性。

注释：Internet Explorer 9 以及更早的版本不支持 animation-fill-mode 属性。

CSS3 animation-iteration-count 属性

定义和用法

animation-iteration-count属性定义动画应该播放多少次。

默认值:	1
继承:	no
版本:	CSS3
JavaScript 语法:	object object.style.animationIterationCount=3

语法

animation-iteration-count: value;

值	描述	测试
n	定义播放动画多少次。默认值为1	测试 »
infinite	指定动画应该播放无限次（永远）	测试 »

实例

播放三次动画：

animation-iteration-count:3;
-webkit-animation-iteration-count:3; /*Safari and Chrome*/

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

W3Cschool教程(51coolma.cn)

属性
animation-iteration-count	43.0 4.0 -webkit-	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.0 -o-

CSS3 教程: CSS3 动画

Body 对象参考手册 CSS 参考手册

定义和用法

animation-name 属性为 @keyframes 动画规定名称。

注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。

默认值：	none
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.animationName="mymove"

语法

animation-name: keyframename|none;

值	描述
keyframename	规定需要绑定到选择器的 keyframe 的名称。
none	规定无动画效果（可用于覆盖来自级联的动画）。

实例

为 @keyframes 动画规定一个名称：

div
{
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
}

尝试一下 »

浏览器支持

属性
animation-name	43.0 4.0 -webkit-	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.0 -o-

Internet Explorer 10、Firefox 以及 Opera 支持 animation-name 属性。

Safari 和 Chrome 支持替代的 -webkit-animation-name 属性。

注释：Internet Explorer 9 以及更早的版本不支持 animation-name 属性。

定义和用法

animation-play-state ：设置是否运行或暂停动画。

注释：您可以在 JavaScript 中使用该属性，这样就能在播放过程中暂停动画。

默认值：	running
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.animationPlayState="paused"

语法

animation-play-state: paused|running;

值	描述	测试
paused	动画已暂停。	测试
running	默认值，动画正在运行。	测试

实例

暂停动画：

div
{
animation-play-state:paused;
-webkit-animation-play-state:paused; /* Safari 和 Chrome */
}

尝试一下 »

浏览器支持

属性
animation-play-state	43.0 4.0 -webkit-	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.0 -o-

Internet Explorer 10、Firefox 以及 Opera 支持 animation-play-state 属性。

Safari 和 Chrome 支持替代的 -webkit-animation-play-state 属性。

注释：Internet Explorer 9 以及更早的版本不支持 animation-play-state 属性。

CSS3 animation-timing-function 属性

定义和用法

animation-timing-function：指定动画速度曲线。

速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。

速度曲线用于使变化更为平滑。

默认值:	ease
继承:	no
版本:	CSS3
JavaScript 语法:	object object.style.animationTimingFunction="linear"

语法

animation-timing-function: linear|ease|ease-in|ease-out|cubic-bezier(n,n,n,n);

值	描述	测试
linear	动画从开始到结束具有相同的速度。	测试
ease	动画有一个缓慢的开始，然后快，结束慢。	测试
ease-in	动画有一个缓慢的开始。	测试
ease-out	动画结束缓慢。	测试
ease-in-out	动画具有缓慢的开始和慢的结束。	测试
cubic-bezier(n,n,n,n)	在立方贝塞尔函数中定义速度函数。可能的值是从0到1的数字值。

提示: 请试着在下面的"尝试一下"功能中使用不同的值。

在线实例

实例

从开始到结束以相同的速度播放动画:

animation-timing-function:linear;
-webkit-animation-timing-function:linear; /* Safari and Chrome */

尝试一下 »
在此页底部有更多的例子。

实例

为了更好地理解不同的定时函数值，这里提供了设置五个不同值的五个不同的 div 元素：

/* W3C and Opera: */
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
/* Firefox: */
#div1 {-moz-animation-timing-function: linear;}
#div2 {-moz-animation-timing-function: ease;}
#div3 {-moz-animation-timing-function: ease-in;}
#div4 {-moz-animation-timing-function: ease-out;}
#div5 {-moz-animation-timing-function: ease-in-out;}
/* Safari and Chrome: */
#div1 {-webkit-animation-timing-function: linear;}
#div2 {-webkit-animation-timing-function: ease;}
#div3 {-webkit-animation-timing-function: ease-in;}
#div4 {-webkit-animation-timing-function: ease-out;}
#div5 {-webkit-animation-timing-function: ease-in-out;}

尝试一下 »

实例

与上例相同，但是通过 cubic-bezier 函数来定义速度曲线：

/* W3C and Opera: */
#div1 {animation-timing-function: cubic-bezier(0,0,1,1;}
#div2 {animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {animation-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Firefox: */
#div1 {-moz-animation-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-moz-animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-moz-animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-moz-animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-moz-animation-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Safari and Chrome: */
#div1 {-webkit-animation-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-webkit-animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-webkit-animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-webkit-animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-webkit-animation-timing-function: cubic-bezier(0.42,0,0.58,1);}

尝试一下 »

浏览器支持

属性
animation-timing-function	43.0 4.0 -webkit-	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.0 -o-

CSS3 tutorial: CSS3 动画

CSS 参考手册

实例

使 div 元素看上去像一个按钮：

div{appearance:button;-moz-appearance:button; /* Firefox */-webkit-appearance:button; /* Safari 和 Chrome */}

亲自试一试

页面底部有更多实例。

浏览器支持

所有主流浏览器都不支持 appearance 属性。

Firefox 支持替代的 -moz-appearance 属性。

Safari 和 Chrome 支持替代的 -webkit-appearance 属性。

定义和用法

appearance 属性允许您使元素看上去像标准的用户界面元素。

默认值：	normal
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.appearance="button"

语法

appearance: normal|icon|window|button|menu|field;

值	描述
normal	将元素呈现为常规元素。
icon	将元素呈现为图标（小图片）。
window	将元素呈现为视口。
button	将元素呈现为按钮。
menu	将元素呈现为一套供用户选择的选项。
field	将元素呈现为输入字段。

CSS 参考手册

CSS3 backface-visibility 属性

定义和用法

backface-visibility 属性定义当元素不面向屏幕时是否可见。

如果在旋转元素不希望看到其背面时，该属性很有用。

Chrome/Safari 用户：为了更好地理解这个属性，查看演示: 查看在线实例。

默认值:	visible
继承:	no
版本:	CSS3
JavaScript语法:	object.style.backfaceVisibility="hidden"

语法

backface-visibility: visible|hidden;

值	描述
visible	默认值。背面是可见的。
hidden	背面是不可见的。

实例

隐藏旋转的div元素的背面:

div
{
backface-visibility:hidden;
-webkit-backface-visibility:hidden; /* Chrome and Safari */
-moz-backface-visibility:hidden; /* Firefox */
-ms-backface-visibility:hidden; /* Internet Explorer */
}

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
backface-visibility	36.0 12.0 -webkit-	10.0	16.0 10.0 -moz-	9.0 4.0 -webkit-	23.0 15.0 -webkit-

CSS background 属性

标签定义及使用说明

背景缩写属性可以在一个声明中设置所有的背景属性。

可以设置的属性分别是：background-color, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment,和background-image.

如果上述值缺少一个，这不要紧，例如background：＃FF0000 URL（smiley.gif）;是允许的。

默认值:	请参阅单独的属性
继承:	no
版本:	CSS1+ CSS3中的新的属性
JavaScript 语法:	object object.style.background="red url(smiley.gif) top left no-repeat"

语法

background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

值	说明	CSS
background-color	指定要使用的背景颜色	1
background-position	指定背景图像的位置	1
background-size	指定背景图片的大小	3
background-repeat	指定如何重复背景图像	1
background-origin	指定背景图像的定位区域	3
background-clip	指定背景图像的绘画区域	3
background-attachment	设置背景图像是否固定或者随着页面的其余部分滚动。	1
background-image	指定要使用的一个或多个背景图像	1

实例

在一个div元素中设置多个背景图像（并指定他们的位置）：

body{background: #00ff00 url('smiley.gif') no-repeat fixed center; }

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
background	1.0	4.0	1.0	1.0	3.5

所有主要浏览器都支持background属性。

注意IE8和更早版本不支持一个元素多个背景图像。

注意 IE7和更早的版本不支持"继承"的值。 IE8需要定义！DOCTYPE。 IE9支持"继承"。

CSS 教程: CSS Background

CSS3 教程: CSS3 Backgrounds

定义和用法

background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。

默认值:	scroll
继承:	no
版本:	CSS1
JavaScript 语法:	object object.style.backgroundAttachment="fixed"

属性值

值	说明
scroll	背景图片随页面的其余部分滚动。这是默认
fixed	背景图像是固定的
inherit	指定background-attachment的设置应该从父元素继承
local	背景图片随滚动元素滚动

实例

如何指定一个固定的背景图像：

body
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
background-attachment	1.0	4.0	1.0	1.0	3.5

注意： Internet Explorer 8和更早版本的浏览器不支持多个背景图像在一个元素.

CSS 教程: CSS Background

CSS background-blend-mode 属性

实例

混合模式:

div {
    width: 290px;
    height: 69px;
    background-size: 290px 69px;
    background-repeat:no-repeat;
    background-image: linear-gradient(to right, green 0%, white 100%), url('logo.png');
    background-blend-mode: color-dodge;
}

尝试一下 »

定义和用法

background-blend-mode 属性定义了背景层的混合模式（图片与颜色）。

默认值:	normal
Inherited:	no
Animatable:	no. 查看 animatable
版本:	CSS3
JavaScript 语法:	object.style.backgroundBlendMode="screen"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

属性
background-blend-mode	35.0	不支持	30.0	7.1	22.0

CSS 语法

background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;

属性值

值	描述	实例
normal	默认值。设置正常的混合模式。	尝试一下 »
multiply	正片叠底模式。	尝试一下 »
screen	滤色模式。	尝试一下 »
overlay	叠加模式。	尝试一下 »
darken	变暗模式。	尝试一下 »
lighten	变亮模式。	尝试一下 »
color-dodge	颜色减淡模式。	尝试一下 »
saturation	饱和度模式。	尝试一下 »
color	颜色模式。	尝试一下 »
luminosity	亮度模式。	尝试一下 »

CSS 教程: CSS 背景

CSS3 background-clip 属性

定义和用法

background-clip属性指定背景绘制区域。

默认值:	border-box
继承:	no
版本:	CSS3
JavaScript 语法:	object object.style.backgroundClip="content-box"

语法

background-clip: border-box|padding-box|content-box;

值	说明
border-box	默认值。背景绘制在边框方框内（剪切成边框方框）。
padding-box	背景绘制在衬距方框内（剪切成衬距方框）。
content-box	背景绘制在内容方框内（剪切成内容方框）。

实例

指定绘图区的背景：

div
{
background-color:yellow;
background-clip:content-box;
}

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
border-image	16.0 4.0 -webkit-	11.0	15.0 3.5 -moz-	6.0 3.1 -webkit-	15.0 11.0 -o-

CSS3 教程: CSS3 Backgrounds

CSS background-color 属性

实例

设置不同元素的背景色：

body
{
background-color:yellow;
}
h1
{
background-color:#00ff00;
}
p
{
background-color:rgb(255,0,255);
}

尝试一下 »

标签定义及使用说明

background-color属性设置一个元素的背景颜色。

元素的背景是元素的总大小，包括填充和边界（但不包括边距）。

默认值:	transparent
继承:	no
版本:	CSS1
JavaScript 语法:	object object.style.backgroundColor="#00FF00"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
background-color	1.0	4.0	1.0	1.0	3.5

所有主要浏览器都支持background-color属性。

注意 IE7和更早的版本不支持"继承"的值。 IE8需要定义！DOCTYPE。 IE9支持"继承"。

提示和注释

提示: 使用背景色和文本颜色，使文本易于阅读。

属性值

值	描述
color	指定背景颜色。在CSS颜色值近可能的寻找一个颜色值的完整列表。
transparent	指定背景颜色应该是透明的。这是默认
inherit	指定背景颜色，应该从父元素继承

在线实例

设置部分文字的背景色
这个例子演示了如何设置部分文字的背景色。

CSS 教程: CSS 背景

CSS background-image 属性

实例

设置body元素的背景图像：

body
{
background-image:url('paper.gif');
background-color:#cccccc;
}

尝试一下 »

标签定义及使用说明

background-image属性设置一个元素的背景图像。

元素的背景是元素的总大小，包括填充和边界（但不包括边距）。

默认情况下，background-image放置在元素的左上角，并重复垂直和水平方向。

默认值:	none
继承:	no
版本:	CSS1
JavaScript 语法:	object object.style.backgroundImage="url(stars.gif)"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

Property
background-image	1.0	4.0	1.0	1.0	3.5

注意 IE8 和更早版本的浏览器不支持多个背景图像在一个元素

注意IE7和更早的版本不支持"继承"的值。 IE8需要定义！DOCTYPE。 IE9支持"继承"。

提示和注释

Tip: 务必设置背景色，如果图像是不可用，将被使用。

属性值

值	说明
url('URL')	图像的URL
none	无图像背景会显示。这是默认
inherit	指定背景图像应该从父元素继承

在线实例

多个背景图片
本实例演示了文档中多个背景图像。

CSS 教程: CSS Background

CSS3 教程: CSS3 Backgrounds

CSS3 background-origin 属性

定义和用法

background-Origin属性指定background-position属性应该是相对位置。

注意如果背景图像background-attachment是"固定"，这个属性没有任何效果。

默认值:	padding-box
继承:	no
版本:	CSS3
JavaScript 语法:	object object.style.backgroundOrigin="content-box"

语法

background-origin: padding-box|border-box|content-box;

值	描述
padding-box	背景图像填充框的相对位置
border-box	背景图像边界框的相对位置
content-box	背景图像的相对位置的内容框

实例

内容框相对定位的背景图片：

div
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-position:left;
background-origin:content-box;
}

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

Property
background-origin	4.0	9.0	4.0	3.0	10.5

CSS3 教程: CSS3 Backgrounds

定义和用法

background-position属性设置背景图像的起始位置。

注意对于这个工作在Firefox和Opera，background-attachment必须设置为 "fixed（固定）"。

默认值:	0% 0%
继承:	no
版本:	CSS1
JavaScript 语法:	object object.style.backgroundPosition="center"

语法

background-position: horizontal vertical

水平是

percentage | length | left | center | right

垂直是

percentage | length | top | center | bottom

属性值

值	描述
left top left center left bottom right top right center right bottom center top center center center bottom	如果仅指定一个关键字，其他值将会是"center"
x% y%	第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。。默认值为：0％0％
xpos ypos	第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px0px）或任何其他 CSS单位。如果仅指定了一个值，其他值将是50％。你可以混合使用％和positions
inherit	指定background-position属性设置应该从父元素继承

实例

如何定位background-image：

body
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}

尝试一下 »

如何设置页面背景图像
这个例子演示了如何在页面上设置background-image。

如何使用％来定位背景图像
这个例子演示了如何使用％设置页面上的图像位置。

如何使用像素来定位背景图像
这个例子演示了如何使用像素设置页面上的图像位置。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
background-position	1.0	4.0	1.0	1.0	3.5

注意: IE8 及更早的浏览器版本不支持一个元素有多个背景图片。

CSS 教程: CSS Background

CSS 参考手册: background-image 属性

CSS background-repeat 属性

实例

只有垂直方向重复background-image：

body
{
background-image:url('paper.gif');
background-repeat:repeat-y;
}

尝试一下 »

标签定义及使用说明

设置如何平铺对象的 background-image 属性。

默认情况下，重复background-image的垂直和水平方向。

默认值:	repeat
继承:	no
版本:	CSS1
JavaScript 语法:	object.style.backgroundRepeat="repeat-y"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

Property
background-repeat	1.0	4.0	1.0	1.0	3.5

IE8以及更早版本的浏览器不支持多个背景图像在一个元素。

注意 IE7和更早的版本不支持"inherit（继承）"的值。 IE8需要定义！DOCTYPE。 IE9支持"inherit（继承）"。

提示和注释

提示: background-position属性设置背景图像位置。如果指定的位置是没有任何背景，图像总是放在元素的左上角。

属性值

值	说明
repeat	背景图像将向垂直和水平方向重复。这是默认
repeat-x	只有水平位置会重复背景图像
repeat-y	只有垂直位置会重复背景图像
no-repeat	background-image不会重复
inherit	指定background-repea属性设置应该从父元素继承

在线实例

如何在垂直和水平方向重复背景图像
这个例子演示了如何在垂直和水平方向重复背景图像。

如何重复背景图像仅水平方向
这个例子演示了如何重复背景图像仅水平方向。

如何显示背景图像只有一次
这个例子演示了如何显示一个背景图片没有重复只有一次。

CSS 教程: CSS Background

CSS 参考手册: background-position属性

实例

指定背景图像的大小：

div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}

尝试一下 »
在此页底部有更多的例子。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

Property
background-size	4.0 1.0 -webkit-	9.0	4.0 3.6 -moz-	4.1 3.0 -webkit-	10.5 10.0 -o-

标签定义及使用说明

background-size属性指定背景图片大小。

默认值:	auto
继承:	no
版本:	CSS3
JavaScript 语法:	object object.style.backgroundSize="60px 80px"

语法

background-size: length|percentage|cover|contain;

值	描述
length	设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
percentage	将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
cover	此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain	此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

在线实例

拉伸背景图像
拉伸背景图像完全覆盖内容面积。

四个背景图像图像横向拉伸
拉伸4个横向背景图片。

CSS3 教程: CSS3 背景

CSS border 属性

实例

设置四个边框样式：

p
{
border:5px solid red;
}

尝试一下 »

标签定义及使用说明

缩写边框属性设置在一个声明中所有的边框属性。

可以设置的属性分别（按顺序）：border-width, border-style,和border-color.

如果上述值缺少一个没有关系，例如border：＃FF0000;是允许的。

默认值:	not specified
继承:	no
版本:	CSS1
JavaScript 语法:	object object.style.border="3px solid blue"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
border	1.0	4.0	1.0	1.0	3.5

属性值

值	说明
border-width	指定边框的宽度
border-style	指定边框的样式
border-color	指定边框的颜色
inherit	指定应该从父元素继承border属性值

CSS 教程: CSS Border

CSS border-bottom 属性

实例

设置底部边框样式：

p
{
border-style:solid;
border-bottom:thick dotted #ff0000;
}

尝试一下 »

标签定义及使用说明

border-bottom缩写属性设置一个声明中所有底部边框属性。

可以设置的属性分别（按顺序）：border-bottom-width, border-bottom-style,和border-bottom-color.

如果上述值缺少一个没有关系，例如border-bottom：＃FF0000;是允许的

默认值:	not specified
继承:	no
版本:	CSS1
JavaScript 语法:	object object.style.borderBottom="3px solid blue"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
border-bottom	1.0	4.0	1.0	1.0	3.5

Property Values

值	描述
border-bottom-width	指定底部边框宽度
border-bottom-style	指定底部边框样式
border-bottom-color	指定底部边框颜色
inherit	指定border-bottom 属性值，应该从父元素继承

CSS 教程: CSS Border

CSS border-bottom-color 属性

实例

设置底部边框颜色：

p
{
border-style:solid;
border-bottom-color:#ff0000;
}

尝试一下 »

标签定义及使用说明

border-bottom-color属性设置元素的底部边框颜色。

注意使用border-bottom颜色属性前，必须先声明border样式属性。元素必须有边框，你才可以改变颜色。

默认值:	not specified
继承:	no
版本:	CSS1
JavaScript 语法:	object object.style.borderBottomColor="blue"

浏览器支持

所有主要浏览器都支持border-bottom-color属性。

注意 Internet Explorer6（和更早版本）不支持"transparent"属性值。

注意 IE7和更早的版本不支持"inherit(继承)"的值。 IE8需要定义！DOCTYPE。 IE9支持"inherit(继承)"。

Property Values

值	描述	测试
color	指定背景颜色。在CSS颜色值查找颜色值的完整列表。
transparent	指定边框的颜色应该是透明的。这是默认
inherit	指定边框的颜色，应该从父元素继承

CSS 教程: CSS Border

CSS 参考手册: border-bottom 属性

CSS 参考手册

实例

向 div 元素的左下角添加圆角边框：

div{border:2px solid;border-bottom-left-radius:2em;}

亲自试一试

浏览器支持

属性
border-radius	9.0	5.0 4.0 -webkit-	4.0 3.0 -moz-	5.0 3.1 -webkit-	10.5

IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-bottom-left-radius 属性。

定义和用法

border-bottom-left-radius 属性定义左下角边框的形状。

提示：该属性允许您向元素添加圆角边框。

默认值：	0
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.borderBottomLeftRadius="5px"

语法

border-bottom-left-radius: length|% [length|%];

注释：border-bottom-left-radius 属性的长度值和百分比值定义四分之一椭圆（定义外部边框边缘的边角形状）的半径（radii）。第一个值是水平半径，第二个值是垂直半径。如果省略第二个值，则复制第一个值。如果长度为零，则边角为方形，而不是圆形。水平半径的百分比值参考边框盒的宽度，而垂直半径的百分比值参考边框盒的高度。

值	描述	测试
length	定义左下角的形状。	测试
%	以百分比值定义左下角的形状。	测试

实例

向 div 元素的右下角添加圆角边框：

div{border:2px solid;border-bottom-right-radius:2em;}

运行一下

浏览器支持

属性
border-radius	9.0	5.0 4.0 -webkit-	4.0 3.0 -moz-	5.0 3.1 -webkit-	10.5

IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-bottom-right-radius 属性。

定义和用法

border-bottom-right-radius 属性定义右下角边框的形状。

提示：该属性允许您向元素添加圆角边框。

默认值：	0
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.borderBottomRightRadius="5px"

语法

border-bottom-right-radius: length|% [length|%];

注释：border-bottom-right-radius 属性的长度值和百分比值定义四分之一椭圆（定义外部边框边缘的边角形状）的半径（radii）。第一个值是水平半径，第二个值是垂直半径。如果省略第二个值，则复制第一个值。如果长度为零，则边角为方形，而不是圆形。水平半径的百分比值参考边框盒的宽度，而垂直半径的百分比值参考边框盒的高度。

值	描述	测试
length	定义右下角的形状。	测试
%	以百分比值定义右下角的形状。	测试

CSS border-bottom-style 属性

实例

设置底部边框样式：

p
{
border-style:solid;
border-bottom-style:dotted;
}

尝试一下 »

属性定义及使用说明

border-bottom-style属性设置元素底部边框样式。

默认值:	not specified
继承:	no
版本:	CSS1
JavaScript 语法:	object object.style.borderBottomStyle="dotted"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
border-bottom-style	1.0	5.5	1.0	1.0	9.2

属性值

值	说明
none	指定无边框
hidden	与"none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	指定点状边框
dashed	指定虚线边框
solid	指定实线边框
double	指定一个双边框
groove	定义双线。双线的宽度等于 border-width 的值
ridge	定义三维菱形边框。其效果取决于 border-color 的值
inset	定义三维凹边框。其效果取决于 border-color 的值
outset	定义三维凸边框。其效果取决于 border-color 的值
inherit	指定应该从父元素继承边框样式

CSS 教程: CSS Border

CSS 参考手册: border-bottom 属性

CSS border-bottom-width 属性

实例

设置底部边框宽度：

p
{
border-style:solid;
border-bottom-width:15px;
}

尝试一下 »

属性定义及使用说明

border-bottom-width属性设置元素的底部边框宽度。

注意务必先声明border-style属性才可以设置border-bottom-width属性。元素必须有边框，你才可以改变宽度。

默认值:	medium
继承:	no
版本:	CSS1
JavaScript 语法:	object object.style.borderBottomWidth="thick"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
border-bottom-width	1.0	4.0	1.0	1.0	3.5

Property Values

值	说明
thin	定义细的下边框
medium	默认值。定义中等的下边框
thick	定义粗的下边框
length	允许您自定义下边框的宽度
inherit	规定应该从父元素继承边框宽度

CSS 教程: CSS Border

CSS 参考手册: border-bottom property

CSS border-collapse 属性

属性定义及使用说明

border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。

默认值:	separate
继承:	yes
版本:	CSS2
JavaScript 语法:	object object.style.borderCollapse="collapse"

实例

为表格设置合并边框模型：

table{border-collapse:collapse;}

尝试一下 »

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

所有主要浏览器都支持border - collapse属性。

注意： 任何版本的Internet Explorer（包括IE9）支持属性值"inherit"。

注意: border - collapse属性,如果没有指定!DOCTYPE，可能产生意想不到的效果。

有可能的值

值	说明
collapse	如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性
separate	默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性
inherit	规定应该从父元素继承 border-collapse 属性的值

CSS 教程: CSS Table

CSS border-color 属性

实例

设置四个边框颜色：

p
{
border-style:solid;
border-color:#ff0000 #0000ff;
}

尝试一下 »

属性定义及使用说明

border-color属性属性设置四条边框的颜色,此属性可设置 1 到 4 种颜色。

border-color 属性是一个简写属性，可设置一个元素的所有边框中可见部分的颜色，或者为 4 个边分别设置不同的颜色。请看下面的例子：

实例:

border-color:红，绿，蓝,粉红色;

上边框是红色
右边框是绿色
底部边框是蓝
左边框是粉红色

border-color：红，绿，蓝;

上边框是红色
左，右边框是绿色
底部边框是蓝

border-color：红，绿;

顶部和底部边框是红色
左右边框是绿色

border-color：红色;

所有四个边框是红色

注意：请始终把 border-style 属性声明到 border-color 属性之前。元素必须在您改变其颜色之前获得边框。

默认值:	not specified
继承:	no
版本:	CSS1
JavaScript 语法:	object object.style.borderColor="#FF0000 blue"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
border-color	1.0	4.0	1.0	1.0	3.5

属性值

值	说明
color	指定背景颜色。在CSS颜色值查找颜色值的完整列表
transparent	指定边框的颜色应该是透明的。这是默认
inherit	指定边框的颜色，应该从父元素继承

CSS 教程: CSS Border

CSS 参考手册

实例

将图片规定为包围 div 元素的边框：

div{-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */-o-border-image:url(border.png) 30 30 round; /* Opera */border-image:url(border.png) 30 30 round;}

页面底部有更多实例。

浏览器支持

属性
border-image	16.0 4.0 -webkit-	11.0	15.0 3.5 -moz-	6.0 3.1 -webkit-	15.0 11.0 -o-

Internet Explorer 11, Firefox, Opera 15, Chrome 以及 Safari 6 支持 border-image 属性。

Safari 5 支持替代的 -webkit-border-image 属性。

定义和用法

border-image 属性是一个简写属性，用于设置以下属性：

border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat

如果省略值，会设置其默认值。

提示：请使用 border-image-* 属性来构造漂亮的可伸缩按钮！

默认值：	none 100% 1 0 stretch
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.borderImage="url(border.png) 30 30 round"

可能的值

值	描述	测试
border-image-source	用在边框的图片的路径。
border-image-slice	图片边框向内偏移。
border-image-width	图片边框的宽度。
border-image-outset	边框图像区域超出边框的量。
border-image-repeat	图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。	测试

亲自试一试 - 实例

Border-image 按钮: 本例演示如何通过 border-image 属性来创建按钮。

实例

设置 border-image-outset 属性：

div{border-image-source: url(border.png);border-image-outset: 30 30;}

浏览器支持

属性
border-image-outset	15.0	11.0	15.0	6.0	15.0

Opera 不支持 border-image-outset 属性。

Internet Explorer 10 以及更早的版本不支持 border-image-outset 属性。

Safari 5 以及更早的版本不支持 border-image-outset 属性。

请参阅 border-image 属性。

定义和用法

border-image-outset 属性规定边框图像超过边框盒的量。

默认值：	0
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.borderImageOutset="30 30"

可能的值

border-image-outset: length|number;

注释：border-image-outset 属性规定边框图像超出边框盒的量。在上、右、下、左侧。如果忽略第四个值，则与第二个值相同。如果省略第三个值，则与第一个值相同。如果省略第二个值，则与第一个值相同。不允许任何负值作为 border-image-outset 值。

值	描述
length
number	代表对应的 border-width 的倍数。

实例

规定如何重复图像边框：

div{border-image-source: url(border.png);border-image-repeat: round;}

浏览器支持

属性
border-image-repeat	15.0	11.0	15.0	6.0	15.0

Opera 不支持 border-image-repeat 属性。

Internet Explorer 10 以及更早的版本不支持 border-image-repeat 属性。

Safari 5 以及更早的版本不支持 border-image-repeat 属性。

请参阅 border-image 属性。

定义和用法

border-image-repeat 属性规定图像边框是否应该被重复（repeated）、拉伸（stretched）或铺满（rounded）。

默认值：	stretch
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.borderImageRepeat="round"

可能的值

border-image-repeat: stretch|repeat|round;

注释：该属性规定如何延展和铺排边框图像的边缘和中间部分。因此，您可以规定两个值。如果省略第二个值，则采取与第一个值相同的值。

值	描述
stretch	拉伸图像来填充区域
repeat	平铺（重复）图像来填充区域。
round	类似 repeat 值。如果无法完整平铺所有图像，则对图像进行缩放以适应区域。

实例

使用一幅图像作为围绕 div 元素的边框：

div{  border-image-source: url(border.png);}

浏览器支持

属性
border-image-source	15.0	11.0	15.0	6.0	15.0

Opera 不支持 border-image-source 属性。

Internet Explorer 10 以及更早的版本不支持 border-image-source 属性。

Safari 5 以及更早的版本不支持 border-image-source 属性。

请参阅 border-image 属性。

定义和用法

border-image-source 属性规定要使用的图像，代替 border-style 属性中设置的边框样式。

提示：如果值为 "none"，或者如果图像无法显示，则使用边框样式。

默认值：	none
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.borderImageSource="url(border.png)"

语法

border-image-source: none|image;

值	描述
none	不使用图像。
image	用作边框的图像的路径。

定义和用法

border-image-width 属性规定图像边框的宽度。

默认值：	none
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.borderImageWidth="30 30"

语法

border-image-width: number|%|auto;

注意：border-image -width的4个值指定用于把border图像区域分为九个部分。他们代表上，右，底部，左，两侧向内距离。如果第四个值被省略，它和第二个是相同的。如果也省略了第三个，它和第一个是相同的。如果也省略了第二个，它和第一个是相同的。负值是不允许的。

值	描述
number	代表对应的 border-width 的倍数。
%	参考边框图像区域的尺寸：区域的高度影响水平偏移，宽度影响垂直偏移。
auto	如果规定该属性，则宽度为对应的图像切片的固有宽度。

实例

规定图像边框的宽度：

div{border-image-source: url(border.png);border-image-width: 30 30;}

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
border-image-width	15.0	11.0	13.0	6.0	15.0

Opera 不支持 border-image-width 属性。

Internet Explorer 10 以及更早的版本不支持 border-image-width 属性。

Safari 5 以及更早的版本不支持 border-image-width 属性。

请参阅 border-image 属性。

CSS border-left 属性

实例

设置左边框的样式：

p
{
border-style:solid;
border-left:thick double #ff0000;
}

尝试一下 »

属性定义及使用说明

border-left 简写属性把左边框的所有属性设置到一个声明中。

可以按顺序设置如下属性： border-left-width, border-left-style, and border-left-color.

如果不设置其中的某个值，也不会出问题，比如 border-left:solid #ff0000; 也是允许的。

默认值：	not specified
继承性：	no
版本：	CSS1
JavaScript 语法：	object.style.borderLeft="3px solid blue"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
border-left	1.0	4.0	1.0	3.5	1.0

Property Values

值	描述
border-left-width	规定左边框的宽度。参阅：border-left-width 中可能的值。
border-left-style	规定左边框的样式。参阅：border-left-style 中可能的值。
border-left-color	规定左边框的颜色。参阅：border-left-color 中可能的值。
inherit	规定应该从父元素继承 border-left 属性的设置。

CSS 教程: CSS Border

CSS border-left-color 属性

实例

设置左边框颜色：

p
{
border-style:solid;
border-left-color:#ff0000
}

尝试一下 »

属性定义及使用说明

border-left-color属性设置一个元素的左边框颜色。

注意请始终把border-style属性声明到border-color属性之前。元素必须在您改变其颜色之前获得边框。

默认值:	not specified
继承:	no
版本:	CSS1
JavaScript 语法:	object object.style.borderLeftColor="blue"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
border-left-color	1.0	4.0	1.0	3.5	1.0

Property Values

值	说明
color	指定左边框颜色。在CSS颜色值查找颜色值的完整列表。
transparent	指定边框的颜色应该是透明的。这是默认
inherit	指定边框的颜色，应该从父元素继承

CSS 教程: CSS Border

CSS 参考手册: border-left 属性

CSS border-left-style 属性

实例

Set the style of the left border:

p
{
border-style:solid;
border-left-style:dotted;
}

尝试一下 »

属性定义及使用说明

border-left-style 设置元素左边框的样式。

默认值：	not specified
继承性：	no
版本：	CSS1
JavaScript 语法：	object.style.borderLeftStyle="dotted"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
border-left-style	1.0	5.5	1.0	1.0	9.2

属性值

值	描述
none	定义无边框。
hidden	与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值。
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
inset	定义 3D inset 边框。其效果取决于 border-color 的值。
outset	定义 3D outset 边框。其效果取决于 border-color 的值。
inherit	规定应该从父元素继承边框样式。

CSS 教程: CSS Border

CSS 参考手册: border-left 属性

CSS border-left-width 属性

实例

设置左边框的宽度：

p
{
border-style:solid;
border-left-width:15px;
}

尝试一下 »

属性定义及使用说明

border-left-width 属性设置元素的左边框的宽度。

只有当边框样式不是 none 时才起作用。如果边框样式是 none，边框宽度实际上会重置为 0。不允许指定负长度值。

注意:请始终在 border-left-width 属性之前声明 border-style 属性。元素只有在获得边框之后，才能改变其边框的宽度。

默认值：	medium
继承性：	no
版本：	CSS1
JavaScript 语法：	object.style.borderLeftWidth="thick"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
border-left-width	1.0	4.0	1.0	1.0	3.5

属性值

值	描述
thin	定义细的左边框。
medium	默认值。定义中等的左边框。
thick	定义粗的左边框。
length	允许您自定义左边框的宽度。
inherit	规定应该从父元素继承边框宽度。

CSS 教程: CSS Border

CSS 参考手册: border-left 属性

CSS 参考手册

实例

规定图像边框的向内偏移：

div{border-image-source: url(border.png);border-image-slice: 50% 50%;}

浏览器支持

属性
border-image-slice	15.0	11.0	15.0	6.0	15.0

Opera 不支持 border-image-slice 属性。

Internet Explorer 10 以及更早的版本不支持 border-image-slice 属性。

Safari 5 以及更早的版本不支持 border-image-slice 属性。

请参阅 border-image 属性。

定义和用法

border-image-slice 属性规定图像边框的向内偏移。

默认值：	100%
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.borderImageSlice="50% 50%"

语法

border-image-slice: number|%|fill;

注释：该属性规定图像的上、右、下、左侧边缘的向内偏移，图像被分割为九个区域：四个角、四条边以及一个中间区域。除非使用了关键词 fill，否则中间的图像部分会被丢弃。如果省略第四个数值/百分比，则与第二个值相同。如果省略第三个值，则与第一个值相同。如果省略第二个值，则与第一个值相同。

值	描述
number	数字值，代表图像中像素（如果是光栅图像）或矢量坐标（如果是矢量图像）。
%	相对于图像尺寸的百分比值：图像的宽度影响水平偏移，高度影响垂直偏移。
fill	保留边框图像的中间部分。

实例

向 div 元素添加圆角边框：

div{border:2px solid;border-radius:25px;}

亲自试一试

页面底部有更多实例。

浏览器支持

属性
border-radius	4.0 -webkit-	9.0	4.0 -moz-	5.0 -webkit-	10.5 -o-

IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-radius 属性。

定义和用法

border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。

提示：该属性允许您为元素添加圆角边框！

默认值：	0
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.borderRadius="5px"

语法

border-radius: 1-4 length|% / 1-4 length|%;

注释：按此顺序设置每个 radii 的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。

值	描述	测试
length	定义圆角的形状。	测试
%	以百分比定义圆角的形状。	测试

例子 1

border-radius:2em;

等价于：

border-top-left-radius:2em;border-top-right-radius:2em;border-bottom-right-radius:2em;border-bottom-left-radius:2em;

例子 2

border-radius: 2em 1em 4em / 0.5em 3em;

等价于：

border-top-left-radius: 2em 0.5em;border-top-right-radius: 1em 3em;border-bottom-right-radius: 4em 0.5em;border-bottom-left-radius: 1em 3em;

CSS border-right 属性

实例

设置右边框的样式：

p
{
border-style:solid;
border-right:thick double #ff0000;
}

尝试一下 »

属性定义及使用说明

border-right 简写属性把左边框的所有属性设置到一个声明中。

可以设置的属性是（按顺序）：border-right-width, border-right-style, and border-right-color.

如果上述值缺少一个，没有关系，例如border-right:solid #ff0000; 是允许的。

默认值:	not specified
继承:	no
版本:	CSS1
JavaScript 语法:	object object.style.borderRight="3px solid blue"

浏览器支持

所有主要浏览器都支持border-right属性。

注意IE7和更早的版本不支持"继承"的值。 IE8需要定义！DOCTYPE。 IE9支持"继承"。

Property Values

值	说明
border-right-width	指定右边框的宽度
border-right-style	指定右边框的样式
border-right-color	指定右边框的颜色
inherit	指定了border-right属性的值，应该从父元素继承

CSS 教程: CSS Border

CSS border-right-color 属性

实例

设定右边框的颜色：

p
{
border-style:solid;
border-right-color:#ff0000
}

尝试一下 »

属性定义及使用说明

border-right-color属性设置一个元素的的右边框的颜色。

注意请始终把 border-style 属性声明到 border-color 属性之前。元素必须在您改变其颜色之前获得边框。

默认值:	not specified
继承:	no
版本:	CSS1
JavaScript 语法:	object object.style.borderRightColor="blue"

浏览器支持

所有主要浏览器都支持border-right-color属性。

注意： Internet Explorer6（和更早版本）不支持"transparent"属性值。

注意：任何版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

Property Values

值	描述
color_name	规定颜色值为颜色名称的边框颜色（比如 red）。
hex_number	规定颜色值为十六进制值的边框颜色（比如 #ff0000）。
rgb_number	规定颜色值为 rgb 代码的边框颜色（比如 rgb(255,0,0)）。
transparent	默认值。边框颜色为透明。
inherit	规定应该从父元素继承边框颜色。

CSS 教程: CSS Border

CSS 参考手册: border-right 属性

CSS border-right-style 属性

实例

设定右边框的样式：

p
{
border-style:solid;
border-right-style:dotted;
}

尝试一下 »

属性定义及使用说明

border-right-style属性设置元素右边框的样式。

默认值:	not specified
继承:	no
版本:	CSS1
JavaScript 语法:	object object.style.borderRightStyle="dotted"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
border-right-style	1.0	4.0	1.0	1.0	3.5

Property Values

值	描述
none	定义无边框。
hidden	与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值。
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
inset	定义 3D inset 边框。其效果取决于 border-color 的值。
outset	定义 3D outset 边框。其效果取决于 border-color 的值。
inherit	规定应该从父元素继承边框样式。

CSS 教程: CSS Border

CSS 参考手册: border-right 属性

CSS border-right-width 属性

实例

设置右边框的宽度：

p
{
border-style:solid;
border-right-width:15px;
}

尝试一下 »

属性定义及使用说明

border-right-width属性设置一个元素右边框的宽度。

注意请始终在 border-right-width 属性之前声明 border-style 属性。元素只有在获得边框之后，才能改变其边框的宽度。

默认值：	medium
继承性：	no
版本：	CSS1
JavaScript 语法：	object.style.borderRightWidth="thick"

浏览器支持

所有浏览器都支持 border-right-width 属性。

注意：IE7和更早的版本不支持"继承"的值。 IE8需要定义！DOCTYPE。 IE9支持"继承"。

Property Values

值	描述
thin	定义细的右边框。
medium	默认值。定义中等的右边框。
thick	定义粗的右边框。
length	允许您自定义右边框的宽度。
inherit	规定应该从父元素继承边框宽度。

CSS 教程: CSS Border

CSS 参考手册: border-right 属性

CSS 参考手册

实例

为表格设置 border-spacing：

table  {  border-collapse:separate;  border-spacing:10px 50px;  }

亲自试一试

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

所有主流浏览器都支持 border-spacing 属性。

注释：如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 border-spacing 属性。

定义和用法

border-spacing 属性设置相邻单元格的边框间的距离（仅用于“边框分离”模式）。

注释：某些版本的IE浏览器不支持此属性。

说明

该属性指定分隔边框模型中单元格边界之间的距离。在指定的两个长度值中，第一个是水平间隔，第二个是垂直间隔。除非 border-collapse 被设置为 separate，否则将忽略这个属性。尽管这个属性只应用于表，不过它可以由表中的所有元素继承。

默认值：	not specified
继承性：	yes
版本：	CSS2
JavaScript 语法：	object.style.borderSpacing="15px"

可能的值

值

描述

length length

规定相邻单元的边框之间的距离。使用 px、cm 等单位。不允许使用负值。

如果定义一个 length 参数，那么定义的是水平和垂直间距。

如果定义两个 length 参数，那么第一个设置水平间距，而第二个设置垂直间距。

inherit

规定应该从父元素继承 border-spacing 属性的值。

TIY 实例

设置表格边框之间的空白: 本例演示如何设置单元格边框之间的距离。

CSS border-style 属性

实例

设置四个边框的样式：

p
{
border-style:solid;
}

尝试一下 »

More examples at the bottom of this page.

属性定义及使用说明

border-style属性设置一个元素的四个边框的样式。此属性可以有一到四个值。

实例:

border-style:dotted solid double dashed;

上边框是点状
右边框是实线
下边框是双线
左边框是虚线

border-style:dotted solid double;

上边框是点状
右边框和左边框是实线
下边框是双线

border-style:dotted solid;

上边框和下边框是点状
右边框和左边框是实线

border-style:dotted;

所有4个边框都是点状

默认值:	not specified
继承:	no
版本:	CSS1
JavaScript 语法:	object object.style.borderStyle="dotted double"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
border-style	1.0	4.0	1.0	1.0	3.5

属性值

值	描述
none	定义无边框。
hidden	与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值。
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
inset	定义 3D inset 边框。其效果取决于 border-color 的值。
outset	定义 3D outset 边框。其效果取决于 border-color 的值。
inherit	规定应该从父元素继承边框样式。

在线实例

每边设置不同的边框
本例演示如何在元素的各边设置不同的边框。

CSS 教程: CSS Border

CSS border-top 属性

实例

设置上边框的样式：

p
{
border-style:solid;
border-top:thick double #ff0000;
}

尝试一下 »

属性定义及使用说明

border-top 简写属性把上边框的所有属性设置到一个声明中

可以按顺序设置如下属性： border-top-width, border-top-style, and border-top-color.

如果不设置其中的某个值，也不会出问题，比如 border-top:solid #ff0000; 也是允许的。

默认值：	not specified
继承性：	no
版本：	CSS1
JavaScript 语法：	object.style.borderTop="3px solid blue"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
border-top	1.0	4.0	1.0	1.0	3.5

属性值

值	描述
border-top-width	规定上边框的宽度。参阅：border-top-width 中可能的值。
border-top-style	规定上边框的样式。参阅：border-top-style 中可能的值。
border-top-color	规定上边框的颜色。参阅：border-top-color 中可能的值。
inherit	规定应该从父元素继承 border-top 属性的设置。

CSS 教程: CSS Border

CSS border-top-color 属性

实例

Set the color of the top border:

p
{
border-style:solid;
border-top-color:#ff0000
}

尝试一下 »

属性定义及使用说明

border-top-color 设置元素的上边框的颜色。

注意：请始终把border-style属性声明到border-top-color属性之前。元素必须在您改变其颜色之前获得边框。

默认值：	not specified
继承性：	no
版本：	CSS1
JavaScript 语法：	object.style.borderTopColor="blue"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
border-top-color	1.0	4.0	1.0	1.0	3.5

Property Values

值	描述
color_name	规定颜色值为颜色名称的边框颜色（比如 red）。
hex_number	规定颜色值为十六进制值的边框颜色（比如 #ff0000）。
rgb_number	规定颜色值为 rgb 代码的边框颜色（比如 rgb(255,0,0)）。
transparent	默认值。边框颜色为透明。
inherit	规定应该从父元素继承边框颜色。

CSS 教程: CSS Border

CSS 参考手册: border-top 属性

CSS3 border-top-left-radius 属性

实例

为div元素的左上角添加一个圆角边框：

div
{
border:2px solid;
border-top-left-radius:2em;
}

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
border-radius	9.0	5.0 4.0 -webkit-	4.0 3.0 -moz-	5.0 3.1 -webkit-	10.5

属性定义及使用说明

border-top-left-radius属性定义了左上角的边框形状。

提示: 这个属性允许你为元素添加圆角边框！

默认值:	0
继承:	no
版本:	CSS3
JavaScript 语法:	object object.style.borderTopLeftRadius="5px"

语法

border-top-left-radius: length|% [length|%];

注意: border-top-left--radius属性的两个长度或百分比值定义了椭圆的四分之一外边框的边缘角落的形状。第一个值是水平半径，第二个是垂直半径。如果省略第二个值，它是从第一个复制。如果任一长度为零，角落里是方的，不圆润。水平半径的百分比是指边界框的宽度，而垂直半径的百分比是指边界框的高度。

值	描述
length	定义左上角的形状。
%	使用%定义左上角的形状。

CSS3 教程: CSS3 Borders

CSS3 border-top-right-radius 属性

实例

为div元素的右上角添加一个圆角边框：

div
{
border:2px solid;
border-top-right-radius:2em;
}

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
border-radius	9.0	5.0 4.0 -webkit-	4.0 3.0 -moz-	5.0 3.1 -webkit-	10.5

属性定义及使用说明

border-top-right-radius属性定义了右上角的边框形状。

提示: 这个属性允许你为元素添加圆角边框！

默认值:	0
继承:	no
版本:	CSS3
JavaScript 语法:	object object.style.borderTopRightRadius="5px"

语法

border-top-right-radius: length|% [length|%];

注意: border-top-right--radius属性的两个长度或百分比值定义了椭圆的四分之一外边框的边缘角落的形状。第一个值是水平半径，第二个是垂直半径。如果省略第二个值，它是从第一个复制。如果任一长度为零，角落里是方的，不圆润。水平半径的百分比是指边界框的宽度，而垂直半径的百分比是指边界框的高度。

值	描述
length	定义右上角的形状。
%	使用%定义右上角的形状。

CSS3教程: CSS3 Borders

CSS border-top-style 属性

实例

设置顶部边框样式：

p
{
border-style:solid;
border-top-style:dotted;
}

尝试一下 »

属性定义及使用说明

border-top-style属性设置一个元素的顶部边框样式。

默认值：	not specified
继承性：	no
版本：	CSS1
JavaScript 语法：	object.style.borderTopStyle="dotted"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
border-top-style	1.0	5.5	1.0	1.0	9.2

属性值

值	描述
none	定义无边框。
hidden	与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值。
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
inset	定义 3D inset 边框。其效果取决于 border-color 的值。
outset	定义 3D outset 边框。其效果取决于 border-color 的值。
inherit	规定应该从父元素继承边框样式。

CSS 教程: CSS Border

CSS 参考手册: border-top 属性

CSS border-top-width 属性

实例

设置顶部边框的宽度：

p
{
border-style:solid;
border-top-width:15px;
}

尝试一下 »

属性定义及使用说明

border-top-width属性设置一个元素的顶部边框的宽度。

注意:请始终在 border-top-width 属性之前声明 border-style 属性。元素只有在获得边框之后，才能改变其边框的宽度。

默认值:	medium
继承:	no
版本:	CSS1
JavaScript 语法:	object object.style.borderTopWidth="thick"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
border-top-width	1.0	4.0	1.0	1.0	3.5

属性值

值	描述
thin	定义细的上边框。
medium	默认值。定义中等的上边框。
thick	定义粗的上边框。
length	允许您自定义上边框的宽度。
inherit	规定应该从父元素继承边框宽度。

CSS 教程: CSS Border

CSS 参考手册: border-top 属性

CSS border-width 属性

实例

设置四个边框的宽度：

p
{
border-style:solid;
border-width:15px;
}

尝试一下 »

属性定义及使用说明

border-width属性设置一个元素的四个边框的宽度。此属性可以有一到四个值。

实例:

border-width:thin medium thick 10px;

上边框是细边框
右边框是中等边框
下边框是粗边框
左边框是 10px 宽的边框

border-width:thin medium thick;

上边框是细边框
右边框和左边框是中等边框
下边框是粗边框

border-width:thin medium;

上边框和下边框是细边框
右边框和左边框是中等边框

border-width:thin;

所有4个边框都是细边框

默认值：	medium
继承性：	no
版本：	CSS1
JavaScript 语法：	object.style.borderWidth="thin thick"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
border-width	1.0	4.0	1.0	1.0	3.5

属性值

值	描述
thin	定义细的边框。
medium	默认。定义中等的边框。
thick	定义粗的边框。
length	允许您自定义边框的宽度。
inherit	规定应该从父元素继承边框宽度。

CSS 教程: CSS Border

CSS bottom 属性

实例

设置图像的底部边缘，在元素的底边上面0px与5px：

img.ex1

{

position:absolute;

bottom:0px;

}

img.ex2

{

position:relative;

bottom:-100px;

}

尝试一下 »

属性定义及使用说明

对于绝对定位元素，bottom属性设置单位高于/低于包含它的元素的底边。

对于相对定位元素，bottom属性设置单位高于/低于其正常位置的元素的底边。

注意：如果"position：static"，底部的属性没有任何效果。

说明：对于 static 元素，为 auto；对于长度值，则为相应的绝对长度；对于百分比数值，为指定值；否则为 auto。对于相对定义元素，如果 bottom 和 top 都是 auto，其计算值则都是 0；如果其中之一为 auto，则取另一个值的相反数；如果二者都不是 auto，bottom 将取 top 值的相反数。

默认值：	auto
继承性：	no
版本：	CSS2
JavaScript 语法：	object.style.bottom="50px"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
bottom	1.0	5.0	1.0	1.0	6.0

属性值

值	描述
auto	默认值。通过浏览器计算底部的位置。
%	设置以包含元素的百分比计的底边位置。可使用负值。
length	使用 px、cm 等单位设置元素的底边位置。可使用负值。
inherit	规定应该从父元素继承 bottom 属性的值。

CSS 教程: CSS Positioning

CSS 参考手册

实例

通过使用 box-align and box-pack 属性，居中 div 框的子元素：

div{width:350px;height:100px;border:1px solid black;/* Firefox */display:-moz-box;-moz-box-pack:center;-moz-box-align:center;/* Safari、Opera 以及 Chrome */display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;/* W3C */display:box;box-pack:center;box-align:center;}

亲自试一试

页面底部有更多实例。

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

目前没有浏览器支持 box-align 属性。

Firefox 支持替代的 -moz-box-align 属性。

Safari、Opera 以及 Chrome 支持替代的 -webkit-box-align 属性。

定义和用法

box-align 属性规定如何对齐框的子元素。

默认值：	stretch
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.boxAlign="center"

语法

box-align: start|end|center|baseline|stretch;

值	描述	测试
start	对于正常方向的框，每个子元素的上边缘沿着框的顶边放置。对于反方向的框，每个子元素的下边缘沿着框的底边放置。	测试
end	对于正常方向的框，每个子元素的下边缘沿着框的底边放置。对于反方向的框，每个子元素的上边缘沿着框的顶边放置。	测试
center	均等地分割多余的空间，一半位于子元素之上，另一半位于子元素之下。	测试
baseline	如果 box-orient 是inline-axis或horizontal，所有子元素均与其基线对齐。	测试
stretch	拉伸子元素以填充包含块

亲自试一试 - 实例

改变元素的 box-align 值: 该例演示如何使用 JavaScript 来改变元素的 box-align 值。

CSS 参考手册

实例

以反方向显示 div 框的子元素：

div{width:350px;height:100px;border:1px solid black;/* Firefox */display:-moz-box;-moz-box-direction:reverse;/* Safari、Opera 以及 Chrome */display:-webkit-box;-webkit-box-direction:reverse;/* W3C */display:box;box-direction:reverse;}

亲自试一试

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

目前没有浏览器支持 box-direction 属性。

Firefox 支持替代的 -moz-box-direction 属性。

Safari、Opera 以及 Chrome 支持替代的 -webkit-box-direction 属性。

定义和用法

box-direction 属性规定框元素的子元素以什么方向来排列。

默认值：	normal
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.boxDirection="reverse"

语法

box-direction: normal|reverse|inherit;

值	描述	测试
normal	以默认方向显示子元素。	测试
reverse	以反方向显示子元素。	测试
inherit	应该从子元素继承 box-direction 属性的值

CSS 参考手册

实例

定义两个可伸缩的 p 元素。如果父元素的总宽度是 300 像素，则 #p1 的宽度是 100 像素，而 #p2 的宽度是 200 像素：

#p1{-moz-box-flex:1.0; /* Firefox */-webkit-box-flex:1.0; /* Safari 和 Chrome */box-flex:1.0;border:1px solid red;}#p2{-moz-box-flex:2.0; /* Firefox */-webkit-box-flex:2.0; /* Safari 和 Chrome */box-flex:2.0;border:1px solid blue;}

亲自试一试

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

目前没有浏览器支持 box-flex 属性。

Firefox 支持替代的 -moz-box-flex 属性。

Safari、Opera 以及 Chrome 支持替代的 -webkit-box-flex 属性。

定义和用法

box-flex 属性规定框的子元素是否可伸缩其尺寸。

提示：可伸缩元素能够随着框的缩小或扩大而缩写或放大。只要框中有多余的空间，可伸缩元素就会扩展来填充这些空间。

默认值：	0.0（指示该元素不可伸缩）
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.boxFlex=2.0

语法

box-flex: value;

值	描述
value	元素的可伸缩行。柔性是相对的，例如 box-flex 为 2 的子元素两倍于 box-flex 为 1 的子元素。

CSS 参考手册

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

目前没有浏览器支持 box-flex-group 属性。

定义和用法

box-flex-group 属性用于向柔性分组分配可伸缩元素。

提示：可伸缩元素能够随着框的缩小和扩大而伸缩。

默认值：	1
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.boxFlexGroup=2

语法

box-flex-group: integer;

值	描述
integer	一个整数。（第一个柔性分组是 1，后面的柔性分组是更大的值）。

CSS 参考手册

实例

规定允许 div 扩展为多行：

div{display:box;box-orient:horizontal;box-lines:multiple;width:200px;}

亲自试一试

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

目前没有浏览器支持 box-lines 属性。

定义和用法

box-lines 属性规定如果列超出了父框中的空间，是否要换行显示。

提示：默认地，水平框会在单独的行中排列其子元素，而垂直框会在单独的列中排列其子元素。

默认值：	single
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.boxLines="multiple"

语法

box-lines: single|multiple;

值	描述
single	所有子元素会被放置在单独的行或列中。（无法匹配的元素会被视为溢出）。
multiple	允许框扩展为多行，以容纳其所有子元素。

CSS 参考手册

实例

规定框中子元素的显示次序：

.box{display:-moz-box; /* Firefox */display:-webkit-box; /* Safari 和 Chrome */display:box;border:1px solid black;}.ord1{margin:5px;-moz-box-ordinal-group:1; /* Firefox */-webkit-box-ordinal-group:1; /* Safari 和 Chrome */box-ordinal-group:1;}.ord2{margin:5px;-moz-box-ordinal-group:2; /* Firefox */-webkit-box-ordinal-group:2; /* Safari 和 Chrome */box-ordinal-group:2;}

亲自试一试

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

目前没有浏览器支持 box-ordinal-group 属性。

Firefox 支持替代的 -moz-box-ordinal-group 属性。

Safari 和 Chrome 支持替代的 -webkit-box-ordinal-group 属性。

定义和用法

box-ordinal-group 属性规定框中子元素的显示次序。

值更低的元素会显示在值更高的元素前面显示。

注释：分组值相同的元素，它们的显示次序取决于其源次序。

默认值：	1
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.boxOrdinalGroup=2

语法

box-ordinal-group: integer;

值	描述	测试
integer	一个整数，指示子元素的显示次序。	测试

CSS 参考手册

CSS3 box-orient 属性

实例

指定div元素的子元素横向排列：

div
{
width:350px;
height:100px;
border:1px solid black;

/* Firefox */
display:-moz-box;
-moz-box-orient:horizontal;

/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-orient:horizontal;

/* W3C */
display:box;
box-orient:horizontal;
}

尝试一下 »

浏览器支持

目前所有主流浏览器都不支持box-orient属性。

Firefox通过私有属性- MOZ-box-orient支持。

Safari, Opera, 和 Chrome通过私有属性 -webkit-box-orient 支持.

属性定义及使用说明

box-orient 属性指定一个box子元素是否应按水平或垂直排列。

Tip: 水平方向的box里的子元素是由左到右显示，垂直方向的box显示从上到下排列。然而，box-direction方向可由 box-ordinal-group属性改变这个顺序。

默认值:	inline-axis
继承:	no
版本:	CSS3
JavaScript 语法:	object.style.boxOrient="vertical"

语法

box-orient: horizontal|vertical|inline-axis|block-axis|inherit;

值	说明
horizontal	指定子元素在一个水平线上从左至右排列
vertical	从顶部向底部垂直布置子元素
inline-axis	子元素沿着内联坐标轴（映射到横向）
block-axis	子元素沿着块坐标轴（映射到垂直）
inherit	box-orient 属性的值应该从父元素继承

CSS3 box-pack 属性

实例

对div中的子元素同时使用box-align和box-pack的居中属性：

div
{
width:350px;
height:100px;
border:1px solid black;

/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Chrome, and Opera */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;
}

尝试一下 »

浏览器支持

目前主流浏览器都不支持box-pack属性。

Internet Explorer 10 使用 -ms-flex-pack property 属性来代替支持。

Firefox通过私有属性- MOZ-box-pack支持。

Safari, Opera, 和 Chrome 通过私有属性 -webkit-box-pack 支持.

注意： Internet Explorer 9及更早IE版本不支持弹性框.

属性定义及使用说明

box-pack属性指定一个box的子元素时，被置于该框的子元素小于该框。

此属性指定横向框的水平位置，垂直位置的垂直框。

默认值:	start
继承:	no
版本:	CSS3
JavaScript 语法:	object.style.boxPack="center"

语法

box-pack: start|end|center|justify;

值	说明
start	对于普通方向的boxes，左边缘的第一个子元素被放置在左侧（所有额外的空间放置后的最后一个子元素）。对于反向boxes，右边缘最后一个子元素放置在右侧（所有额外的空间放置前的第一个子元素）
end	对于正常的方向的boxes，最后一个子元素的右边缘放置在右侧（所有额外的空间放置前的第一个子元素）。对于反向boxes，第一个孩子的左边缘放置在左侧（所有额外的空间放置后的最后一个子元素）
center	额外的空间划分均匀的两半，前一半放置第一个子元素，另一半放置最后一个子元素
justify	额外的空间平均分配给每个子元素

CSS 参考手册

实例

向 div 元素添加 box-shadow：

div{box-shadow: 10px 10px 5px #888888;}

亲自试一试

页面底部有更多实例。

浏览器支持

属性
border-image	10.0 -webkit-	9.0.0	4.0 (2.0)[3] 3.5(1.9.1) -moz	5.1[1] 3.0 -webkit	10.5[1] -o-

IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。

定义和用法

box-shadow 属性向框添加一个或多个阴影。

提示：请使用 border-image-* 属性来构造漂亮的可伸缩按钮！

默认值：	none
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.boxShadow="10px 10px 5px #888888"

语法

box-shadow: h-shadow v-shadow blur spread color inset;

注释：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

值	描述	测试
h-shadow	必需。水平阴影的位置。允许负值。	测试
v-shadow	必需。垂直阴影的位置。允许负值。	测试
blur	可选。模糊距离。	测试
spread	可选。阴影的尺寸。	测试
color	可选。阴影的颜色。请参阅 CSS 颜色值。	测试
inset	可选。将外部阴影 (outset) 改为内部阴影。	测试

亲自试一试 - 实例

扔到桌子上面的图片: 本例演示如何创建“Ballade”图片，并旋转图片。

实例

规定两个并排的带边框的框：

div{box-sizing:border-box;-moz-box-sizing:border-box; /* Firefox */-webkit-box-sizing:border-box; /* Safari */width:50%;float:left;}

亲自试一试

页面底部有更多实例。

浏览器支持

属性
box-sizing	10.0 4.0 -webkit-	8.0	29.0 2.0 -moz-	5.1 3.2 -webkit-	9.5

Internet Explorer、Opera 以及 Chrome 支持 box-sizing 属性。

Firefox 支持替代的 -moz-box-sizing 属性。

定义和用法

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。

默认值：	content-box
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.boxSizing="border-box"

语法

box-sizing: content-box|border-box|inherit;

值

描述

content-box

这是由 CSS2.1 规定的宽度高度行为。

宽度和高度分别应用到元素的内容框。

在宽度和高度之外绘制元素的内边距和边框。

border-box

为元素设定的宽度和高度决定了元素的边框盒。

就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

inherit

规定应从父元素继承 box-sizing 属性的值。

CSS caption-side 属性

实例

指定表格标题的位置：

caption
{
caption-side:bottom;
}

尝试一下 »

属性定义及使用说明

Tcaption-side 属性设置表格标题的位置。

默认值：	top
继承性：	yes
版本：	CSS2
JavaScript 语法：	object.style.captionSide="bottom"

浏览器支持

所有主流浏览器都支持caption-side属性。

注意：IE8只有指定!DOCTYPE才支持caption-side属性。

属性值

值	描述
top	默认值。把表格标题定位在表格之上。
bottom	把表格标题定位在表格之下。
inherit	规定应该从父元素继承 caption-side 属性的值。

CSS 教程: CSS Table

CSS clear 属性

实例

指定段落的左侧或右侧不允许浮动的元素：

img
{
float:left;
}
p.clear
{
clear:both;
}

尝试一下 »
本页底部查看更多实例。

属性定义及使用说明

clear属性指定段落的左侧或右侧不允许浮动的元素。

默认值：	none
继承性：	no
版本：	CSS1
JavaScript 语法：	object.style.clear="left"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
clear	1.0	5.0	1.0	1.0	6.0

属性值

值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值。

CSS 教程: CSS Float

CSS clip 属性

实例

裁剪一张图像：

img
{
position:absolute;
clip:rect(0px,60px,200px,0px);
}

尝试一下 »

属性定义及使用说明

如果图像大于包含它的元素，会发生什么？-clip属性，让你指定一个绝对定位的元素，该尺寸应该是可见的，该元素被剪裁成这种形状并显示。

注意：: 如果先有"overflow：visible"，clip属性不起作用。

默认值:	auto
继承:	no
版本:	CSS2
JavaScript 语法:	object.style.clip="rect(0px,50px,50px,0px)"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
clip	1.0	8.0	1.0	1.0	7.0

属性值

值	描述
shape	设置元素的形状。唯一合法的形状值是：rect (top, right, bottom, left)
auto	默认值。不应用任何剪裁。
inherit	规定应该从父元素继承 clip 属性的值。

CSS 教程: CSS Positioning

CSS color 属性

实例

不同元素设置text-color：

body
{
color:red;
}
h1
{
color:#00ff00;
}
p
{
color:rgb(0,0,255);
}

尝试一下 »

属性定义及使用说明

Color属性指定文本的颜色。

默认值:	not specified
继承:	no
版本:	CSS1
JavaScript 语法:	object.style.color="#FF0000"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
color	1.0	3.0	1.0	1.0	3.5

提示和注释

提示:请使用合理的背景颜色和文本颜色搭配，这样可以提高文本的可读性。

Property Values

值	描述
color_name	规定颜色值为颜色名称的颜色（比如 red）。
hex_number	规定颜色值为十六进制值的颜色（比如 #ff0000）。
rgb_number	规定颜色值为 rgb 代码的颜色（比如 rgb(255,0,0)）。
inherit	规定应该从父元素继承颜色。

CSS 教程: CSS Text

CSS 参考手册

实例

将 div 元素中的文本分为三列：

div{-moz-column-count:3; /* Firefox */-webkit-column-count:3; /* Safari 和 Chrome */column-count:3;}

亲自试一试

页面底部有更多实例。

浏览器支持

属性
column-count	50.0 4.0 -webkit-	10.0	2.0 -moz-	9.0 3.1 -webkit-	37.0 15.0 -webkit 11.1

Internet Explorer 10 和 Opera 支持 column-count 属性。

Firefox 支持替代的 -moz-column-count 属性。

Safari 和 Chrome 支持替代的 -webkit-column-count 属性。

注释：Internet Explorer 9 以及更早版本的浏览器不支持 column-count 属性。

定义和用法

column-count 属性规定元素应该被划分的列数。

默认值：	auto
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.columnCount=3

语法

column-count: number|auto;

值	描述	测试
number	元素内容将被划分的最佳列数。	测试
auto	由其他属性决定列数，比如 "column-width"。	测试

亲自试一试 - 实例

Column-gap: 将 div 元素中的文本分为三列，并规定列间 30 像素的间隔。
Column-rule: 规定列之间的宽度、样式和颜色。

实例

规定如何对列进行填充：

div{column-fill:auto;}

浏览器支持

主流浏览器都不支持 column-fill 属性。

定义和用法

属性
column-fill	不支持	不支持	13.0 -moz-	不支持	不支持

column-fill 属性规定如何填充列（是否进行协调）。

默认值：	balance
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.columnFill="auto"

语法

column-fill: balance|auto;

值	描述
balance	对列进行协调。浏览器应对列长度的差异进行最小化处理。
auto	按顺序对列进行填充，列长度会各有不同。

亲自试一试 - 实例

Column-count: 把 div 元素中的文本划分为三列。
Column-gap: 将 div 元素中的文本分为三列，并规定列间 30 像素的间隔。
Column-rule: 规定列之间的宽度、样式和颜色。

实例

规定列间的间隔为 40 像素：

div{-moz-column-gap:40px; /* Firefox */-webkit-column-gap:40px; /* Safari 和 Chrome */column-gap:40px;}

亲自试一试

页面底部有更多实例。

浏览器支持

IE	Firefox	Chrome	Safari	Opera

Internet Explorer 10 和 Opera 支持 column-gap 属性。

Firefox 支持替代的 -moz-column-gap 属性。

Safari 和 Chrome 支持替代的 -webkit-column-gap 属性。

注释：Internet Explorer 9 以及更早版本的浏览器不支持 column-gap 属性。

定义和用法

column-gap 属性规定列之间的间隔。

注释：如果列之间设置了 column-rule，它会在间隔中间显示。

默认值：	normal
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.columnGap="40px"

语法

column-gap: length|normal;

值	描述	测试
length	把列间的间隔设置为指定的长度。	测试
normal	规定列间间隔为一个常规的间隔。W3C 建议的值是 1em。	测试

亲自试一试 - 实例

Column-count: 把 div 元素中的文本划分为三列。
Column-rule: 规定列之间的宽度、样式和颜色。

CSS3 column-rule 属性

实例

指定列之间的规则：宽度，样式和颜色：

div
{
column-rule:3px outset #ff00ff;
-moz-column-rule:3px outset #ff00ff; /* Firefox */
-webkit-column-rule:3px outset #ff00ff; /* Safari and Chrome */
}

尝试一下 »
在此页底部有更多的例子。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
column-rule	50.0 4.0 -webkit-	10.0	2.0 -moz-	9.0 3.1 -webkit-	37.0 15.0 -webkit 11.1

属性定义及使用说明

column-rule 属性

column-rule属性是一个速记属性设置所有column-rule-*属性。column-rule属性设置列之间的宽度，样式和颜色。

默认值:	medium none black
继承:	no
版本:	CSS3
JavaScript 语法:	object.style.columnRule="3px outset #ff00ff"

语法

column-rule: column-rule-width column-rule-style column-rule-color;

值	说明
column-rule-width	设置列中之间的宽度规则
column-rule-style	设置列中之间的样式规则
column-rule-color	设置列中之间的颜色规则

CSS3 column-rule-color 属性

实例

指定列之间的颜色规则：

div
{
column-rule-color:#ff0000;
-moz-column-rule-color:#ff0000; /* Firefox */
-webkit-column-rule-color:#ff0000; /* Safari and Chrome */
}

尝试一下 »
在此页底部有更多的例子。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
column-rule-color	50.0 4.0 -webkit-	10.0	2.0 -moz-	9.0 3.1 -webkit-	37.0 15.0 -webkit 11.1

属性定义及使用说明

column-rule-color属性指定列之间的颜色规则。

默认值:	black
继承:	no
版本:	CSS3
JavaScript 语法:	object.style.columnRuleColor="#ff00ff"

语法

column-rule-color: color;

值	描述	测试
color	指定颜色的规则。在CSS颜色值寻找颜色值的完整列表

CSS3 column-rule-style 属性

实例

指定列之间的样式规则：

div
{
column-rule-style:dotted;
-moz-column-rule-style:dotted; /* Firefox */
-webkit-column-rule-style:dotted; /* Safari and Chrome */
}

尝试一下 »
在此页底部有更多的例子。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
column-rule-style	50.0 4.0 -webkit-	10.0	2.0 -moz-	9.0 3.1 -webkit-	37.0 15.0 -webkit 11.1

属性定义及使用说明

column-rule-style属性指定列之间的样式规则。

默认值:	none
继承:	no
版本:	CSS3
JavaScript 语法:	object.style.columnRuleStyle="dotted"

语法

值	描述
none	定义没有规则。
hidden	定义隐藏规则。
dotted	定义点状规则。
dashed	定义虚线规则。
solid	定义实线规则。
double	定义双线规则。
groove	定义 3D grooved 规则。该效果取决于宽度和颜色值。
ridge	定义 3D ridged 规则。该效果取决于宽度和颜色值。
inset	定义 3D inset 规则。该效果取决于宽度和颜色值。
outset	定义 3D outset 规则。该效果取决于宽度和颜色值。

CSS3 column-rule-width 属性

实例

指定列之间的宽度规则：

div
{
column-rule-width:10px;
-moz-column-rule-width:10px; /* Firefox */
-webkit-column-rule-width:10px; /* Safari and Chrome */
}

尝试一下 »
在此页底部有更多的例子。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
column-rule-width	50.0 4.0 -webkit-	10.0	2.0 -moz-	9.0 3.1 -webkit-	37.0 15.0 -webkit 11.1

属性定义及使用说明

column-rule-width属性指定列之间的宽度规则。

默认值:	medium
继承:	no
版本:	CSS3
JavaScript 语法:	object.style.columnRuleWidth="thin"

语法

column-rule-width: thin|medium|thick|length;

值	说明
thin	指定一个细边框的规则
medium	定义一个中等边框规则
thick	指定一个粗边框的规则
length	指定宽度的规则

实例

使 h2 元素横跨所有列：

h2{-webkit-column-span:all; /* Chrome */column-span:all;}

亲自试一试

页面底部有更多实例。

浏览器支持

IE	Firefox	Chrome	Safari	Opera

Internet Explorer 10 和 Opera 支持 column-span 属性。

Safari 和 Chrome 支持替代的 -webkit-column-span 属性。

注释：Internet Explorer 9 以及更早版本的浏览器不支持 column-span 属性。

定义和用法

column-span 属性规定元素应横跨多少列。

默认值：	1
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.columnSpan="all"

语法

column-span: 1|all;

值	描述	测试
1	元素应横跨一列。	测试
all	元素应横跨所有列。	测试

亲自试一试 - 实例

Column-count: 把 div 元素中的文本划分为三列。
Column-gap: 将 div 元素中的文本分为三列，并列间 30 像素的间隔。
Column-rule: 规定列之间的宽度、样式和颜色。

实例

规定列的宽度：

div{column-width:100px;-moz-column-width:100px; /* Firefox */-webkit-column-width:100px; /* Safari 和 Chrome */}

亲自试一试

页面底部有更多实例。

浏览器支持

IE	Firefox	Chrome	Safari	Opera

Internet Explorer 10 和 Opera 支持 column-width 属性。

Firefox 支持替代的 -moz-column-width 属性。

Safari 和 Chrome 支持替代的 -webkit-column-width 属性。

注释：Internet Explorer 9 以及更早版本的浏览器不支持 column-width 属性。

定义和用法

column-width 属性规定列的宽度。

默认值：	auto
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.columnWidth="100px"

语法

column-width: auto|length;

值	描述	测试
auto	由浏览器决定列宽。	测试
length	规定列的宽度。	测试

亲自试一试 - 实例

Column-count: 把 div 元素中的文本划分为三列。
Column-gap: 将 div 元素中的文本分为三列，并列间 30 像素的间隔。
Column-rule: 规定列之间的宽度、样式和颜色。

实例

规定列的宽度和列数：

div{columns:100px 3;-moz-columns:100px 3; /* Firefox */-webkit-columns:100px 3; /* Safari 和 Chrome */}

亲自试一试

页面底部有更多实例。

浏览器支持

IE	Firefox	Chrome	Safari	Opera

Internet Explorer 10 和 Opera 支持 column 属性。

Firefox 支持替代的 -moz-column 属性。

Safari 和 Chrome 支持替代的 -webkit-column 属性。

注释：Internet Explorer 9 以及更早版本的浏览器不支持 column 属性。

定义和用法

columns 属性是一个简写属性，用于设置列宽和列数。

默认值：	auto auto
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.columns="100px 3"

语法

columns: column-width column-count;

值	描述
column-width	列的宽度。
column-count	列数。

亲自试一试 - 实例

Column-count: 把 div 元素中的文本划分为三列。
Column-gap: 将 div 元素中的文本分为三列，并列间 30 像素的间隔。
Column-rule: 规定列之间的宽度、样式和颜色。

CSS content 属性

实例

以下示例将在每个链接后的括号内加上网址：

a:after
{
content: " (" attr(href) ")";
}

尝试一下 »

属性定义及使用说明

content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。

默认值：	normal
继承：	no
版本：	CSS2
JavaScript 语法：	object.style.content="url(beep.wav)"

浏览器支持

所有主流浏览器都支持Content属性。

注意： IE8只有指定!DOCTYPE才支持Content属性。

Content属性值

值	说明
none	设置Content，如果指定成Nothing
normal	设置content，如果指定的话，正常，默认是"none"（该是nothing）
counter	设定计数器内容
attr(attribute)	设置Content作为选择器的属性之一。
string	设置Content到你指定的文本
open-quote	设置Content是开口引号
close-quote	设置Content是闭合引号
no-open-quote	如果指定，移除内容的开始引号
no-close-quote	如果指定，移除内容的闭合引号
url(url)	设置某种媒体（图像，声音，视频等内容）
inherit	指定的content属性的值，应该从父元素继承

CSS 参考手册: :before 伪元素

CSS 参考手册: :after 伪元素

CSS counter-increment 属性

实例

对部分和子部分进行编号（比如 "Section 1"、"1.1"、"1.2"）的方法：

body
{
counter-reset:section;
}

h1
{
counter-reset:subsection;
}

h1:before
{
counter-increment:section;
content:"Section " counter(section) ". ";
}

h2:before
{
counter-increment:subsection;
content:counter(section) "." counter(subsection) " ";
}

尝试一下 »

属性定义及使用说明

counter-increment属性递增一个或多个计数器值。

counter-increment属性通常用于counter-reset属性和content属性。

默认值：	none
继承：	no
版本：	CSS2
JavaScript 语法：	object.style.counterIncrement="subsection"

浏览器支持

所有主流浏览器都支持counter-increment属性。

注意：IE8只有指定!DOCTYPE才支持counter-increment属性。

属性值

值	说明
none	没有计数器将递增
id number	id 定义将增加计数的选择器、id 或 class。number 定义增量。number 可以是正数、零或者负数。
inherit	指定counter-increment属性的值，应该从父元素继承

CSS 参考手册: :before 伪元素

CSS 参考手册: :after 伪元素

CSS 参考手册: content 属性

CSS 参考手册: counter-reset 属性

CSS counter-reset 属性

实例

对部分和子部分进行编号（比如 "Section 1"、"1.1"、"1.2"）的方法：

尝试一下 »

属性定义及使用说明

counter-reset属性创建或重置一个或多个计数器。

counter-reset属性通常是和counter-increment属性，content属性一起使用。

默认值：	none
继承：	no
版本：	CSS2
JavaScript 语法：	object.style.counterReset="subsection"

浏览器支持

所有主流浏览器都支持counter-reset属性。

注意： IE8只有指定!DOCTYPE才支持counter-reset属性。

属性值

值	说明
none	默认。不能对选择器的计数器进行重置
id number	id 定义重置计数器的选择器、id 或 class。number 可设置此选择器出现次数的计数器的值。可以是正数、零或负数。
inherit	规定应该从父元素继承 counter-reset 属性的值

CSS reference: :before 伪元素

CSS reference: :after 伪元素

CSS reference: content 属性

CSS reference: counter-increment 属性

CSS cursor 属性

实例

一些不同的光标：

span.crosshair{cursor:crosshair}
span.help{cursor:help}
span.wait{cursor:wait}

尝试一下 »

属性定义及使用说明

cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状

默认值：	auto
继承：	yes
版本：	CSS2
JavaScript 语法：	object.style.cursor="crosshair"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
cursor	5.0	5.5	4.0	5.0	9.6

属性值

值	描述
url	需使用的自定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
default	默认光标（通常是一个箭头）
auto	默认。浏览器设置的光标。
crosshair	光标呈现为十字线。
pointer	光标呈现为指示链接的指针（一只手）
move	此光标指示某对象可被移动。
e-resize	此光标指示矩形框的边缘可被向右（东）移动。
ne-resize	此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize	此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize	此光标指示矩形框的边缘可被向上（北）移动。
se-resize	此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize	此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize	此光标指示矩形框的边缘可被向下移动（北/西）。
w-resize	此光标指示矩形框的边缘可被向左移动（西）。
text	此光标指示文本。
wait	此光标指示程序正忙（通常是一只表或沙漏）。
help	此光标指示可用的帮助（通常是一个问号或一个气球）。

CSS direction 属性

实例

设置文字方向"right-to-left":

div
{
direction:rtl;
}

尝试一下 »

属性定义及使用说明

direction属性指定文本方向/书写方向。

默认值：	ltr
继承：	yes
版本：	CSS2
JavaScript 语法：	object.style.direction="rtl"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
direction	2.0	5.5	1.0	1.3	9.2

属性值

值	描述
ltr	默认。文本方向从左到右。
rtl	文本方向从右到左。
inherit	规定应该从父元素继承 direction 属性的值。

CSS 教程: CSS Text

CSS display 属性

实例

设置段落生成一个行内框：

p.inline
{
display:inline;
}

尝试一下 »

属性定义及使用说明

display 属性规定元素应该生成的框的类型。

默认值：	inline
继承：	no
版本：	CSS1
JavaScript 语法：	object.style.display="inline"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
display	4.0	8.0 Partial from 5.5	3.0	3.1	7.0

属性值

值	描述
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）
list-item	此元素会作为列表显示。
run-in	此元素会根据上下文作为块级元素或内联元素显示。
compact	CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker	CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table	此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table	此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group	此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group	此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group	此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row	此元素会作为一个表格行显示（类似 <tr>）。
table-column-group	此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column	此元素会作为一个单元格列显示（类似 <col>）
table-cell	此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption	此元素会作为一个表格标题显示（类似 <caption>）
inherit	规定应该从父元素继承 display 属性的值。

CSS 教程: CSS Display 和visibility

CSS empty-cells 属性

实例

隐藏表中的空单元格的边框和背景：

table
{
border-collapse:separate;
empty-cells:hide;
}

尝试一下 »

属性定义及使用说明

empty-cells 属性设置是否显示表格中的空单元格（仅用于"分离边框"模式）。

默认值：	show
继承：	yes
版本：	CSS2
JavaScript 语法：	object.style.emptyCells="hide"

浏览器支持

所有主流浏览器都支持empty-cells属性。

注意：只有指定!DOCTYPE，IE8才支持empty-cells属性。

属性值

值	描述
hide	不在空单元格周围绘制边框。
show	在空单元格周围绘制边框。默认。
inherit	规定应该从父元素继承 empty-cells 属性的值。

CSS 教程: CSS Table

CSS3 filter(滤镜) 属性

实例

修改所有图片的颜色为黑白 (100% 灰度):

img {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}

尝试一下 »

定义和使用

filter 属性定义了元素(通常是<img>)的可视效果(例如：模糊与饱和度)。

默认值:	none
继承:	no
动画支持:	是。详细可查阅 CSS 动画
版本:	CSS3
JavaScript 语法:	object.style.WebkitFilter="grayscale(100%)" 尝试一下 »

浏览器支持

表格中的数字表示支持该方法的第一个浏览器的版本号。

紧跟在数字后面的 -webkit- 为指定浏览器的前缀。

属性
filter	18.0 -webkit-	不支持	35.0	6.0 -webkit-	15.0 -webkit-

注意: 旧版 Internet Explorer 浏览器(4.0 to 8.0) 支持的非标准 "filter" 属性已被废弃。 IE8 及更低版本浏览器通常使用 opacity 属性。

CSS 语法

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

提示: 使用空格分隔多个滤镜。

Filter 函数

注意: 滤镜通常使用百分比 (如：75%), 当然也可以使用小数来表示 (如：0.75)。

Filter	描述
none	默认值，没有效果。
blur(px)	给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起，所以值越大越模糊；如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。
brightness(%)	给图片应用一种线性乘法，使其看起来更亮或更暗。如果值是0%，图像会全黑。值是100%，则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的，图像会比原来更亮。如果没有设定值，默认是1。
contrast(%)	调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。
drop-shadow(h-shadow v-shadow blur spread color)	给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。函数接受<shadow>(在CSS3背景中定义)类型的值，除了"inset"关键字是不允许的。该函数与已有的box-shadow box-shadow属性很相似；不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。`<shadow>参数如下：` <offset-x> <offset-y> (必须) 这是设置阴影偏移量的两个 <length>值. <offset-x> 设定水平方向距离. 负值会使阴影出现在元素左边. <offset-y>设定垂直距离.负值会使阴影出现在元素上方。查看<length>可能的单位. 如果两个值都是0, 则阴影出现在元素正后面 (如果设置了 `<blur-radius> and/or <spread-radius>，会有模糊效果).` <blur-radius> (可选) 这是第三个code><length>值. 值越大，越模糊，则阴影会变得更大更淡.不允许负值若未设定，默认是0 (则阴影的边界很锐利). <spread-radius> (可选) 这是第四个 <length>值. 正值会使阴影扩张和变大，负值会是阴影缩小.若未设定，默认是0 (阴影会与元素一样大小). 注意: Webkit, 以及一些其他浏览器不支持第四个长度，如果加了也不会渲染。 <color> (可选) 查看 <color>该值可能的关键字和标记。若未设定，颜色值基于浏览器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中，会应用colorcolor属性的值。另外, 如果颜色值省略，WebKit中阴影是透明的。
grayscale(%)	将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；
hue-rotate(deg)	给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。
invert(%)	反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间，则是效果的线性乘子。若值未设置，值默认是0。
opacity(%)	转化图像的透明程度。值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化。值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。若值未设置，值默认是1。该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。
saturate(%)	转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化。其他值，则是效果的线性乘子。超过100%的值是允许的，则有更高的饱和度。若值未设置，值默认是1。
sepia(%)	将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；
url()	URL函数接受一个XML文件，该文件设置了一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素。例如： filter: url(svg-url#element-id)
initial	设置属性为默认值，可参阅： CSS initial 关键字
inherit	从父元素继承该属性，可参阅：CSS inherit 关键字

CSS flex 属性

CSS 参考手册

实例

让所有弹性盒模型对象的子元素都有相同的长度，忽略它们内部的内容：

#main div
{
flex:1;
}

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。

属性
flex	29.0 21.0 -webkit-	11.0 10.0 -ms-	28.0 18.0 -moz-	9.0 6.1 -webkit-	17.0

定义和用法

flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

注意：如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。

默认值：	0 1 auto
继承：	否
可动画化：	是，参见个别的属性。请参阅可动画化（animatable）。
版本：	CSS3
JavaScript 语法：	object.style.flex="1"尝试一下

CSS 语法

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

属性值

值	描述
flex-grow	一个数字，规定项目将相对于其他灵活的项目进行扩展的量。
flex-shrink	一个数字，规定项目将相对于其他灵活的项目进行收缩的量。
flex-basis	项目的长度。合法值："auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。
auto	与 1 1 auto 相同。
none	与 0 0 auto 相同。
initial	设置该属性为它的默认值，即为 0 1 auto。请参阅 initial。
inherit	从父元素继承该属性。请参阅 inherit。

CSS 参考手册：flex-basis 属性

CSS 参考手册：flex-direction 属性

CSS 参考手册：flex-flow 属性

CSS 参考手册：flex-grow 属性

CSS 参考手册：flex-shrink 属性

CSS 参考手册：flex-wrap 属性

CSS 参考手册

CSS flex-basis 属性

CSS 参考手册

实例

设置第二个弹性盒元素的初始长度为 80 像素：

div:nth-of-type(2) {flex-basis: 80px;}

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。

属性
flex-basis	29.0 21.0 -webkit-	11.0 10.0 -ms-	28.0 18.0 -moz-	9.0 6.1 -webkit-	17.0

定义和用法

flex-basis 属性用于设置或检索弹性盒伸缩基准值。。

注意：如果元素不是弹性盒对象的元素，则 flex-basis 属性不起作用。

默认值：	auto
继承：	否
可动画化：	是。请参阅可动画化（animatable）。尝试一下
版本：	CSS3
JavaScript 语法：	object.style.flexBasis="200px"尝试一下

CSS 语法

flex-basis: number|auto|initial|inherit;

属性值

值	描述
number	一个长度单位或者一个百分比，规定灵活项目的初始长度。
auto	默认值。长度等于灵活项目的长度。如果该项目未指定长度，则长度将根据内容决定。
initial	设置该属性为它的默认值。请参阅 initial。
inherit	从父元素继承该属性。请参阅 inherit。

CSS 参考手册：flex 属性

CSS 参考手册：flex-direction 属性

CSS 参考手册：flex-flow 属性

CSS 参考手册：flex-grow 属性

CSS 参考手册：flex-shrink 属性

CSS 参考手册：flex-wrap 属性

CSS 参考手册

CSS flex-direction 属性

CSS 参考手册

实例

设置 <div> 元素内弹性盒元素的方向为相反的顺序：

div
{
display:flex;
flex-direction:row-reverse;
}

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。

属性
flex-direction	29.0 21.0 -webkit-	11.0 10.0 -ms-	28.0 18.0 -moz-	9.0 6.1 -webkit-	17.0

定义和用法

flex-direction 属性规定灵活项目的方向。

注意：如果元素不是弹性盒对象的元素，则 flex-direction 属性不起作用。

默认值：	row
继承：	否
可动画化：	否。请参阅可动画化（animatable）。
版本：	CSS3
JavaScript 语法：	object.style.flexDirection="column-reverse"尝试一下

CSS 语法

属性值

值	描述	实例
row	默认值。灵活的项目将水平显示，正如一个行一样。	尝试一下 »
row-reverse	与 row 相同，但是以相反的顺序。	尝试一下 »
column	灵活的项目将垂直显示，正如一个列一样。	尝试一下 »
column-reverse	与 column 相同，但是以相反的顺序。	尝试一下 »
initial	设置该属性为它的默认值。请参阅 initial。	尝试一下 »
inherit	从父元素继承该属性。请参阅 inherit。

CSS 参考手册：flex 属性

CSS 参考手册：flex-basis 属性

CSS 参考手册：flex-flow 属性

CSS 参考手册：flex-grow 属性

CSS 参考手册：flex-shrink 属性

CSS 参考手册：flex-wrap 属性

CSS 参考手册

CSS flex-flow 属性

CSS 参考手册

实例

让弹性盒的元素以相反的顺序显示，且在必要的时候进行拆行：

display:flex;
flex-flow:row-reverse wrap;

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。

属性
flex-flow	29.0 21.0 -webkit-	11.0 10.0 -ms-	28.0 18.0 -moz-	9.0 6.1 -webkit-	17.0

定义和用法

flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性。

flex-flow 属性用于设置或检索弹性盒模型对象的子元素排列方式。

flex-direction 属性规定灵活项目的方向。

flex-wrap 属性规定灵活项目是否拆行或拆列。

注意：如果元素不是弹性盒对象的元素，则 flex-flow 属性不起作用。

默认值：	row nowrap
继承：	否
可动画化：	否。请参阅可动画化（animatable）。
版本：	CSS3
JavaScript 语法：	object.style.flexFlow="column nowrap"尝试一下

CSS 语法

flex-flow: flex-direction flex-wrap|initial|inherit;

属性值

值	描述
flex-direction	可能的值： row row-reverse column column-reverse initial inherit 默认值是 "row"。规定灵活项目的方向。
flex-wrap	可能的值： nowrap wrap wrap-reverse initial inherit 默认值是 "nowrap"。规定灵活项目是否拆行或拆列。
initial	设置该属性为它的默认值。请参阅 initial。
inherit	从父元素继承该属性。请参阅 inherit。

CSS 参考手册：flex 属性

CSS 参考手册：flex-basis 属性

CSS 参考手册：flex-direction 属性

CSS 参考手册：flex-grow 属性

CSS 参考手册：flex-shrink 属性

CSS 参考手册：flex-wrap 属性

CSS 参考手册

CSS flex-grow 属性

CSS 参考手册

实例

让第二个元素的宽度为其他元素的三倍：

div:nth-of-type(1) {flex-grow: 1;}
div:nth-of-type(2) {flex-grow: 3;}
div:nth-of-type(3) {flex-grow: 1;}

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。

属性
flex-grow	29.0 21.0 -webkit-	11.0 10.0 -ms-	28.0 18.0 -moz-	9.0 6.1 -webkit-	17.0

定义和用法

flex-grow 属性用于设置或检索弹性盒的扩展比率。。

注意：如果元素不是弹性盒对象的元素，则 flex-grow 属性不起作用。

默认值：	0
继承：	否
可动画化：	是。请参阅可动画化（animatable）。尝试一下
版本：	CSS3
JavaScript 语法：	object.style.flexGrow="5"尝试一下

CSS 语法

flex-grow: number|initial|inherit;

属性值

值	描述
number	一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。
initial	设置该属性为它的默认值。请参阅 initial。
inherit	从父元素继承该属性。请参阅 inherit。

CSS 参考手册：flex 属性

CSS 参考手册：flex-basis 属性

CSS 参考手册：flex-direction 属性

CSS 参考手册：flex-flow 属性

CSS 参考手册：flex-shrink 属性

CSS 参考手册：flex-wrap 属性

CSS 参考手册

CSS flex-shrink 属性

CSS 参考手册

实例

让第二个元素收缩到其他元素的三分之一：

div:nth-of-type(2) {flex-shrink: 3;}

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。

属性
flex-shrink	29.0 21.0 -webkit-	11.0 10.0 -ms-	28.0 18.0 -moz-	9.0 6.1 -webkit-	17.0

定义和用法

flex-shrink 属性用于设置或检索弹性盒的收缩比率。。

注意：如果元素不是弹性盒对象的元素，则 flex-shrink 属性不起作用。

默认值：	1
继承：	否
可动画化：	是。请参阅可动画化（animatable）。尝试一下
版本：	CSS3
JavaScript 语法：	object.style.flexShrink="5"尝试一下

CSS 语法

flex-shrink: number|initial|inherit;

属性值

值	描述
number	一个数字，规定项目将相对于其他灵活的项目进行收缩的量。默认值是 0。
initial	设置该属性为它的默认值。请参阅 initial。
inherit	从父元素继承该属性。请参阅 inherit。

CSS 参考手册：flex 属性

CSS 参考手册：flex-basis 属性

CSS 参考手册：flex-direction 属性

CSS 参考手册：flex-flow 属性

CSS 参考手册：flex-grow 属性

CSS 参考手册：flex-wrap 属性

CSS 参考手册

CSS flex-wrap 属性

CSS 参考手册

实例

让弹性盒元素在必要的时候拆行：

display:flex;
flex-wrap: wrap;

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。

属性
flex-wrap	29.0 21.0 -webkit-	11.0 10.0 -ms-	28.0 18.0 -moz-	9.0 6.1 -webkit-	17.0

定义和用法

flex-wrap 属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。。

注意：如果元素不是弹性盒对象的元素，则 flex-wrap 属性不起作用。

默认值：	nowrap
继承：	否
可动画化：	否。请参阅可动画化（animatable）。
版本：	CSS3
JavaScript 语法：	object.style.flexWrap="nowrap"尝试一下

CSS 语法

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

属性值

值	描述
nowrap	默认值。规定灵活的项目不拆行或不拆列。
wrap	规定灵活的项目在必要的时候拆行或拆列。
wrap-reverse	规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。
initial	设置该属性为它的默认值。请参阅 initial。
inherit	从父元素继承该属性。请参阅 inherit。

CSS 参考手册：flex 属性

CSS 参考手册：flex-direction 属性

CSS 参考手册：flex-flow 属性

CSS 参考手册：flex-grow 属性

CSS 参考手册：flex-shrink 属性

CSS 参考手册：flex-basis 属性

CSS 参考手册

CSS float 属性

实例

让图像向右侧浮动：

img
{
float:right;
}

尝试一下 »

在此页底部有更多的例子。

属性定义及使用说明

float属性指定一个盒子（元素）是否应该浮动。

注意： 绝对定位的元素忽略float属性！

默认值：	none
继承：	no
版本：	CSS1
JavaScript 语法：	object.style.cssFloat="left"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
float	1.0	4.0	1.0	1.0	7.0

属性值

值	描述
left	元素向左浮动。
right	元素向右浮动。
none	默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit	规定应该从父元素继承 float 属性的值。

CSS font 属性

实例

指定在一个声明的所有字体属性：

p.ex1
{
font:15px arial,sans-serif;
}

p.ex2
{
font:italic bold 12px/30px Georgia, serif;
}

尝试一下 »

在此页底部有更多的例子。

属性定义及使用说明

font 简写属性在一个声明中设置所有字体属性。

可设置的属性是（按顺序）： "font-style font-variant font-weight font-size/line-height font-family"

font-size和font-family的值是必需的。如果缺少了其他值，默认值将被插入，如果有默认值的话。

注意： line - height属性设置行与行之间的空间。

默认值：	not specified
继承：	yes
版本：	CSS1
JavaScript 语法：	object.style.font="italic small-caps bold 12px arial,sans-serif"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
font	1.0	4.0	1.0	1.0	3.5

Font 特性

值	描述
font-style	规定字体样式。参阅：font-style 中可能的值。
font-variant	规定字体异体。参阅：font-variant 中可能的值。
font-weight	规定字体粗细。参阅：font-weight 中可能的值。
font-size/line-height	规定字体尺寸和行高。参阅：font-size 和 line-height 中可能的值。
font-family	规定字体系列。参阅：font-family 中可能的值。
caption	定义被标题控件（比如按钮、下拉列表等）使用的字体。
icon	定义被图标标记使用的字体。
menu	定义被下拉列表使用的字体。
message-box	定义被对话框使用的字体。
small-caption	caption 字体的小型版本。
status-bar	定义被窗口状态栏使用的字体。

CSS3 @font-face 规则

实例

指定名为"myFirstFont"的字体，并指定在哪里可以找到它的URL：

@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9 */
}

尝试一下 »

属性定义及使用说明

@font-face规则，网页设计师再也不必使用的"web-safe"的字体之一。

字体的名称，font - face规则：

font-family: myFirstFont;

字体文件包含在您的服务器上的某个地方，参考CSS：

src: url('Sansation_Light.ttf')

如果字体文件是在不同的位置，请使用完整的URL：

src: url('http://www.51coolma.css/css3/Sansation_Light.ttf')

现在准备使用该字体，下面是如何使用它所有的div元素的一个例子：

div{font-family: myFirstFont;}

语法：

@font-face{font-properties}

以下实例为在div中使用的字体:

div{font-family: myFirstFont;}

语法：

@font-face{font-properties}

字体描述	值	说明
font-family	name	必需的。定义字体的名称。
src	URL	必需的。定义该字体下载的网址（S）
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	可选。定义该字体应该如何被拉长。默认值是"正常"
font-style	normal italic oblique	可选。定义该字体应该是怎样样式。默认值是"正常"
font-weight	normal bold 100 200 300 400 500 600 700 800 900	可选。定义字体的粗细。默认值是"正常"
unicode-range	unicode-range	可选。定义该字体支持Unicode字符的范围。默认值是"ü+0-10 FFFF"

浏览器支持

浏览器

Internet Explorer 9, Firefox, Opera,Chrome, 和 Safari支持@font-face 规则。

但是，Internet Explorer 9 只支持 .eot 类型的字体，Firefox, Chrome, Safari, 和 Opera 支持 .ttf 与.otf 两种类型字体。

注意：Internet Explorer 8 及更早IE版本不支持@font-face 规则。

CSS3 教程： CSS3 字体

CSS font-family 属性

实例

指定段落的字体：

p
{
font-family:"Times New Roman",Georgia,Serif;
}

尝试一下 »

属性定义及使用说明

font - family属性指定一个元素的字体。

font-family 可以把多个字体名称作为一个"回退"系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。

有两种类型的字体系列名称：

family-name - 指定的系列名称：具体字体的名称，比如："times"、"courier"、"arial"。
generic-family - 通常字体系列名称：比如："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace。

使用某种特定的字体系列（Geneva）完全取决于用户机器上该字体系列是否可用；这个属性没有指示任何字体下载。因此，强烈推荐使用一个通用字体系列名作为后路。

注意： 每个值用逗号分开。

注意: 如果字体名称包含空格，它必须加上引号。在HTML中使用"style"属性时，必须使用单引号。

默认值：	not specified
继承：	yes
版本：	CSS1
JavaScript 语法：	object.style.fontFamily="arial,sans-serif"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
font-family	1.0	4.0	1.0	1.0	3.5

属性值

值

描述

family-name
generic-family

用于某个元素的字体族名称或/及类族名称的一个优先表。

默认值：取决于浏览器。

inherit

规定应该从父元素继承字体系列。

CSS 教程: CSS Font

CSS 参考手册: font 属性

CSS font-size 属性

实例

设置不同的HTML元素的字体大小：

h1 {font-size:250%}
h2 {font-size:200%}
p {font-size:100%}

尝试一下 »

属性定义及使用说明

font-size属性设置字体大小。

默认值：	medium
继承：	yes
版本：	CSS1
JavaScript 语法：	object.style.fontSize="larger"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
font-size	1.0	5.5	1.0	1.0	7.0

属性值

值	描述
xx-small x-small small medium large x-large xx-large	把字体的尺寸设置为不同的尺寸，从 xx-small 到 xx-large。默认值：medium。
smaller	把 font-size 设置为比父元素更小的尺寸。
larger	把 font-size 设置为比父元素更大的尺寸。
length	把 font-size 设置为一个固定的值。
%	把 font-size 设置为基于父元素的一个百分比值。
inherit	规定应该从父元素继承字体尺寸。

CSS 教程: CSS Font

CSS 参考手册: font 属性

CSS 参考手册

实例

设置不同的 HTML 元素的 font-size-adjust 属性：

h1  {  font-size-adjust:0.58;  }p  {  font-size-adjust:0.60;  }

亲自试一试

浏览器支持

Internet Explorer 不支持 font-size-adjust 属性。

定义和用法

font-size-adjust 属性为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height。

说明

字体的小写字母 "x" 的高度与 "font-size" 高度之间的比率被称为一个字体的 aspect 值。当字体拥有高的 aspect 值时，那么当此字体被设置为很小的尺寸时会更易阅读。举例：Verdana 的 aspect 值是 0.58（意味着当字体尺寸为 100px 时，它的 x-height 是 58px ）。Times New Roman 的 aspect 值是 0.46。这就意味着 Verdana 在小尺寸时比 Times New Roman 更易阅读。

默认值：	none
继承性：	yes
版本：	CSS2
JavaScript 语法：	object.style.fontSizeAdjust="0.70"

可能的值

值

描述

none

默认。如果此字体不可用，则不保持此字体的 x-height。

number

定义字体的 aspect 值比率。

可使用的公式：

首选字体的字体尺寸 * （font-size-adjust 值 / 可用字体的 aspect 值）=可应用到可用字体的字体尺寸

举例：

如果 14px 的 Verdana（aspect 值是 0.58）不可用，但是某个可用的字体的 aspect 值是 0.46，那么替代字体的尺寸将是 14 * (0.58/0.46) = 17.65px。

TIY 实例

使用 font-size-adjust 设置字体尺寸: 本例演示如何使用 font-size-adjust 设置字体尺寸。

实例

设置 HTML 元素的 font-stretch 属性：

h1  {  font-stretch:ultra-condensed;  }

浏览器支持

IE	Firefox	Chrome	Safari	Opera

所有主流浏览器都不支持 font-stretch 属性。

定义和用法

font-stretch 属性可对当前的 font-family 进行伸缩变形。

默认值：	normal
继承性：	yes
版本：	CSS2
JavaScript 语法：	object.style.fontStretch="ultra-expanded"

可能的值

值	描述
normal	默认值。把缩放比例设置为标准。
wider	把伸展比例设置为更进一步的伸展值
narrower	把收缩比例设置为更进一步的收缩值
ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded	设置 font-family 的缩放比例。 "ultra-condensed" 是最宽的值，而 "ultra-expanded" 是最窄的值。

CSS font-style 属性

实例

三个段落设置不同的字体样式：

p.normal {font-style:normal}
p.italic {font-style:italic}
p.oblique {font-style:oblique}

尝试一下 »

属性定义及使用说明

font-style属性指定文本的字体样式。

默认值：	normal
继承：	yes
版本：	CSS1
JavaScript 语法：	object.style.fontStyle="italic"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
font-style	1.0	4.0	1.0	1.0	7.0

属性值

值	描述
normal	默认值。浏览器显示一个标准的字体样式。
italic	浏览器会显示一个斜体的字体样式。
oblique	浏览器会显示一个倾斜的字体样式。
inherit	规定应该从父元素继承字体样式。

CSS 教程: CSS Font

CSS 参考手册: font 属性

CSS font-variant 属性

实例

把段落设置为小型大写字母字体：

p.small
{
font-variant:small-caps;
}

尝试一下 »

属性定义及使用说明

font-variant 属性设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小

font-variant 属性主要用于定义小型大写字母文本

默认值：	normal
继承：	yes
版本：	CSS1
JavaScript 语法：	object.style.fontVariant="small-caps"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
font-variant	1.0	4.0	1.0	1.0	3.5

属性值

值	描述
normal	默认值。浏览器会显示一个标准的字体。
small-caps	浏览器会显示小型大写字母的字体。
inherit	规定应该从父元素继承 font-variant 属性的值。

CSS 教程: CSS Font

CSS 参考手册: font 属性

CSS font-weight 属性

实例

三段文字设置不同的字体粗细：

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

尝试一下 »

属性定义及使用说明

font-weight 属性设置文本的粗细

默认值：	normal
继承：	yes
版本：	CSS1
JavaScript 语法：	object.style.fontWeight="900"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
font-weight	2.0	4.0	1.0	1.3	3.5

属性值

值	描述
normal	默认值。定义标准的字符。
bold	定义粗体字符。
bolder	定义更粗的字符。
lighter	定义更细的字符。
100 200 300 400 500 600 700 800 900	定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。
inherit	规定应该从父元素继承字体的粗细。

CSS 教程: CSS Font

CSS 参考手册: font 属性

CSS3 grid-columns 属性

实例

为div元素添加网格线，一个右侧200像素，另一个在剩余空间中：

div
{
grid-columns:50% * * 200px;
}

浏览器支持

目前没有主流浏览器支持grid-columns属性。

属性定义及使用说明

grid-columns属性指定网格中的每一列的宽度。

提示: 使用网格系统对于打印设计师来说具有巨大的价值。现在相同的改变被应用到在线内容上。网格属性提供了在可伸缩网格中调整标题、文本和图片尺寸和位置的能力。

默认值：	none
继承：	no
版本：	CSS3
JavaScript 语法：	object.style.gridColumns="50% * * 200px"

语法

grid-columns: length|%|none|inherit;

值	描述
length	参考包含块的网格。
%	参考包含块的宽度。
none
inherit

CSS3 grid-rows 属性

实例

定义为100像素的标题行，必要的并添加许多附加的30和60像素的高度：

div
{
grid-rows:100px (30px 60px);
}

浏览器支持

目前所有主流浏览器都不支持支持grid-rows属性。

属性定义及使用说明

grid-rows属性指定在网格中的每一行的高度。

默认值：	none
继承：	no
版本：	CSS3
JavaScript 语法：	object.style.gridRows="100px (30px 60px)"

语法

grid-rows: length|%|none|inherit;

值	描述
length	参考包含块的网格。
%	参考包含块的高度。
none
inherit

CSS 参考手册

实例

在 p 元素首行的开始边缘之外放置一个标点符号：

p{hanging-punctuation:first;}

浏览器支持

IE	Firefox	Chrome	Safari	Opera

目前主流浏览器都不支持 hanging-punctuation 属性。

定义和用法

hanging-punctuation 属性规定把标点符号放在文本整行的开头还是结尾的行框之外。

默认值：	none
继承性：	yes
版本：	CSS3
JavaScript 语法：	object.style.hangingPunctuation="first"

语法

hanging-punctuation: none|first|last|allow-end|force-end;

值	描述
none	不在文本整行的开头还是结尾的行框之外放置标签符号。
first	标点附着在首行开始边缘之外。
last	标点附着在首行结尾边缘之外。
allow-end
force-end

CSS 参考手册

CSS height 属性

实例

设置一个段落的高度和宽度：

p.ex
{
height:100px;
width:100px;
}

尝试一下 »

在此页底部有更多的例子。

属性定义及使用说明

height属性设置元素的高度。

注意： height属性不包括填充，边框，或页边距！

默认值：	auto
继承：	no
版本：	CSS1
JavaScript 语法：	object.style.height="50px"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
height	1.0	4.0	1.0	1.0	7.0

属性值

值	描述
auto	默认。浏览器会计算出实际的高度。
length	使用 px、cm 等单位定义高度。
%	基于包含它的块级对象的百分比高度。
inherit	规定应该从父元素继承 height 属性的值。

CSS3 icon 属性

实例

将图像元素设置为图标化的等价物：

img
{
content:icon;
icon:url(imgicon.png);
}

浏览器支持

没有主流浏览器支持icon属性。

属性定义及使用说明

icon 属性为创作者提供了将元素设置为图标等价物的能力。

注意：元素的图标是不可使用，除非"content"属性设置为"icon"！

默认值：	auto
继承：	no
版本：	CSS3
JavaScript 语法：	object.style.icon="url(image.png)"

语法

icon: auto|URL|inherit;

值	描述
auto	使用由浏览器提供的默认通用图标。
URL	引用列表中的一个或多个图标，列表用逗号分隔。
inherit	规定应从元素继承 icon 属性的值。

CSS justify-content 属性

CSS 参考手册

实例

在弹性盒对象的 <div> 元素中的各项周围留有空白：

div
{
display: flex;
justify-content: space-around;
}

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。

属性
justify-content	29.0 21.0 -webkit-	11.0	28.0 18.0 -moz-	9.0 6.1 -webkit-	17.0

定义和用法

justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

提示：使用 align-content 属性对齐交叉轴上的各项（垂直）。

默认值：	flex-start
继承：	否
可动画化：	否。请参阅可动画化（animatable）。
版本：	CSS3
JavaScript 语法：	object.style.justifyContent="space-between"尝试一下

CSS 语法

属性值

值	描述	测试
flex-start	默认值。项目位于容器的开头。	测试 »
flex-end	项目位于容器的结尾。	测试 »
center	项目位于容器的中心。	测试 »
space-between	项目位于各行之间留有空白的容器内。	测试 »
space-around	项目位于各行之前、之间、之后都留有空白的容器内。	测试 »
initial	设置该属性为它的默认值。请参阅 initial。	测试 »
inherit	从父元素继承该属性。请参阅 inherit。

CSS 参考手册：align-content 属性

CSS 参考手册：align-items 属性

CSS 参考手册：align-self 属性

CSS 参考手册

实例

使 div 元素匀速向下移动：

@keyframes mymove{from {top:0px;}to {top:200px;}}@-moz-keyframes mymove /* Firefox */{from {top:0px;}to {top:200px;}}@-webkit-keyframes mymove /* Safari 和 Chrome */{from {top:0px;}to {top:200px;}}@-o-keyframes mymove /* Opera */{from {top:0px;}to {top:200px;}}

亲自试一试

页面底部有更多实例。

浏览器支持

IE	Firefox	Chrome	Safari	Opera

目前浏览器都不支持 @keyframes 规则。

Firefox 支持替代的 @-moz-keyframes 规则。

Opera 支持替代的 @-o-keyframes 规则。

Safari 和 Chrome 支持替代的 @-webkit-keyframes 规则。

定义和用法

通过 @keyframes 规则，您能够创建动画。

创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。

在动画过程中，您能够多次改变这套 CSS 样式。

以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。

0% 是动画的开始时间，100% 动画的结束时间。

为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

注释：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。

语法

@keyframes animationname {keyframes-selector {css-styles;}}

值

描述

animationname

必需。定义动画的名称。

keyframes-selector

必需。动画时长的百分比。

合法的值：

0-100%
from（与 0% 相同）
to（与 100% 相同）

css-styles

必需。一个或多个合法的 CSS 样式属性。

亲自试一试 - 实例

实例 1

在一个动画中添加多个 keyframe 选择器：

@keyframes mymove{0%   {top:0px;}25%  {top:200px;}50%  {top:100px;}75%  {top:200px;}100% {top:0px;}}@-moz-keyframes mymove /* Firefox */{0%   {top:0px;}25%  {top:200px;}50%  {top:100px;}75%  {top:200px;}100% {top:0px;}}@-webkit-keyframes mymove /* Safari 和 Chrome */{0%   {top:0px;}25%  {top:200px;}50%  {top:100px;}75%  {top:200px;}100% {top:0px;}}@-o-keyframes mymove /* Opera */{0%   {top:0px;}25%  {top:200px;}50%  {top:100px;}75%  {top:200px;}100% {top:0px;}}

亲自试一试

实例 2

在一个动画中改变多个 CSS 样式：

@keyframes mymove{0%   {top:0px; background:red; width:100px;}100% {top:200px; background:yellow; width:300px;}}@-moz-keyframes mymove /* Firefox */{0%   {top:0px; background:red; width:100px;}100% {top:200px; background:yellow; width:300px;}}@-webkit-keyframes mymove /* Safari 和 Chrome */{0%   {top:0px; background:red; width:100px;}100% {top:200px; background:yellow; width:300px;}}@-o-keyframes mymove /* Opera */{0%   {top:0px; background:red; width:100px;}100% {top:200px; background:yellow; width:300px;}}

亲自试一试

实例 3

带有多个 CSS 样式的多个 keyframe 选择器：

@keyframes mymove{0%   {top:0px; left:0px; background:red;}25%  {top:0px; left:100px; background:blue;}50%  {top:100px; left:100px; background:yellow;}75%  {top:100px; left:0px; background:green;}100% {top:0px; left:0px; background:red;}}@-moz-keyframes mymove /* Firefox */{0%   {top:0px; left:0px; background:red;}25%  {top:0px; left:100px; background:blue;}50%  {top:100px; left:100px; background:yellow;}75%  {top:100px; left:0px; background:green;}100% {top:0px; left:0px; background:red;}}@-webkit-keyframes mymove /* Safari and Chrome */{0%   {top:0px; left:0px; background:red;}25%  {top:0px; left:100px; background:blue;}50%  {top:100px; left:100px; background:yellow;}75%  {top:100px; left:0px; background:green;}100% {top:0px; left:0px; background:red;}}@-o-keyframes mymove /* Opera */{0%   {top:0px; left:0px; background:red;}25%  {top:0px; left:100px; background:blue;}50%  {top:100px; left:100px; background:yellow;}75%  {top:100px; left:0px; background:green;}100% {top:0px; left:0px; background:red;}}

亲自试一试

CSS left 属性

实例

把图像的左边缘设置在其包含元素左边缘向右5像素的位置：

img
{
position:absolute;
left:5px;
}

尝试一下 »

属性定义及使用说明

left 属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。

如果 "position" 属性的值为 "static"，那么设置 "left" 属性不会产生任何效果。

注意： If "position:static", the left property has no effect.

默认值：	auto
继承：	no
版本：	CSS2
JavaScript 语法：	object.style.left="50px"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
left	1.0	5.5	1.0	1.0	5.0

属性值

值	描述
auto	默认值。通过浏览器计算左边缘的位置。
%	设置以包含元素的百分比计的左边位置。可使用负值。
length	使用 px、cm 等单位设置元素的左边位置。可使用负值。
inherit	规定应该从父元素继承 left 属性的值。

CSS 教程: CSS Positioning

CSS letter-spacing 属性

实例

设置为h1和h2元素的字母间距：

h1 {letter-spacing:2px}
h2 {letter-spacing:-3px}

尝试一下 »

属性定义及使用说明

letter-spacing 属性增加或减少字符间的空白（字符间距）

默认值：	normal
继承：	yes
版本：	CSS1
JavaScript 语法：	object.style.letterSpacing="3px"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
letter-spacing	1.0	4.0	1.0	1.0	3.5

属性值

值	描述
normal	默认。规定字符间没有额外的空间。
length	定义字符间的固定空间（允许使用负值）。
inherit	规定应该从父元素继承 letter-spacing 属性的值。

CSS 教程: CSS Text

CSS line-height 属性

实例

Set the line height in percent:

p.small {line-height:90%}
p.big {line-height:200%}

尝试一下 »

在此页底部有更多的例子。

属性定义及使用说明

设置以百分比计的行高：.

注意： 负值是不允许的

默认值：	normal
继承：	yes
版本：	CSS1
JavaScript 语法：	object.style.lineHeight="2"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
line-height	1.0	4.0	1.0	1.0	7.0

属性值

值	描述
normal	默认。设置合理的行间距。
number	设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length	设置固定的行间距。
%	基于当前字体尺寸的百分比行间距。
inherit	规定应该从父元素继承 line-height 属性的值。

CSS list-style 属性

实例

在一个声明中指定所有列表属性：

ul
{
list-style:square url("sqpurple.gif");
}

尝试一下 »

属性定义及使用说明

list-style 简写属性在一个声明中设置所有的列表属性。

可以设置的属性（按顺序）： list-style-type, list-style-position, list-style-image.

可以不设置其中的某个值，比如 "list-style:circle inside;" 也是允许的。未设置的属性会使用其默认值。

默认值：	disc outside none
继承：	yes
版本：	CSS1
JavaScript 语法：	object.style.listStyle="decimal inside"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
list-style	1.0	4.0	1.0	1.0	7.0

属性值

值	描述
list-style-type	设置列表项标记的类型。参阅：list-style-type 中可能的值。
list-style-position	设置在何处放置列表项标记。参阅：list-style-position 中可能的值。
list-style-image	使用图像来替换列表项的标记。参阅：list-style-image 中可能的值。
initial	将这个属性设置为默认值。参阅：initial 中可能的值。
inherit	规定应该从父元素继承 list-style 属性的值。参阅：inherit 中可能的值。

CSS 教程: CSS 列表

CSS list-style-image 属性

实例

指定列表中的列表项标记的图像：

ul
{
list-style-image:url('sqpurple.gif');
}

尝试一下 »

属性定义及使用说明

list-style-image 属性使用图像来替换列表项的标记。

注意: 请始终规定一个 "list-style-type" 属性以防图像不可用。

默认值：	none
继承：	yes
版本：	CSS1
JavaScript 语法：	object.style.listStyleImage="url('/images/blueball.gif')"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
list-style-image	1.0	4.0	1.0	1.0	7.0

属性值

值	描述
URL	图像的路径。
none	默认。无图形被显示。
inherit	规定应该从父元素继承 list-style-image 属性的值。

CSS 教程: CSS 列表

CSS 参考手册: list-style 属性

CSS list-style-position 属性

实例

规定列表中列表项目标记的位置：

ul
{
list-style-position:inside;
}

尝试一下 »

属性定义及使用说明

list-style-position属性指示如何相对于对象的内容绘制列表项标记。

Outside:

Coffee
Tea
Coca-cola

Inside:

Coffee
Tea
Coca-cola

默认值：	outside
继承：	yes
版本：	CSS1
JavaScript 语法：	object.style.listStylePosition="inside"

浏览器支持

所有主流浏览器都支持list-style-position属性。

注意：IE7和更早的版本不支持"inherit"的值。IE8需要定义！DOCTYPE。IE9支持"inherit"。

属性值

值	描述
inside	列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside	默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
inherit	规定应该从父元素继承 list-style-position 属性的值。

CSS 教程: CSS 列表

CSS 参考手册: list-style 属性

CSS list-style-type 属性

实例

设置一些不同的列表样式：

ul.circle {list-style-type:circle}
ul.square {list-style-type:square}
ol.upper-roman {list-style-type:upper-roman}
ol.lower-alpha {list-style-type:lower-alpha}

尝试一下 »

在此页底部有更多的例子。

属性定义及使用说明

list-style-type 属性设置列表项标记的类型。

默认值：	"disc" for <ul> and "decimal" for <ol>
继承：	yes
版本：	CSS1
JavaScript 语法：	object.style.listStyleType="square"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
list-style-type	1.0	4.0	1.0	1.0	3.5

属性值

值	描述
none	无标记。
disc	默认。标记是实心圆。
circle	标记是空心圆。
square	标记是实心方块。
decimal	标记是数字。
decimal-leading-zero	0开头的数字标记。(01, 02, 03, 等。)
lower-roman	小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman	大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha	小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha	大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek	小写希腊字母(alpha, beta, gamma, 等。)
lower-latin	小写拉丁字母(a, b, c, d, e, 等。)
upper-latin	大写拉丁字母(A, B, C, D, E, 等。)
hebrew	传统的希伯来编号方式
armenian	传统的亚美尼亚编号方式
georgian	传统的乔治亚编号方式(an, ban, gan, 等。)
cjk-ideographic	简单的表意数字
hiragana	标记是：a, i, u, e, o, ka, ki, 等。（日文片假名）
katakana	标记是：A, I, U, E, O, KA, KI, 等。（日文片假名）
hiragana-iroha	标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）
katakana-iroha	标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）

CSS margin 属性

实例

设置一个p元素的所有四个边距：

p
{
margin:2cm 4cm 3cm 4cm;
}

尝试一下 »

属性定义及使用说明

margin简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值。

实例:

margin:10px 5px 15px 20px;
- 上边距是 10px
- 右边距是 5px
- 下边距是 15px
- 左边距是 20px
margin:10px 5px 15px;
- 上边距是 10px
- 右边距和左边距是 5px
- 下边距是 15px
margin:10px 5px;
- 上边距和下边距是 10px
- 右边距和左边距是 5px
margin:10px;
- 所有四个边距都是 10px

注意： 负值是允许的。

默认值：	0
继承：	no
版本：	CSS1
JavaScript 语法：	object.style.margin="10px 5px"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
margin	1.0	6.0	1.0	1.0	3.5

属性值

值	描述
auto	浏览器计算外边距。
length	规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。
%	规定基于父元素的宽度的百分比的外边距。
inherit	规定应该从父元素继承外边距。

CSS 教程: CSS Margin

CSS margin-bottom 属性

实例

设置一个p元素的下边距：

p
{
margin-bottom:2cm;
}

尝试一下 »

属性定义及使用说明

margin-bottom属性设置元素的下边距。

注意： 负值是允许的。

默认值：	0
继承：	no
版本：	CSS1
JavaScript 语法：	object.style.marginBottom="10px"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
margin-bottom	1.0	6.0	1.0	1.0	3.5

属性值

值	描述
auto	浏览器计算下外边距。
length	规定以具体单位计的下外边距值，比如像素、厘米等。默认值是 0px。
%	规定基于父元素的宽度的百分比的下外边距。
inherit	规定应该从父元素继承下外边距。

CSS 教程: CSS Margin

CSS margin-left 属性

实例

设置一个p元素的左边距：

p
{
margin-left:2cm;
}

尝试一下 »

属性定义及使用说明

margin-left属性设置元素的左边距。

注意： 负值是允许的。

默认值：	0
继承：	no
版本：	CSS1
JavaScript 语法：	object.style.marginLeft="10px"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
margin-left	1.0	6.0	1.0	1.0	3.5

属性值

值	描述
auto	浏览器设置的左外边距。
length	定义固定的左外边距。默认值是0。
%	定义基于父对象总高度的百分比左外边距。
inherit	规定应该从父元素继承左外边距。

CSS 教程: CSS Margin

CSS margin-right 属性

实例

设置一个p元素的右边距：

p
{
margin-right:2cm;
}

尝试一下 »

属性定义及使用说明

margin-right属性设置元素的右边距。

注意： 负值是允许的。

默认值：	0
继承：	no
版本：	CSS1
JavaScript 语法：	object.style.marginRight="10px"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
margin-right	1.0	6.0	1.0	1.0	3.5

属性值

值	描述
auto	浏览器设置的右外边距。
length	定义固定的右外边距。默认值是 0。
%	定义基于父对象总高度的百分比右外边距。
inherit	规定应该从父元素继承右外边距。

CSS 教程: CSS Margin

CSS margin-top 属性

实例

设置一个p元素的上部边距：

p
{
margin-top:2cm;
}

尝试一下 »

属性定义及使用说明

margin-top属性设置元素的上部边距。

注意： 负值是允许的。

默认值：	0
继承：	no
版本：	CSS1
JavaScript 语法：	object.style.marginTop="10px"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
margin-top	1.0	6.0	1.0	1.0	3.5

属性值

值	描述
auto	浏览器设置的上外边距。
length	定义固定的上外边距。默认值是 0。
%	定义基于父对象总高度的百分比上外边距。
inherit	规定应该从父元素继承上外边距。

CSS 教程: CSS Margin

CSS max-height 属性

实例

设置段落的最大高度：

p
{
max-height:50px;
}

尝试一下 »

属性定义及使用说明

max-height 属性设置元素的最大高度。

注意： max-height属性不包括填充，边框，或页边距！

默认值：	none
继承：	no
版本：	CSS2
JavaScript 语法：	object.style.maxHeight="10px"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
max-height	1.0	7.0	1.0	2.0.2	7.0

属性值

值	描述
none	默认。定义对元素被允许的最大高度没有限制。
length	定义元素的最大高度值。
%	定义基于包含它的块级对象的百分比最大高度。
inherit	规定应该从父元素继承 max-height 属性的值。

CSS 教程: CSS Dimension

CSS 参考手册: min-height 属性

CSS max-width 属性

实例

设置段落的最大宽度：

p
{
max-width:100px;
}

尝试一下 »

属性定义及使用说明

max-width属性设置元素的最大宽度。

注意： max-width属性不包括填充，边框，或页边距！

默认值：	none
继承：	no
版本：	CSS2
JavaScript 语法：	object.style.maxWidth="100px"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
max-width	1.0	7.0	1.0	2.0.2	7.0

属性值

值	描述
none	默认。定义对元素的最大宽度没有限制。
length	定义元素的最大宽度值。
%	定义基于包含它的块级对象的百分比最大宽度。
inherit	规定应该从父元素继承 max-width 属性的值。

CSS 教程: CSS Dimension

CSS 参考手册: min-width 属性

CSS3 @media 查询

实例

如果文档宽度小于 300 像素则修改背景演示(background-color):

@media screen and (max-width: 300px) {
    body {
       background-color:lightblue;
    }
}

尝试一下 »

定义和使用

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

浏览器支持

表格中的数字表示支持 @media 规则的第一个浏览器的版本号。

Rule
@media	21	9	3.5	4.0	9

CSS 语法

@media mediatype and|not|only (media feature) {
CSS-Code;
}

你也可以针对不同的媒体使用不同 stylesheets :

媒体类型

值	描述
all	用于所有设备
aural	已废弃。用于语音和声音合成器
braille	已废弃。应用于盲文触摸式反馈设备
embossed	已废弃。用于打印的盲人印刷设备
handheld	已废弃。用于掌上设备或更小的装置，如PDA和小型电话
print	用于打印机和打印预览
projection	已废弃。用于投影设备
screen	用于电脑屏幕，平板电脑，智能手机等。
speech	应用于屏幕阅读器等发声设备
tty	已废弃。用于固定的字符网格，如电报、终端设备和对字符有限制的便携设备
tv	已废弃。用于电视和网络电视

媒体功能

值	描述
aspect-ratio	定义输出设备中的页面可见区域宽度与高度的比率
color	定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0
color-index	定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0
device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的比率。
device-height	定义输出设备的屏幕可见高度。
device-width	定义输出设备的屏幕可见宽度。
grid	用来查询输出设备是否使用栅格或点阵。
height	定义输出设备中的页面可见区域高度。
max-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最大比率。
max-color	定义输出设备每一组彩色原件的最大个数。
max-color-index	定义在输出设备的彩色查询表中的最大条目数。
max-device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最大比率。
max-device-height	定义输出设备的屏幕可见的最大高度。
max-device-width	定义输出设备的屏幕最大可见宽度。
max-height	定义输出设备中的页面最大可见区域高度。
max-monochrome	定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。
max-resolution	定义设备的最大分辨率。
max-width	定义输出设备中的页面最大可见区域宽度。
min-aspect-ratio	定义输出设备中的页面可见区域宽度与高度的最小比率。
min-color	定义输出设备每一组彩色原件的最小个数。
min-color-index	定义在输出设备的彩色查询表中的最小条目数。
min-device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最小比率。
min-device-width	定义输出设备的屏幕最小可见宽度。
min-device-height	定义输出设备的屏幕的最小可见高度。
min-height	定义输出设备中的页面最小可见区域高度。
min-monochrome	定义在一个单色框架缓冲区中每像素包含的最小单色原件个数
min-resolution	定义设备的最小分辨率。
min-width	定义输出设备中的页面最小可见区域宽度。
monochrome	定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0
orientation	定义输出设备中的页面可见区域高度是否大于或等于宽度。
resolution	定义设备的分辨率。如：96dpi, 300dpi, 118dpcm
scan	定义电视类设备的扫描工序。
width	定义输出设备中的页面可见区域宽度。

实例

使用 @media 查询来制作响应式设计：

@media only screen and (max-width: 500px) {
    .gridmenu {
        width:100%;
    }

    .gridmain {
        width:100%;
    }

    .gridright {
        width:100%;
    }
}

尝试一下 »

CSS min-height 属性

实例

设置段落的最低高度：

p
{
min-height:100px;
}

尝试一下 »

属性定义及使用说明

min-height 属性设置元素的最低高度。

注意： min-height属性不包括填充，边框，或页边距！

默认值：	0
继承：	no
版本：	CSS2
JavaScript 语法：	object.style.minHeight="10px"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
min-height	1.0	7.0	3.0	2.0.2	4.0

属性值

值	描述
length	定义元素的最小高度。默认值是 0。
%	定义基于包含它的块级对象的百分比最小高度。
inherit	规定应该从父元素继承 min-height 属性的值。

CSS 教程: CSS Dimension

CSS 参考手册: max-height 属性

CSS min-width 属性

实例

设置段落的最小宽度：

p
{
min-width:1000px;
}

尝试一下 »

属性定义及使用说明

min-width属性设置元素的最小宽度。

注意： min-width属性不包括填充，边框，或页边距！

默认值：	0
继承：	no
版本：	CSS2
JavaScript 语法：	object.style.minWidth="10px"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
min-width	1.0	7.0	1.0	2.0.2	4.0

属性值

值	描述
length	定义元素的最小宽度值。默认值：取决于浏览器。
%	定义基于包含它的块级对象的百分比最小宽度。
inherit	规定应该从父元素继承 min-width 属性的值。

CSS 教程: CSS Dimension

CSS 参考手册: max-width 属性

CSS3 nav-down 属性

实例

规定在使用方向键时向何处导航：

button#b1
{
top:20%;left:25%;
nav-index:1;
nav-right:#b2;nav-left:#b4;
nav-down:#b2;nav-up:#b4;
}

button#b2
{
top:40%;left:50%;
nav-index:2;
nav-right:#b3;nav-left:#b1;
nav-down:#b3;nav-up:#b1;
}

button#b3
{
top:70%;left:25%;
nav-index:3;
nav-right:#b4;nav-left:#b2;
nav-down:#b4;nav-up:#b2;
}

button#b4
{
top:40%;left:0%;
nav-index:4;
nav-right:#b1;nav-left:#b3;
nav-down:#b1;nav-up:#b3;
}

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
nav-down	不兼容	不兼容	不兼容	不兼容	Supported in Opera 11.5-12. 不兼容于更新版本的浏览器

属性定义及使用说明

nav-down 属性规定当使用 nav-down 导航键时，向何处进行导航。

默认值：	auto
继承：	no
版本：	CSS3
JavaScript 语法：	object.style.navDown="#div2"

语法

nav-down: auto|id|target-name|inherit;

值	说明
auto	浏览器决定导航到哪个元素。
id	规定被导航元素的 id。
target-name	规定被导航的目标框架。
inherit	规定应从父元素继承 nav-down 属性的值。

CSS3 nav-index 属性

实例

指定两个按钮的Tab键顺序：

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
nav-index	不兼容	不兼容	不兼容	不兼容	Supported in Opera 11.5-12. 不兼容于更新版本的浏览器

属性定义及使用说明

nav-index属性指定了连续的导航元素的顺序（"Tab键顺序"）。

默认值：	auto
继承：	no
版本：	CSS3
JavaScript 语法：	object.style.navIndex=2

语法

nav-index: auto|number|inherit;

值	说明
auto	浏览器指派的元素的Tab键顺序
number	表示该元素的Tab键顺序。 1意味着首先
inherit	指定nav- index属性的值应该从父元素继承

CSS3 nav-left 属性

实例

指定导航使用向左箭头和右箭头导航键：

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
nav-right	不兼容	不兼容	不兼容	不兼容	Supported in Opera 11.5-12. 不兼容于更新版本的浏览器

属性定义及使用说明

nav-left的属性指定使用箭头向左导航键导航。

默认值：	auto
继承：	no
版本：	CSS3
JavaScript 语法：	object.style.navLeft="#div2"

语法

nav-left: auto|id|target-name|inherit;

值	说明
auto	浏览器将决定哪个元素导航
id	指定导航到该元素的ID
target-name	指定导航到目标帧
inherit	指定nav-left属性的值，应该从父元素继承

CSS 参考手册

实例

规定在使用方向键时向何处导航：

button#b1{top:20%;left:25%;nav-index:1;nav-right:#b2;nav-left:#b4;nav-down:#b2;nav-up:#b4;}button#b2{top:40%;left:50%;nav-index:2;nav-right:#b3;nav-left:#b1;nav-down:#b3;nav-up:#b1;}button#b3{top:70%;left:25%;nav-index:3;nav-right:#b4;nav-left:#b2;nav-down:#b4;nav-up:#b2;}button#b4{top:40%;left:0%;nav-index:4;nav-right:#b1;nav-left:#b3;nav-down:#b1;nav-up:#b3;}

亲自试一试

浏览器支持

目前只有 Opera 支持 nav-right 属性。

定义和用法

nav-right 属性规定当使用 nav-right 导航键时，向何处进行导航。

默认值：	auto
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.navRight="#div2"

语法

nav-right: auto|id|target-name|inherit;

值	描述
auto	浏览器决定导航到哪个元素。
id	规定被导航元素的 id。
target-name	规定被导航的目标框架。
inherit	规定应从父元素继承 nav-right 属性的值。

CSS 参考手册

实例

规定在使用方向键时向何处导航：

button#b1{top:20%;left:25%;nav-index:1;nav-right:#b2;nav-left:#b4;nav-down:#b2;nav-up:#b4;}button#b2{top:40%;left:50%;nav-index:2;nav-right:#b3;nav-left:#b1;nav-down:#b3;nav-up:#b1;}button#b3{top:70%;left:25%;nav-index:3;nav-right:#b4;nav-left:#b2;nav-down:#b4;nav-up:#b2;}button#b4{top:40%;left:0%;nav-index:4;nav-right:#b1;nav-left:#b3;nav-down:#b1;nav-up:#b3;}

亲自试一试

浏览器支持

目前只有 Opera 支持 nav-up 属性。

定义和用法

nav-up 属性规定当使用 nav-up 导航键时，向何处进行导航。

默认值：	auto
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.navUp="#div2"

语法

nav-up: auto|id|target-name|inherit;

值	描述
auto	浏览器决定导航到哪个元素。
id	规定被导航元素的 id。
target-name	规定被导航的目标框架。
inherit	规定应从父元素继承 nav-up 属性的值。

CSS 参考手册

CSS3 opacity 属性

实例

设置一个div元素的透明度级别：

div
{
opacity:0.5;
}

尝试一下 »
在此页底部有更多的例子。

浏览器支持

所有主流浏览器都支持opacity属性。.

注意：IE8和早期版本支持另一种过滤器属性。像：filter:Alpha(opacity=50)

属性定义及使用说明

Opacity属性设置一个元素了透明度级别。

默认值：	1
继承：	no
版本：	CSS3
JavaScript 语法：	object.style.opacity=0.5

语法

opacity: value|inherit;

值	描述
value	指定不透明度。从0.0（完全透明）到1.0（完全不透明）
inherit	Opacity属性的值应该从父元素继承

CSS order 属性

CSS 参考手册

实例

设置弹性盒对象元素的顺序：

div#myRedDIV {order:2;}
div#myBlueDIV {order:4;}
div#myGreenDIV {order:3;}
div#myPinkDIV {order:1;}

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。

属性
order	29.0 21.0 -webkit-	11.0	28.0 18.0 -moz-	9.0 6.1 -webkit-	17.0

定义和用法

order 属性设置或检索弹性盒模型对象的子元素出现的順序。。

注意：如果元素不是弹性盒对象的元素，则 order 属性不起作用。

默认值：	0
继承：	否
可动画化：	是，参见个别的属性。请参阅可动画化（animatable）。尝试一下
版本：	CSS3
JavaScript 语法：	object.style.order="2"尝试一下

CSS 语法

order: number|initial|inherit;

属性值

值	描述
number	默认值是 0。规定灵活项目的顺序。
initial	设置该属性为它的默认值。请参阅 initial。
inherit	从父元素继承该属性。请参阅 inherit。

CSS 参考手册：flex 属性

CSS 参考手册：flex-basis 属性

CSS 参考手册：flex-direction 属性

CSS 参考手册：flex-flow 属性

CSS 参考手册：flex-grow 属性

CSS 参考手册：flex-shrink 属性

CSS 参考手册：flex-wrap 属性

CSS 参考手册：align-content 属性

CSS 参考手册：align-items 属性

CSS 参考手册：align-self 属性

CSS 参考手册

CSS outline 属性

实例

设置元素周围的轮廓：

p
{
outline:#00FF00 dotted thick;
}

尝试一下 »

属性定义及使用说明

outline（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

outline简写属性在一个声明中设置所有的轮廓属性。

可以设置的属性分别是（按顺序）：outline-color, outline-style, outline-width

如果不设置其中的某个值，也不会出问题，比如 outline:solid #ff0000; 也是允许的。

默认值：	invert none medium
继承：	no
版本：	CSS2
JavaScript 语法：	object.style.outline="#0000FF dotted thin"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
outline	1.0	8.0	1.5	1.2	7.0

属性值

值	描述
outline-color	规定边框的颜色。参阅：outline-color 中可能的值。
outline-style	规定边框的样式。参阅：outline-style 中可能的值。
outline-width	规定边框的宽度。参阅：outline-width 中可能的值。
inherit	规定应该从父元素继承 outline 属性的设置。

CSS 教程: CSS Outline

CSS outline-color 属性

实例

设置一个虚线轮廓的颜色：

p
{
outline-style:dotted;
outline-color:#00ff00;
}

尝试一下 »

属性定义及使用说明

outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围。

outline-color属性指定轮廓颜色。

注意： 请始终在 outline-color 属性之前声明 outline-style 属性。元素只有获得轮廓以后才能改变其轮廓的颜色。

默认值：	invert
继承：	no
版本：	CSS2
JavaScript 语法：	object.style.outlineColor="#00FF00"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
outline-color	1.0	8.0	1.5	1.2	7.0

提示和注释

outline是围绕元素。它是围绕元素的边距。但是，它是来自不同的边框属性。

outline不是元素尺寸的一部分，因此元素的宽度和高度属性不包含轮廓的宽度。

属性值

值	描述
color	指定轮廓颜色。在CSS颜色值寻找颜色值的完整列表。
invert	默认。执行颜色反转（逆向的颜色）。可使轮廓在不同的背景颜色中都是可见。
inherit	规定应该从父元素继承轮廓颜色的设置。

CSS 教程: CSS Outline

CSS 参考手册: outline 属性

CSS3 outline-offset 属性

实例

指定外边框边缘的轮廓15px：

div
{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
outline-offset	4.0	不兼容	3.5	3.1	10.5

属性定义及使用说明

outline-offset属性设置轮廓框架在 border 边缘外的偏移

Outlines在两个方面不同于边框：

Outlines 不占用空间
Outlines 可能非矩形

默认值：	0
继承：	no
版本：	CSS3
JavaScript 语法：	object.style.outlineOffset="15px"

语法

outline-offset: length|inherit:

值	描述
length	轮廓与边框边缘的距离。
inherit	规定应从父元素继承 outline-offset 属性的值。

CSS3 教程: CSS3 User Interface

CSS outline-style 属性

实例

设置outline的样式：

p
{
outline-style:dotted;
}

尝试一下 »

在此页底部有更多的例子。

属性定义及使用说明

outline（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围。

outline-style属性指定outline的样式。

默认值：	none
继承：	no
版本：	CSS2
JavaScript 语法：	object.style.outlineStyle="dotted"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
outline-style	1.0	8.0	1.5	1.2	7.0

提示和注释

outline是围绕元素。它是围绕元素的边距。但是，它是来自不同的边框属性。

outline不是元素尺寸的一部分，因此元素的宽度和高度属性不包含轮廓的宽度。

属性值

值	描述
none	默认。定义无轮廓。
dotted	定义点状的轮廓。
dashed	定义虚线轮廓。
solid	定义实线轮廓。
double	定义双线轮廓。双线的宽度等同于 outline-width 的值。
groove	定义 3D 凹槽轮廓。此效果取决于 outline-color 值。
ridge	定义 3D 凸槽轮廓。此效果取决于 outline-color 值。
inset	定义 3D 凹边轮廓。此效果取决于 outline-color 值。
outset	定义 3D 凸边轮廓。此效果取决于 outline-color 值。
inherit	规定应该从父元素继承轮廓样式的设置。

CSS outline-width 属性

实例

设置轮廓的宽度：

p
{
outline-style:dotted;
outline-width:5px;
}

尝试一下 »

属性定义及使用说明

outline（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围。

outline-width指定轮廓的宽度。

注意： 请始终在outline-wicth属性之前声明outline-style属性。元素只有获得轮廓以后才能改变其轮廓的宽度。

默认值：	medium
继承：	no
版本：	CSS2
JavaScript 语法：	object.style.outlineWidth="thin"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
outline-width	1.0	8.0	1.5	1.2	7.0

提示和注释

outline是围绕元素。它是围绕元素的边距。但是，它是来自不同的边框属性。

outline不是元素尺寸的一部分，因此元素的宽度和高度属性不包含轮廓的宽度。

属性值

值	描述
thin	规定细轮廓。
medium	默认。规定中等的轮廓。
thick	规定粗的轮廓。
length	允许您规定轮廓粗细的值。
inherit	规定应该从父元素继承轮廓宽度的设置。

CSS 教程: CSS Outline

CSS 参考手册: outline 属性

CSS overflow 属性

实例

设置overflow属性进行滚动：

div
{
width:150px;
height:150px;
overflow:scroll;
}

尝试一下 »

属性定义及使用说明

overflow属性指定如果内容溢出一个元素的框，会发生什么。

默认值：	visible
继承：	no
版本：	CSS2
JavaScript 语法：	object.style.overflow="scroll"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
overflow	1.0	4.0	1.0	1.0	7.0

注意：在X Lion(Mac OS),滚动条显示默认是隐藏的,只有当被使用(即使"overflow:scroll"已设置)。

属性值

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

CSS 教程: CSS Positioning

CSS 参考手册

实例

裁剪 div 元素中内容的左/右边缘 - 如果溢出元素的内容区域的话：

div{overflow-x:hidden;}

亲自试一试

浏览器支持

所有主流浏览器都支持 overflow-x 属性。

注释：overflow-x 属性无法在 IE8 以及更早的浏览器正确地工作。

定义和用法

overflow-x 属性规定是否对内容的左/右边缘进行裁剪 - 如果溢出元素内容区域的话。

提示：使用 overflow-y 属性来确定对上/下边缘的裁剪。

默认值：	visible
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.overflowX="scroll"

语法

overflow-x: visible|hidden|scroll|auto|no-display|no-content;

值	描述	测试
visible	不裁剪内容，可能会显示在内容框之外。	测试
hidden	裁剪内容 - 不提供滚动机制。	测试
scroll	裁剪内容 - 提供滚动机制。	测试
auto	如果溢出框，则应该提供滚动机制。	测试
no-display	如果内容不适合内容框，则删除整个框。	测试
no-content	如果内容不适合内容框，则隐藏整个内容。	测试

CSS 参考手册

实例

裁剪 div 元素中内容的上/下边缘 - 如果溢出元素的内容区域的话：

div{overflow-y:hidden;}

亲自试一试

浏览器支持

所有主流浏览器都支持 overflow-y 属性。

注释：overflow-y 属性无法在 IE8 以及更早的浏览器正确地工作。

定义和用法

overflow-y 属性规定是否对内容的上/下边缘进行裁剪 - 如果溢出元素内容区域的话。

提示：使用 overflow-x 属性来确定对左/右边缘的裁剪。

默认值：	visible
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.overflowY="scroll"

语法

overflow-y: visible|hidden|scroll|auto|no-display|no-content;

值	描述	测试
visible	不裁剪内容，可能会显示在内容框之外。	测试
hidden	裁剪内容 - 不提供滚动机制。	测试
scroll	裁剪内容 - 提供滚动机制。	测试
auto	如果溢出框，则应该提供滚动机制。	测试
no-display	如果内容不适合内容框，则删除整个框。	测试
no-content	如果内容不适合内容框，则隐藏整个内容。	测试

CSS 参考手册

CSS padding 属性

实例

设置一个P元素的填充：

p
{
padding:2cm 4cm 3cm 4cm;
}

尝试一下 »

属性定义及使用说明

padding 简写属性在一个声明中设置所有填充属性。该属性可以有1到4个值。

实例:

padding:10px 5px 15px 20px;
- 上填充是 10px
- 右填充是 5px
- 下填充是 15px
- 左填充是 20px
padding:10px 5px 15px;
- 上填充是 10px
- 右填充和左填充是 5px
- 下填充是 15px
padding:10px 5px;
- 上填充和下填充是 10px
- 右填充和左填充是 5px
padding:10px;
- 所有四个填充都是 10px

注意： 负值是不允许的。

默认值：	0
继承：	no
版本：	CSS1
JavaScript 语法：	object.style.padding="10px 5px"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
padding	1.0	4.0	1.0	1.0	3.5

属性值

值	说明
length	规定以具体单位计的填充值，比如像素、厘米等。默认值是 0px
%	规定基于父元素的宽度的百分比的填充
inherit	指定应该从父元素继承padding

CSS 教程: CSS Padding

CSS padding-bottom 属性

实例

设置一个P元素的底部填充：p>

p
{
padding-bottom:2cm;
}

尝试一下 »

属性定义及使用说明

padding-bottom属性设置元素的底部内边距（底部空白）。

注意： 负值是不允许的。

默认值：	0
继承：	no
版本：	CSS1
JavaScript 语法：	object.style.paddingBottom="2cm"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
padding-bottom	1.0	4.0	1.0	1.0	3.5

属性值

值	描述
length	规定以具体单位计的固定的下内边距值，比如像素、厘米等。默认值是 0px。
%	定义基于父元素宽度的百分比下内边距。此值不会如预期地那样工作于所有的浏览器中。
inherit	规定应该从父元素继承下内边距。

CSS 教程: CSS Padding

CSS padding-left 属性

实例

设置一个P元素的左部填充：

p
{
padding-left:2cm;
}

尝试一下 »

属性定义及使用说明

padding-left属性设置一个元素的左内边距（空格）。

注意： 负值是不允许的。

默认值：	0
继承：	no
版本：	CSS1
JavaScript 语法：	object.style.paddingLeft="2cm"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
padding-bottom	1.0	4.0	1.0	1.0	3.5

属性值

值	描述
length	规定以具体单位计的固定的左内边距值，比如像素、厘米等。默认值是 0px。
%	定义基于父元素宽度的百分比左内边距。此值不会如预期地那样工作于所有的浏览器中。
inherit	规定应该从父元素继承左内边距。

CSS 教程: CSS Padding

CSS padding-right Property

实例

设置一个P元素的右部填充：

p
{
padding-right:2cm;
}

尝试一下 »

属性定义及使用说明

padding-right属性设置一个元素的右内边距（空白）。

注意： 负值是不允许的。

默认值：	0
继承：	no
版本：	CSS1
JavaScript 语法：	object.style.paddingRight="2cm"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
padding-bottom	1.0	4.0	1.0	1.0	3.5

属性值

值	描述
length	规定以具体单位计的固定的右内边距值，比如像素、厘米等。默认值是 0px。
%	定义基于父元素宽度的百分比右内边距。此值不会如预期地那样工作于所有的浏览器中。
inherit	规定应该从父元素继承右内边距。

CSS 教程: CSS Padding

CSS padding-top 属性

实例

设置一个P元素的顶部填充：

p
{
padding-top:2cm;
}

尝试一下 »

属性定义及使用说明

padding-top属性设置一个元素的顶部内边距（空白）。

注意： 负值是不允许的。

默认值：	0
继承：	no
版本：	CSS1
JavaScript 语法：	object.style.paddingTop="2cm"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
padding-bottom	1.0	4.0	1.0	1.0	3.5

属性值

值	描述
length	规定以具体单位计的固定的上内边距值，比如像素、厘米等。默认值是 0px。
%	定义基于父元素宽度的百分比上内边距。此值不会如预期的那样工作于所有的浏览器中。
inherit	规定应该从父元素继承上内边距。

CSS 教程: CSS Padding

CSS page-break-after 属性

实例

设置在表格元素之后始终进行分页的分页行为：

<html>
<head>
<style>
@media print
{
table {page-break-after:always}
}
</style>
</head>

<body>
....
</body>
</html>

属性定义及使用说明

page-break-after 属性设置元素后的 page-breaking 行为。

注意： 您不能对绝对定位的元素使用此属性。

注意： 请尽可能少地使用分页属性，并且避免在表格、浮动元素、带有边框的块元素中使用分页属性。

默认值：	auto
继承：	no
版本：	CSS2
JavaScript 语法：	object.style.pageBreakAfter="always"

浏览器支持

所有主要浏览器都支持page-break-after属性。

注意： 任何版本的Internet Explorer（包括IE8）支持属性值"left"，"right"，和"inherit"。

注意： Firefox，Chrome和Safari不支持属性值"avoid"，"left"和"right"。.

属性值

值	描述
auto	默认。如果必要则在元素后插入分页符。
always	在元素后插入分页符。
avoid	避免在元素后插入分页符。
left	在元素之后足够的分页符，一直到一张空白的左页为止。
right	在元素之后足够的分页符，一直到一张空白的右页为止。
inherit	规定应该从父元素继承 page-break-after 属性的设置。

CSS page-break-before 属性

实例

设置在表格元素之前始终进行分页的分页行为：

<html>
<head>
<style>
@media print
{
h1 {page-break-before:always}
}
</style>
</head>

<body>
....
</body>
</html>

属性定义及使用说明

page-break-before 属性设置元素前的 page-breaking 行为。

注意： 您不能对绝对定位的元素使用此属性。

注意：请尽可能少地使用分页属性，并且避免在表格、浮动元素、带有边框的块元素中使用分页属性。

默认值：	auto
继承：	no
版本：	CSS2
JavaScript 语法：	object.style.pageBreakBefore="always"

浏览器支持

所有主要浏览器都支持page-break-before属性。

注意： 任何版本的Internet Explorer（包括IE8）支持属性值"left"，"right"，和"inherit"。

注意： Firefox,Chrome和Safari不支持属性值"avoid"，"left"和"right"。

属性值

值	描述
auto	默认值。如果必要则在元素前插入分页符。
always	在元素前插入分页符。
avoid	避免在元素前插入分页符。
left	在元素之前足够的分页符，一直到一张空白的左页为止。
right	在元素之前足够的分页符，一直到一张空白的右页为止。
inherit	规定应该从父元素继承 page-break-before 属性的设置。

CSS 参考手册

实例

设置在表格元素内部避免进行分页的分页行为：

<html><head><style>@media print{table {page-break-inside:avoid;}}</style></head><body>....</body></html>

浏览器支持

只有 Opera 浏览器支持 page-break-inside 属性。

定义和用法

page-break-inside 属性设置元素内部的 page-breaking 行为。

尽管可以用 always 强制放上分页符，但是无法保证避免分页符的插入，创作人员最多只能要求用户代理尽可能避免插入分页。

应用于：position 值为 relative 或 static 的非浮动块级元素。

注释：请尽可能少地使用分页属性，并且避免在表格、浮动元素、带有边框的块元素中使用分页属性。

默认值：	auto
继承性：	no
版本：	CSS2
JavaScript 语法：	object.style.pageBreakInside="avoid"

可能的值

值	描述
auto	默认。如果必要则在元素内部插入分页符。
avoid	避免在元素内部插入分页符。
inherit	规定应该从父元素继承 page-break-inside 属性的设置。

实例

设置元素被查看位置的视图：

div{perspective: 500;-webkit-perspective: 500; /* Safari 和 Chrome */}

亲自试一试

浏览器支持

目前浏览器都不支持 perspective 属性。

Chrome 和 Safari 支持替代的 -webkit-perspective 属性。

定义和用法

perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。

当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

注释：perspective 属性只影响 3D 转换元素。

提示：请与 perspective-origin 属性一同使用该属性，这样您就能够改变 3D 元素的底部位置。

默认值：	none
继承性：	yes
版本：	CSS3
JavaScript 语法：	object.style.perspective=500

语法

perspective: number|none;

值	描述
number	元素距离视图的距离，以像素计。
none	默认值。与 0 相同。不设置透视。

CSS 参考手册

CSS3 perspective-origin 属性

实例

设置一个3D元素的基数位置：

div
{
perspective:150;
perspective-origin: 10% 10%;
-webkit-perspective:150; /* Safari and Chrome */
-webkit-perspective-origin: 10% 10%; /* Safari and Chrome */
}

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
perspective-origin	36.0 12.0 -webkit-	10.0	16.0 10.0 -moz-	9.0 4.0.3 -webkit-	23.0 15.0 -webkit-

属性定义及使用说明

perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。

定义时的perspective -Origin属性，它是一个元素的子元素，透视图，而不是元素本身。

注意： 对于Chrome和Safari用户：为了更好地理解perspective属性!

对于 Chrome 和 Safari 用户: 为了更好地理解perspective-Origin属性，请查看查看实例.

默认值：	50% 50%
继承：	no
版本：	CSS3
JavaScript 语法：	object.style.perspectiveOrigin="10% 10%"

语法

perspective-origin: x-axis y-axis;

值

描述

x-axis

定义该视图在 x 轴上的位置。默认值：50%。

可能的值：

left
center
right
length
%

y-axis

定义该视图在 y 轴上的位置。默认值：50%。

可能的值：

top
center
bottom
length
%

CSS position 属性

实例

定位<h2>元素：

h2
{
position:absolute;
left:100px;
top:150px;
}

尝试一下 »

在此页底部有更多的例子。

属性定义及使用说明

position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。

默认值：	static
继承：	no
版本：	CSS2
JavaScript 语法：	object.style.position="absolute"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
position	1.0	7.0	1.0	1.0	4.0

属性值

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。
initial	设置该属性为默认值，详情查看 CSS initial 关键字。

CSS3 punctuation-trim 属性

实例

在p元素在每一行的开头放置开头标点符号：

p
{
punctuation-trim:start;
}

浏览器支持

T任何主流浏览器都不支持punctuation-trim属性。

属性定义及使用说明

punctuation-trim属性指定是否应修饰，当它出现在一条线，或相邻的另一个全形标点符号字符开头或结束标点字符。

默认值：	none
继承：	yes
版本：	CSS3
JavaScript 语法：	object.style.punctuationTrim="start"

语法

punctuation-trim: none|start|end|allow-end|adjacent;

值	说明
none	请勿修剪打开或关闭标点符号
start	在每一行的开头放置开头标点符号
end	在每一行的末尾修剪结束标点符号
allow-end	如果另有不适合之前的理由，修剪每行末尾的结束标点符号。
adjacent	若以前相邻字符修剪开口punctuation是一个全形开口，中间或结束标点符号，或表意文字空间。修剪结束标点符号，如果下一个相邻的字符是一个全形关闭或中间punctuation，或表意文字空间

CSS quotes 属性

实例

设置嵌套引用的引号类型：

q:lang(en)
{
quotes: "ï¿½" "ï¿½" "'" "'";
}

尝试一下 »

属性定义及使用说明

quotes属性设置嵌套引用的引号类型。

默认值：	not specified
继承：	yes
版本：	CSS2
JavaScript 语法：	object.style.quotes="none"

浏览器支持

所有主流浏览器都支持quotes属性。

注意：IE8需要定义！DOCTYPE才支持quotes属性。

属性值

值

描述

none

规定 "content" 属性的 "open-quote" 和 "close-quote" 的值不会产生任何引号。

string string string string

定义要使用的引号。

前两个值规定第一级引用嵌套，后两个值规定下一级引号嵌套。

inherit

规定应该从父元素继承 quotes 属性的值。

引号字符

效果	说明	实体编号
"	双引号	"
'	单引号	'
‹	单一的左尖括号	‹
›	单一的右尖括号	›
«	双的左尖括号	«
»	双的右尖括号	»
'	左引号(单 high-6)	‘
'	右引号(单 high-9)	’
"	左引号(双 high-6)	“
"	右引号(双 high-9)	”
„	双引号 (双 low-9)	„

CSS3 resize 属性

实例

指定一个div元素，允许用户调整大小：

div
{
resize:both;
overflow:auto;
}

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
resize	4.0	不兼容	5.0 4.0 -moz-	4.0	15.0

属性定义及使用说明

resize属性指定一个元素是否是由用户调整大小的。

注意：resize属性适用于计算其他元素的溢出值是不是"visible"。

默认值：	none
继承：	no
版本：	CSS3
JavaScript 语法：	object.style.resize="both"

语法

resize: none|both|horizontal|vertical:

值	描述
none	用户无法调整元素的尺寸。
both	用户可调整元素的高度和宽度。
horizontal	用户可调整元素的宽度。
vertical	用户可调整元素的高度。

CSS3 教程: CSS3 用户界面

CSS right 属性

实例

把图像的右边缘设置在其包含元素右边缘向左 5 像素的位置：

img
{
position:absolute;
right:5px;
}

尝试一下 »

属性定义及使用说明

对于 static 元素，为 auto；对于长度值，则为相应的绝对长度；对于百分比数值，为指定值；否则为 auto。对于相对定义元素，left 的计算值始终等于 right。

right 属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。

注意： 如果 "position" 属性的值为 "static"，那么设置 "right" 属性不会产生任何效果。

默认值：	auto
继承：	no
版本：	CSS2
JavaScript 语法：	object.style.right="50px"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
right	1.0	5.5	1.0	1.0	5.0

属性值

值	描述
auto	默认值。通过浏览器计算右边缘的位置。
%	设置以包含元素的百分比计的右边位置。可使用负值。
length	使用 px、cm 等单位设置元素的右边位置。可使用负值。
inherit	规定应该从父元素继承 right 属性的值。

CSS 教程: CSS Positioning

CSS 参考手册

实例

将 h1 元素旋转 180 度（从上向下）：

h1{rotation-point:50% 50%;rotation:180deg;}

亲自试一试

浏览器支持

目前没有浏览器支持 rotation 属性。

定义和用法

rotation 属性围绕由 rotation-point 属性定义的指定点，对块级元素进行逆时针旋转。

提示：边框、内边距、内容以及背景（非固定）也会被旋转！

默认值：	0
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.rotation="180deg"

语法

rotation: angle;

值	描述
angle	元素旋转角度。可能的值：0deg 到 360deg。

CSS 参考手册

CSS tab-size 属性

CSS 参考手册

实例

设置一个 <pre> 元素的 tab-size：

pre {tab-size: 16; }
pre {-moz-tab-size: 16; } /* 针对 Firefox 的代码 */
pre {-o-tab-size: 16; } /* 针对 Opera 的代码 */

尝试一下 »

浏览器支持

目前只有 Chrome 支持 tab-size 属性。

Firefox 支持另一个可替代该属性的属性，即 -moz-tab-size 属性。

Opera 支持另一个可替代该属性的属性，即 -o-tab-size 属性。

目前没有浏览器支持该值作为长度单位。

定义和用法

tab-size 属性规定制表符（tab）字符的空格长度。

在 HTML 中，制表符（tab）字符通常显示为一个单一的空格字符，除了一些元素，比如 <textarea> 和 <pre>，tab-size 属性的结果只对这些元素有效。

默认值：	8
继承：	是
可动画化：	否。请参阅可动画化（animatable）。
版本：	CSS3
JavaScript 语法：	object.style.tabSize="16"尝试一下

CSS 语法

tab-size: number|length|initial|inherit;

属性值

值	描述	测试
number	默认值是 8。规定每个制表符（tab）字符要显示的空格字符的数量。	测试 »
length	规定制表符（tab）字符的长度。几乎所有的主流浏览器都不支持该属性值。
initial	设置该属性为它的默认值。请参阅 initial。	测试 »
inherit	从父元素继承该属性。请参阅 inherit。

CSS 参考手册

CSS table-layout 属性

实例

设置表格的布局算法：

table
{
table-layout:fixed;
}

尝试一下 »

属性定义及使用说明

table-layout属性为表设置表格布局算法。

默认值：	auto
继承：	no
版本：	CSS2
JavaScript 语法：	object.style.tableLayout="fixed"

浏览器支持

所有主流浏览器都支持table-layout属性。

注意： IE7和更早的版本不支持"inherit"的值。IE8需要定义！DOCTYPE。IE9支持"inherit"。

属性值

值	描述
auto	默认。列宽度由单元格内容设定。
fixed	列宽由表格宽度和列宽度设定。
inherit	规定应该从父元素继承 table-layout 属性的值。

CSS 教程: CSS 表格

CSS 参考手册

实例

在新窗口中打开所有超链接，并在所有其他标签页/窗口上面放置新窗口：

a{target:new front;}

亲自试一试

浏览器支持

目前没有浏览器支持 target。

定义和用法

target 属性是一个简写属性，用于设置以下属性：

target-name
target-new
target-position

默认值：	current window above
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.target="new front"

语法

target: target-name target-new target-position;

值	描述
target-name	规定在何处打开超链接（target destination）。
target-new	规定应该在新窗口或已有窗口的新标签页中打开超链接。
target-position	规定在何处放置新的目的地链接。

注释：target-new 和 target-position 值只有在 target-name 值创建新标签页或新窗口中有效。

CSS 参考手册

实例

在新窗口中打开所有超链接：

a{target-name:new;}

浏览器支持

目前没有浏览器支持 target-name。

定义和用法

target-name 属性规定在何处打开超链接 (target destination)。

默认值：	current
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.targetName="new"

语法

target-name: current|root|parent|new|modal|name;

值	描述
current	在链接所在的框架、标签页或窗口中打开超链接。
root	在当前标签页或窗口中超链接。
parent	在父框架中打开超链接。如果当前框架没有父框架，则将该值视作 root。
new	创建新的目的地（参阅 target-new）。
modal	在新的（暂时创建的）模态窗口中打开新窗口。
name	在已有框架、窗口或标签页中打开链接。如果 name 目的地不存在，则用该名称创建新的目的地。

CSS 参考手册

实例

在新标签页而不是新窗口中打开超链接：

a{target-name:new;target-new:tab;}

浏览器支持

目前没有浏览器支持 target-new。

定义和用法

target-new 属性规定在新窗口还是新标签页或已有窗口中打开新的目的地链接。

注释：target-new 属性只有在 target-name 属性创建新标签页或新窗口时有效。

默认值：	window
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.targetNew="tab"

语法

target-new: window|tab|none;

值	描述
window	在新窗口中打开超链接。
tab	在已有窗口的新标签页中打开超链接。
none	不创建新的目的地。

CSS 参考手册

实例

在新窗口中打开超链接，并在所有其他标签页/窗口之前放置新的窗口：

a{target-name:new;target-position:front;}

浏览器支持

目前没有浏览器支持 target-position。

定义和用法

target-position 属性规定在何处放置新的目的地链接。

注释：target-position 属性只有在 target-name 属性创建新标签页或新窗口时有效。

默认值：	above
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.targetPosition="front"

语法

target-position: above|behind|front|back;

值	描述
above	在当前标签页/窗口之前放置新的目的地标签页/窗口。
behind	在当前标签页/窗口之后放置新的目的地标签页/窗口。
front	在所有其他标签页/窗口之前放置新的目的地标签页/窗口。
back	在所有其他标签页/窗口之后放置新的目的地标签页/窗口。

CSS 参考手册

CSS text-align 属性

实例

h1, h2, 和 h3元素设置文本的对齐方式：

h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}

尝试一下 »

在此页底部有更多的例子。

属性定义及使用说明

text-align属性指定元素文本的水平对齐方式。

默认值：	left if direction is ltr, and right if direction is rtl
继承：	yes
版本：	CSS1
JavaScript 语法：	object.style.textAlign="right"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
text-align	1.0	3.0	1.0	1.0	3.5

属性值

值	描述
left	把文本排列到左边。默认值：由浏览器决定。
right	把文本排列到右边。
center	把文本排列到中间。
justify	实现两端对齐文本效果。
inherit	规定应该从父元素继承 text-align 属性的值。

CSS text-align-last 属性

CSS 参考手册

实例

把段落的最后一行向右对齐：

p
{
text-align: justify;
text-align-last: right;
-moz-text-align-last: right; } /* 针对 Firefox 的代码 */
}

尝试一下 »

浏览器支持

只有 Internet Explorer 支持 text-align-last 属性。

Firefox 支持另一个可替代该属性的属性，即 -moz-text-align-last 属性。

Internet Explorer 不支持 "start" 和 "end" 值。

定义和用法

text-align-last 属性规定如何对齐文本的最后一行。

注意：text-align-last 属性只有在 text-align 属性设置为 "justify" 时才起作用。

默认值：	auto
继承：	是
可动画化：	否。请参阅可动画化（animatable）。
版本：	CSS3
JavaScript 语法：	object.style.textAlignLast="right"尝试一下

CSS 语法

属性值

值	描述	测试
auto	默认值。最后一行被调整，并向左对齐。	测试 »
left	最后一行向左对齐。	测试 »
right	最后一行向右对齐。	测试 »
center	最后一行居中对齐。	测试 »
justify	最后一行被调整为两端对齐。	测试 »
start	最后一行在行开头对齐（如果 text-direction 是从左到右，则向左对齐；如果 text-direction 是从右到左，则向右对齐）。	测试 »
end	最后一行在行末尾对齐（如果 text-direction 是从左到右，则向右对齐；如果 text-direction 是从右到左，则向左对齐）。	测试 »
initial	设置该属性为它的默认值。请参阅 initial。	测试 »
inherit	从父元素继承该属性。请参阅 inherit。

CSS 参考手册

CSS text-decoration 属性

实例

设置h1，h2，h3和h4元素文本装饰：

h1 {text-decoration:overline}
h2 {text-decoration:line-through}
h3 {text-decoration:underline}

尝试一下 »

属性定义及使用说明

text-decoration 属性规定添加到文本的修饰。

注意： 修饰的颜色由 "color" 属性设置。

默认值：	none
继承：	no
版本：	CSS1
JavaScript 语法：	object.style.textDecoration="overline"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
text-decoration	1.0	3.0	1.0	1.0	3.5

属性值

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
blink	定义闪烁的文本。
inherit	规定应该从父元素继承 text-decoration 属性的值。

CSS 教程: CSS 文本

CSS text-decoration-color 属性

CSS 参考手册

实例

改变下划线文本中下划线的颜色：

p
{
text-decoration: underline;
text-decoration-color: red;
-moz-text-decoration-color: red; /* 针对 Firefox 的代码 */
}

尝试一下 »

浏览器支持

几乎所有的主流浏览器都不支持 text-decoration-color 属性。

Firefox 支持另一个可替代该属性的属性，即 -moz-text-decoration-color 属性。

定义和用法

text-decoration-color 属性规定文本修饰（下划线 underline、上划线 overline、中划线 line-through）的颜色。

注意：只有在带有可见的 text-decoration 的元素上，text-decoration-color 属性才起作用。

默认值：	currentColor
继承：	否
可动画化：	是。请参阅可动画化（animatable）。尝试一下
版本：	CSS3
JavaScript 语法：	object.style.textDecorationColor="red"尝试一下

CSS 语法

text-decoration-color: color|initial|inherit;

属性值

值	描述	测试
color	规定文本修饰的颜色。	测试 »
initial	设置该属性为它的默认值。请参阅 initial。	测试 »
inherit	从父元素继承该属性。请参阅 inherit。

CSS 参考手册

CSS text-decoration-line 属性

CSS 参考手册

实例

在段落的顶部显示一条线：

p
{
text-decoration-line: overline;
-moz-text-decoration-line: overline; /* 针对 Firefox 的代码 */
}

尝试一下 »

浏览器支持

几乎所有的主流浏览器都不支持 text-decoration-line 属性。

Firefox 支持另一个可替代该属性的属性，即 -moz-text-decoration-line 属性。

定义和用法

text-decoration-line 属性规定文本修饰要使用的线条类型。

注意：您也可以使用 text-decoration 属性设置 text-decoration-line。text-decoration 属性是 text-decoration-line、text-decoration-style 和 text-decoration-color 属性的速记属性。

注意：您也可以同时使用多个值，比如 underline 和 overline，来在文本的上方和下方都显示线条。

默认值：	none
继承：	否
可动画化：	否。请参阅可动画化（animatable）。
版本：	CSS3
JavaScript 语法：	object.style.textDecorationLine="overline"尝试一下

CSS 语法

属性值

值	描述	测试
none	默认值。规定文本修饰没有线条。	测试 »
underline	规定文本的下方将显示一条线。	测试 »
overline	规定文本的上方将显示一条线。	测试 »
line-through	规定文本的中间将显示一条线。	测试 »
initial	设置该属性为它的默认值。请参阅 initial。	测试 »
inherit	从父元素继承该属性。请参阅 inherit。

CSS 参考手册

CSS text-decoration-style 属性

CSS 参考手册

实例

在段落的下方显示一条波浪线：

p
{
text-decoration: underline;
-moz-text-decoration-style: wavy; /* 针对 Firefox 的代码 */
}

尝试一下 »

浏览器支持

几乎所有的主流浏览器都不支持 text-decoration-style 属性。

Firefox 支持另一个可替代该属性的属性，即 -moz-text-decoration-style 属性。

定义和用法

text-decoration-style 属性规定线条如何显示。

默认值：	solid
继承：	否
可动画化：	否。请参阅可动画化（animatable）。
版本：	CSS3
JavaScript 语法：	object.style.textDecorationStyle="wavy"尝试一下

CSS 语法

属性值

值	描述	测试
solid	默认值。线条将显示为单线。	测试 »
double	线条将显示为双线。	测试 »
dotted	线条将显示为点状线。	测试 »
dashed	线条将显示为虚线。	测试 »
wavy	线条将显示为波浪线。	测试 »
initial	设置该属性为它的默认值。请参阅 initial。	测试 »
inherit	从父元素继承该属性。请参阅 inherit。

CSS 参考手册

CSS text-indent 属性

实例

缩进段落的第一行50像素：

p
{
text-indent:50px;
}

尝试一下 »

属性定义及使用说明

text-indent 属性规定文本块中首行文本的缩进。

注意： 负值是允许的。如果值是负数，将第一行左缩进。

默认值：	0
继承：	yes
版本：	CSS1
JavaScript 语法：	object.style.textIndent="50px"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
text-indent	1.0	3.0	1.0	1.0	3.5

属性值

值	描述
length	定义固定的缩进。默认值：0。
%	定义基于父元素宽度的百分比的缩进。
inherit	规定应该从父元素继承 text-indent 属性的值。

CSS 教程: CSS 文本

CSS3 text-justify 属性

实例

Justification改变字与字之间的间距：

div
{
text-align:justify;
text-justify:inter-word;
}

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

Property
text-justify	不支持	5.5	不支持	不支持	不支持

属性定义及使用说明

text-justify属性指定文本对齐设置为"justify"的理据。

此属性指定应怎样对齐文本以及对齐间距。

默认值：	auto
继承：	yes
版本：	CSS3
JavaScript 语法：	object.style.textJustify="inter-word"

语法

值	描述
auto	浏览器决定齐行算法。
none	禁用齐行。
inter-word	增加/减少单词间的间隔。
inter-ideograph	用表意文本来排齐内容。
inter-cluster	只对不包含内部单词间隔的内容（比如亚洲语系）进行排齐。
distribute	类似报纸版面，除了在东亚语系中最后一行是不齐行的。
kashida	通过拉伸字符来排齐内容。

CSS3 text-outline 属性

实例

设置text-outline（文本-轮廓）:

p.test
{
text-outline: 2px 2px #ff0000;
}

浏览器支持

任何主流浏览器都不支持text-outline属性。

属性定义及使用说明

text-outline属性指定文字大纲。

默认值：	none
继承：	yes
版本：	CSS3
JavaScript 语法：	object.style.textOutline="2px 2px #ff0000"

语法

text-outline: thickness blur color;

值	描述
thickness	必需。轮廓的粗细。
blur	可选。轮廓的模糊半径。
color	必需。轮廓的颜色。参阅 CSS 颜色值。

CSS3 text-overflow 属性

实例

使用text-overflow属性：

div.test
{
text-overflow:ellipsis;
}

尝试一下 »
在此页底部有更多的例子。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
text-overflow	4.0	6.0	7.0	3.1	11.0 9.0 -o-

属性定义及使用说明

text-overflow属性指定当文本溢出包含它的元素，应该发生什么。

默认值：	clip
继承：	no
版本：	CSS3
JavaScript 语法：	object.style.textOverflow="ellipsis"

语法

text-overflow: clip|ellipsis|string;

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

实例

基础的文本阴影效果：

h1{text-shadow: 5px 5px 5px #FF0000;}

亲自试一试

页面底部有更多实例。

浏览器支持

IE	Firefox	Chrome	Safari	Opera

所有主流浏览器都支持 text-shadow 属性。

注释：Internet Explorer 9 以及更早版本的浏览器不支持 text-shadow 属性。

定义和用法

text-shadow 属性向文本设置阴影。

默认值：	none
继承性：	yes
版本：	CSS3
JavaScript 语法：	object.style.textShadow="2px 2px #ff0000"

语法

text-shadow: h-shadow v-shadow blur color;

注释：text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。

值	描述	测试
h-shadow	必需。水平阴影的位置。允许负值。	测试
v-shadow	必需。垂直阴影的位置。允许负值。	测试
blur	可选。模糊的距离。	测试
color	可选。阴影的颜色。参阅 CSS 颜色值。	测试

亲自试一试 - 实例

带有模糊效果的文本阴影: 该例演示带有模糊效果的文本阴影。
白色文本上的阴影: 本例演示白色文本上的文本阴影。
霓虹灯效果的文本阴影: 本例演示带有霓虹灯效果的文本阴影。

实例

转换不同元素中的文本：

h1 {text-transform:uppercase;}
h2 {text-transform:capitalize;}
p {text-transform:lowercase;}

尝试一下 »

属性定义及使用说明

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

默认值：	none
继承：	yes
版本：	CSS1
JavaScript 语法：	object.style.textTransform="uppercase"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
animation-duration	43.0 3.0 -webkit-	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.0 -o-

属性值

值	描述
none	默认。定义带有小写字母和大写字母的标准的文本。
capitalize	文本中的每个单词以大写字母开头。
uppercase	定义仅有大写字母。
lowercase	定义无大写字母，仅有小写字母。
inherit	规定应该从父元素继承 text-transform 属性的值。

CSS 参考手册

实例

不允许换行：

p.test {text-wrap:none;}

亲自试一试

浏览器支持

目前主流浏览器都不支持 text-wrap 属性。

定义和用法

text-wrap 属性规定文本的换行（折行）规则。

默认值：	normal
继承性：	yes
版本：	CSS3
JavaScript 语法：	object.style.textWrap="none"

语法

text-wrap: normal|none|unrestricted|suppress;

值	描述
normal	只在允许的换行点进行换行。
none	不换行。元素无法容纳的文本会溢出。
unrestricted	在任意两个字符间换行。
suppress	压缩元素中的换行。浏览器只在行中没有其他有效换行点时进行换行。

CSS 参考手册

CSS top 属性

实例

把图像的上边缘设置在其包含元素上边缘之下5像素高的位置：

img
{
position:absolute;
top:5px;
}

尝试一下 »

属性定义及使用说明

top 属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。

对于相对定义元素，如果 top 和 bottom 都是 auto，其计算值则都是 0；如果其中之一为 auto，则取另一个值的相反数；如果二者都不是 auto，bottom 将取 top 值的相反数。

注意： 如果 "position" 属性的值为 "static"，那么设置 "top" 属性不会产生任何效果。

默认值：	auto
继承：	no
版本：	CSS2
JavaScript 语法：	object.style.top="50px"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
top	1.0	5.0	1.0	1.0	6.0

属性值

值	描述
auto	默认值。通过浏览器计算上边缘的位置。
%	设置以包含元素的百分比计的上边位置。可使用负值。
length	使用 px、cm 等单位设置元素的上边位置。可使用负值。
inherit	规定应该从父元素继承 top 属性的值。

CSS 教程: CSS Positioning

实例

旋转 div 元素：

div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
}

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
transform (2D)	36.0 4.0 -webkit-	10.0 9.0 -ms-	16.0 3.5 -moz-	9.0 3.2 -webkit-	23.0 15.0 -webkit- 10.5 -o-
transform (3D)	36.0 12.0 -webkit-	12.0	10.0	16.0 10.0 -moz-	9.0 4.0 -webkit-

属性定义及使用说明

Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

为了更好地理解Transform属性,请查看在线实例.

默认值：	none
继承：	no
版本：	CSS3
JavaScript 语法：	object.style.transform="rotate(7deg)"

语法

transform: none|transform-functions;

值	描述
none	定义不进行转换。
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y)	定义 2D 转换。
translate3d(x,y,z)	定义 3D 转换。
translateX(x)	定义转换，只是用 X 轴的值。
translateY(y)	定义转换，只是用 Y 轴的值。
translateZ(z)	定义 3D 转换，只是用 Z 轴的值。
scale(x[,y]?)	定义 2D 缩放转换。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	通过设置 X 轴的值来定义缩放转换。
scaleY(y)	通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿着 X 轴的 3D 旋转。
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)	定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换。
perspective(n)	为 3D 转换元素定义透视视图。

CSS3 transform-origin 属性

实例

设置旋转元素的基点位置：

div
{
transform: rotate(45deg);
transform-origin:20% 40%;
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin:20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-webkit-transform-origin:20% 40%; /* Safari and Chrome */
}

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
transform-origin (two-value syntax)	36.0 4.0 -webkit-	10.0 9.0 -ms-	16.0 3.5 -moz-	9.0 3.2 -webkit-	23.0 15.0 -webkit- 10.5 -o-
transform-origin (three-value syntax)	36.0 12.0 -webkit-	10.0	16.0 10.0 -moz-	9.0 4.0 -webkit-	23.0 15.0 -webkit-

属性定义及使用说明

transform-Origin属性允许您更改转换元素的位置。

2D转换元素可以改变元素的X和Y轴。 3D转换元素，还可以更改元素的Z轴。

为了更好地理解Transform-Origin属性，请查看这个演示.

注意： 使用此属性必须先使用transform 属性。

Tip:Safari/Chrome用户：为了更好地理解3D 转换属性,请查看演示.

默认值：	50% 50% 0
继承：	no
版本：	CSS3
JavaScript 语法：	object.style.transformOrigin="20% 40%"

语法

transform-origin: x-axis y-axis z-axis;

值

描述

x-axis

定义视图被置于 X 轴的何处。可能的值：

left
center
right
length
%

y-axis

定义视图被置于 Y 轴的何处。可能的值：

top
center
bottom
length
%

z-axis

定义视图被置于 Z 轴的何处。可能的值：

length

CSS3 transform-style 属性

实例

让转换的子元素保留3D转换：

div
{
transform: rotateY(60deg);
transform-style: preserve-3d;
-webkit-transform: rotateY(60deg); /* Safari and Chrome */
-webkit-transform-style: preserve-3d; /* Safari and Chrome */
}

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
transform-style	36.0 12.0 -webkit-	11.0	16.0 10.0 -moz-	9.0 4.0 -webkit-	23.0 15.0 -webkit-

属性定义及使用说明

transform--style属性指定嵌套元素是怎样在三维空间中呈现。

注意： 使用此属性必须先使用transform 属性.

Safari/Chrome用户：为了更好地理解transform--style属性，请查看实例演示.

默认值：	flat
继承：	no
版本：	CSS3
JavaScript 语法：	object.style.transformStyle="preserve-3d"

语法

transform-style: flat|preserve-3d;

值	描述
flat	子元素将不保留其 3D 位置。
preserve-3d	子元素将保留其 3D 位置。

CSS 参考手册

实例

把鼠标指针放到 div 元素上，其宽度会从 100px 逐渐变为 300px：

div{width:100px;transition: width 2s;-moz-transition: width 2s; /* Firefox 4 */-webkit-transition: width 2s; /* Safari 和 Chrome */-o-transition: width 2s; /* Opera */}

亲自试一试

浏览器支持

IE	Firefox	Chrome	Safari	Opera

Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。

Safari 支持替代的 -webkit-transition 属性。

注释：Internet Explorer 9 以及更早版本的浏览器不支持 transition 属性。

定义和用法

transition 属性是一个简写属性，用于设置四个过渡属性：

transition-property
transition-duration
transition-timing-function
transition-delay

注释：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。

默认值：	all 0 ease 0
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.transition="width 2s"

语法

transition: property duration timing-function delay;

值	描述
transition-property	规定设置过渡效果的 CSS 属性的名称。
transition-duration	规定完成过渡效果需要多少秒或毫秒。
transition-timing-function	规定速度效果的速度曲线。
transition-delay	定义过渡效果何时开始。

CSS 参考手册

实例

在过渡效果开始前等待 2 秒：

div{transition-delay: 2s;-moz-transition-delay: 2s; /* Firefox 4 */-webkit-transition-delay: 2s; /* Safari 和 Chrome */-o-transition-delay: 2s; /* Opera */}

亲自试一试

浏览器支持

IE	Firefox	Chrome	Safari	Opera

Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition-delay 属性。

Safari 支持替代的 -webkit-transition-delay 属性。

注释：Internet Explorer 9 以及更早版本的浏览器不支持 transition-delay 属性。

定义和用法

transition-delay 属性规定过渡效果何时开始。

transition-delay 值以秒或毫秒计。

默认值：	0
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.transitionDelay="2s"

语法

transition-delay: time;

值	描述
time	规定在过渡效果开始之前需要等待的时间，以秒或毫秒计。

CSS 参考手册

CSS3 transition-duration 属性

属性定义及使用说明

transition-duration 属性规定完成过渡效果需要花费的时间（以秒或毫秒计）。

默认值：	0
继承：	no
版本：	CSS3
JavaScript 语法：	object.style.transitionDuration="5s"

语法

transition-duration: time;

值	描述
time	规定完成过渡效果需要花费的时间（以秒或毫秒计）。默认值是 0，意味着不会有效果。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
transition-duration	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-

实例

最后5秒出现切换效果：

transition-duration: 5s;
-webkit-transition-duration: 5s; /* Safari */

尝试一下 »

CSS3 transition-property属性

属性定义及使用说明

transition-property属性指定CSS属性的nametransition效果（transition效果时将会启动指定的CSS属性的变化）。

提示:一个转场效果，通常会出现在当用户将鼠标悬停在一个元素上时。

注意：始终指定transition-duration属性，否则持续时间为0，transition不会有任何效果。

默认值：	all
继承：	no
版本：	CSS3
JavaScript 语法：	object.style.transitionProperty="width,height"

语法

transition-property: none|all| property;

值	描述
none	没有属性会获得过渡效果。
all	所有属性都将获得过渡效果。
property	定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
transition-property	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-

实例

将鼠标悬停在一个div元素上，逐步改变表格的宽度：

div
{
transition-property:width;
-moz-transition-property: width; /* Firefox 4 */
-webkit-transition-property:width; /* Safari and Chrome */
-o-transition-property:width; /* Opera */
}

div:hover {width:300px;}

尝试一下 »
在此页底部有更多的例子。

CSS3 transition-timing-function 属性

属性定义及使用说明

transition-timing-function属性指定切换效果的速度。

此属性允许一个过渡效果，以改变其持续时间的速度。

默认值：	ease
继承：	no
版本：	CSS3
JavaScript 语法：	object.style.transitionTimingFunction="linear"

语法

值	描述
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)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
transition-timing-function	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-

实例

转场效果以同样的速度从开始到结束：

transition-timing-function: linear;
-webkit-transition-timing-function: linear; /* Safari and Chrome */

尝试一下 »

实例

为了更好地理解不同的函数值：这里有五个不同的div元素，用5个不同的值：

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
/* Safari */
#div1 {-webkit-transition-timing-function: linear;}
#div2 {-webkit-transition-timing-function: ease;}
#div3 {-webkit-transition-timing-function: ease-in;}
#div4 {-webkit-transition-timing-function: ease-out;}
#div5 {-webkit-transition-timing-function: ease-in-out;}

尝试一下 »

实例

和上面的例子一样，但指定速度曲线立方贝塞尔曲线函数：

#div1 {transition-timing-function: cubic-bezier(0,0,1,1;}
#div2 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Safari */
#div1 {-webkit-transition-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-webkit-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-webkit-transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-webkit-transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-webkit-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}

尝试一下 »

CSS unicode-bidi 属性

CSS 参考手册

定义和用法

unicode-bidi 属性与 direction 属性一起使用，来设置或返回文本是否被重写，以便在同一文档中支持多种语言。

默认值：	normal
继承：	是
可动画化：	否。请参阅可动画化（animatable）。
版本：	CSS2
JavaScript 语法：	object.style.unicodeBidi="bidi-override"尝试一下

CSS 语法

unicode-bidi: normal|embed|bidi-override|initial|inherit;

属性值

值	描述	测试
normal	默认。不使用附加的嵌入层面。	测试 »
embed	创建一个附加的嵌入层面。	测试 »
bidi-override	创建一个附加的嵌入层面。重新排序取决于 direction 属性。	测试 »
initial	设置该属性为它的默认值。请参阅 initial。	测试 »
inherit	从父元素继承该属性。请参阅 inherit。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
unicode-bidi	2.0	5.5	1.0	1.3	9.2

实例

重写文本：

div
{
direction:rtl;
unicode-bidi:bidi-override;
}

尝试一下 »

CSS 教程：CSS Text（文本）

HTML DOM 参考手册：unicodeBidi 属性

CSS 参考手册

CSS vertical-align 属性

属性定义及使用说明

vertical-align属性设置一个元素的垂直对齐。

默认值：	baseline
继承：	no
版本：	CSS1
JavaScript 语法：	object.style.verticalAlign="bottom"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
vertical-align	1.0	4.0	1.0	1.0	4.0

属性值

值	描述
baseline	默认。元素放置在父元素的基线上。
sub	垂直对齐文本的下标。
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	把元素的顶端与行中最低的元素的顶端对齐。
text-bottom	把元素的底端与父元素字体的底端对齐。
length
%	使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit	规定应该从父元素继承 vertical-align 属性的值。

实例

重写文本：

img
{
vertical-align:text-top;
}

尝试一下 »

CSS 教程：CSS Text（文本）

CSS visibility 属性

属性定义及使用说明

visibility属性指定一个元素是否是可见的。

提示:即使不可见的元素也会占据页面上的空间。请使用 "display" 属性来创建不占据页面空间的不可见元素。

默认值：	visible
继承：	yes
版本：	CSS2
JavaScript 语法：	object.style.visibility="hidden"

属性值

值	描述
visible	默认值。元素是可见的。
hidden	元素是不可见的。
collapse	当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。
inherit	规定应该从父元素继承 visibility 属性的值。

浏览器支持

所有主流浏览器都支持visibility属性。

注意： ：Internet Explorer（包括IE8）没有版本支持属性值"inherit"或"collapse"。

实例

使 <h2> 元素不可见：

h2
{
visibility:hidden;
}

尝试一下 »

CSS width 属性

属性定义及使用说明

width属性设置元素的宽度。

注意： width属性不包括填充，边框和页边距！

默认值：	auto
继承：	no
版本：	CSS1
JavaScript 语法：	object.style.width="50px"

属性值

值	描述
auto	默认值。浏览器可计算出实际的宽度。
length	使用 px、cm 等单位定义宽度。
%	定义基于包含块（父元素）宽度的百分比宽度。
inherit	规定应该从父元素继承 width 属性的值。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
width	1.0	4.0	1.0	1.0	3.5

实例

设置一个段落的高度和宽度：

p.ex
{
height:100px;
width:100px;
}

尝试一下 »

CSS white-space 属性

属性定义及使用说明

white-space属性指定元素内的空白怎样处理。

默认值：	normal
继承：	yes
版本：	CSS1
JavaScript 语法：	object.style.whiteSpace="pre"

属性值

值	描述
normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
white-space	1.0	8.0	3.5	3.0	9.5

实例

规定段落中的文本不进行换行：

p
{
white-space:nowrap;
}

尝试一下 »

CSS 教程: CSS Text

CSS3 border-image-width 属性

属性定义及使用说明

border-image -width属性指定图像边界的宽度。

默认值:	1
继承:	no
版本:	CSS3
JavaScript 语法:	object.style.borderImageWidth="30 30"

语法

border-image-width: number|%|auto;

注意： border-image -width的4个值指定用于把border图像区域分为九个部分。他们代表上，右，底部，左，两侧向内距离。如果第四个值被省略，它和第二个是相同的。如果也省略了第三个，它和第一个是相同的。如果也省略了第二个，它和第一个是相同的。负值是不允许的。

值	说明
number	表示相应的border-width 的倍数
%	边界图像区域的大小：横向偏移的宽度的面积，垂直偏移的高度的面积
auto	如果指定了，宽度是相应的image slice的内在宽度或高度

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
border-image-width	15.0	11.0	13.0	6.0	15.0

实例

指定图像边界的宽度：

div
{
border-image-source: url(border.png);
border-image-width: 30 30;
}

定义和用法

word-break 属性规定自动换行的处理方法。

提示：通过使用 word-break 属性，可以让浏览器实现在任意位置的换行。

默认值：	normal
继承性：	yes
版本：	CSS3
JavaScript 语法：	object.style.wordBreak="keep-all"

语法

word-break: normal|break-all|keep-all;

值	描述
normal	使用浏览器默认的换行规则。
break-all	允许在单词内换行。
keep-all	只能在半角空格或连字符处换行。

浏览器支持

属性
word-break	4.0	5.5	15.0	3.1	15.0

所有主流浏览器都支持 word-break 属性。

实例

在恰当的断字点进行换行：

p.test {word-break:hyphenate;}

CSS word-spacing 属性

属性定义及使用说明

word-spacing属性增加或减少字与字之间的空白。

注意： 负值是允许的。

默认值：	normal
继承：	yes
版本：	CSS1
JavaScript 语法：	object.style.wordSpacing="10px"

属性值

值	描述
normal	默认。定义单词间的标准空间。
length	定义单词间的固定空间。
inherit	规定应该从父元素继承 word-spacing 属性的值。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
word-spacing	1.0	6.0	1.0	1.0	3.5

实例

指定段字之间的空间，应该是30像素：

p
{
word-spacing:30px;
}

尝试一下 »

CSS 教程: CSS Text

CSS3 word-wrap 属性

属性定义及使用说明

word-wrap属性允许长的内容可以自动换行。

默认值：	normal
继承：	yes
版本：	CSS3
JavaScript 语法：	object.style.wordWrap="break-word"

语法

word-wrap: normal|break-word;

值	描述
normal	只在允许的断字点换行（浏览器保持默认处理）。
break-word	在长单词或 URL 地址内部进行换行。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
word-wrap	4.0	5.5	3.5	3.1	10.5

实例

指定如果足够长得话，应该换行：

p.test {word-wrap:break-word;}

尝试一下 »

CSS3 教程: CSS3 Text Effects

CSS z-index 属性

属性定义及使用说明

z-index 属性指定一个元素的堆叠顺序。

拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注意： z-index 进行定位元素(position:absolute, position:relative, or position:fixed)。

默认值：	auto
继承：	no
版本：	CSS2
JavaScript 语法：	object.style.zIndex="1"

属性值

值	描述
auto	默认。堆叠顺序与父元素相等。
number	设置元素的堆叠顺序。
inherit	规定应该从父元素继承 z-index 属性的值。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
z-index	1.0	4.0	3.0	1.0	4.0

实例

设置图像的 z-index：

img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}

尝试一下 »

CSS 教程: CSS Positioning

CSS align-content 属性

CSS 参考手册

定义和用法

align-content 属性在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）。

提示：使用 justify-content 属性对齐主轴上的各项（水平）。

注意：容器内必须有多行的项目，该属性才能渲染出效果。

默认值：	stretch
继承：	否
可动画化：	否。请参阅可动画化（animatable）。
版本：	CSS3
JavaScript 语法：	object.style.alignContent="center"

CSS 语法

align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;

默认值

值	描述	测试
stretch	默认值。项目被拉伸以适应容器。	测试 »
center	项目位于容器的中心。	测试 »
flex-start	项目位于容器的开头。	测试 »
flex-end	项目位于容器的结尾。	测试 »
space-between	项目位于各行之间留有空白的容器内。	测试 »
space-around	项目位于各行之前、之间、之后都留有空白的容器内。	测试 »
initial	设置该属性为它的默认值。请参阅 initial。	测试 »
inherit	从父元素继承该属性。请参阅 inherit。

实例

对齐弹性盒的 <div> 元素的各项：

div
{
display: flex;
flex-flow: row wrap;
align-content:space-around;
}

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。

属性
align-content	21.0	11.0	28.0	9.0 7.0 -webkit-	12.1

CSS 参考手册：align-items 属性

CSS 参考手册：align-self 属性

CSS 参考手册：justify-content 属性

CSS 参考手册

CSS align-items 属性

CSS 参考手册

定义和用法

align-items：设置了 flex 容器的对齐方式。

提示：使用每个 flex 对象元素的 align-self 属性可重写 align-items 属性。

默认值：	stretch
继承：	否
可动画化：	否。请参阅可动画化（animatable）。
版本：	CSS3
JavaScript 语法：	object.style.alignItems="center"尝试一下

CSS 语法

属性值

值	描述	测试
stretch	默认，拉伸元件以适应容器。	测试 »
center	中心元素在容器内。	测试 »
flex-start	位置元素在容器的开头。	测试 »
flex-end	位置元素在容器的末端。	测试 »
baseline	位置元素在容器的基线。	测试 »
initial	设置为默认值。请参阅 initial。	测试 »
inherit	从其父元素继承此属性。请参阅 inherit。

实例

居中对齐弹性盒的各项 <div> 元素：

div
{
display: flex;
align-items:center;
}

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。

属性
align-items	21.0	11.0	20.0	9.0 7.0 -webkit-	12.1

CSS 参考手册：align-content 属性

CSS 参考手册：align-self 属性

CSS 参考手册

CSS align-self 属性

CSS 参考手册

定义和用法

align-self 属性定义flex子项单独在侧轴（纵轴）方向上的对齐方式。。

注意：align-self 属性可重写灵活容器的 align-items 属性。

默认值：	auto
继承：	否
可动画化：	否。请参阅可动画化（animatable）。
版本：	CSS3
JavaScript 语法：	object.style.alignSelf="center"

CSS 语法

参数

值	描述	测试
auto	默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。	测试 »
stretch	元素被拉伸以适应容器。	测试 »
center	元素位于容器的中心。	测试 »
flex-start	元素位于容器的开头。	测试 »
flex-end	元素位于容器的结尾。	测试 »
baseline	元素位于容器的基线上。	测试 »
initial	设置该属性为它的默认值。请参阅 initial。	测试 »
inherit	从父元素继承该属性。请参阅 inherit。

实例

居中对齐弹性对象元素内的某个项：

#myBlueDiv
{
align-self:center;
}

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。

属性
align-self	21.0	11.0	20.0	9.0 7.0 -webkit-	12.1

CSS 参考手册：align-content 属性

CSS 参考手册：align-items 属性

CSS 参考手册

CSS all 属性

实例

修改所有元素或其父元素的属性为初始值：

div {
    background-color: yellow;
    color: red;
    all: initial;
}

尝试一下 »

定义和使用

all 属性用于重置所有属性，除了 unicode-bidi 和 direction。

默认值:	none
继承:	无
动画:	no。阅读 animatable
版本:	CSS3
JavaScript 语法:	object.style.all="initial"

浏览器支持

The numbers in the table specify the first browser version that fully supports the property.

表格中的数字表示支持该属性的浏览器最低版本号。

属性
all	37.0	不支持	不支持	27.0	不支持	24.0

CSS 语法

all: initial|inherit|unset;

属性值

值	描述
initial	修改所有元素属性或父元素的值为其初始化值
inherit	修改所有元素属性或父元素的值为其父元素的值
unset	修改所有元素属性或父元素的值为其父元素的值(如果有继承)或其初始值

Body 对象参考手册 CSS 参考手册

定义和用法

animation 属性是六个动画属性的速记属性：

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction

注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。

默认值：	none 0 ease 0 1 normal
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.animation="mymove 5s infinite"

语法

animation: name duration timing-function delay iteration-count direction;

值	描述
animation-name	规定需要绑定到选择器的 keyframe 名称。。
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数。
animation-direction	规定是否应该轮流反向播放动画。

实例

使用简写属性，将动画与 div 元素绑定：

div
{
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
}

尝试一下 »

浏览器支持

属性
animation	43.0 4.0 -webkit-	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.0 -o-

Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。

Safari 和 Chrome 支持替代的 -webkit-animation 属性。

注释：Internet Explorer 9 以及更早的版本不支持 animation 属性。

定义和用法

animation-delay 属性定义动画什么时候开始。

animation-delay 值单位可以是秒（s）或毫秒（ms）。

提示: 允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画。

默认值:	0
继承:	no
版本:	CSS3
JavaScript 语法:	object object.style.animationDelay="2s"

语法

animation-delay: time;

值	描述	测试
time	可选。定义动画开始前等待的时间，以秒或毫秒计。默认值为0	测试 »

实例

等待两秒，然后开始动画：

animation-delay:2s;-webkit-animation-delay:2s; /* Safari 和 Chrome */

尝试一下 »

实例

负值，请注意动画跳过 2 秒进入动画周期：

animation-delay: -2s /* Opera */
-moz-animation-delay: -2s /* Firefox */
-webkit-animation-delay: -2s /* Safari 和 Chrome */

尝试一下 »

浏览器支持


`animation-delay`	4.0 -webkit-	10.0	16.0 (5.0 -moz-)	4.0 -webkit-	15.0 -webkit- (12.0 -o-)

CSS3 教程: CSS3 动画

CSS 参考手册

定义和用法

animation-direction：属性控制如何在reverse或alternate周期播放动画。

如果 animation-direction 值是 "alternate"，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放。

注释：如果把动画设置为只播放一次，则该属性没有效果。

默认值：	normal
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.animationDirection="alternate"

语法

animation-direction: normal|reverse|alternate|alternate-reverse;

值	描述	测试
normal	以正常的方式播放动画	测试
reverse	以相反方向播放动画
alternate	播放动画作为正常每奇数时间（1,3,5等）和反方向每偶数时间（2,4,6，等...）	测试
alternate-reverse	在每个奇数时间（1,3,5等）在相反方向上播放动画，并且在每个偶数时间（2,4,6等等）的正常方向上播放动画

实例

暂停动画：

div
{
animation-direction:alternate;
-webkit-animation-direction:alternate; /* Safari 和 Chrome */
}

尝试一下 »

浏览器支持

属性
animation-direction	43.0 4.0 -webkit-	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.0 -o-

Internet Explorer 10、Firefox 以及 Opera 支持 animation-direction 属性。

Safari 和 Chrome 支持替代的 -webkit-animation-direction 属性。

注释：Internet Explorer 9 以及更早的版本不支持 animation-direction 属性。

CSS3 animation-duration 属性

定义和用法

animation-duration：定义动画完成一个周期需要多少秒或毫秒。

默认值:	0
继承:	no
版本:	CSS3
JavaScript 语法:	object object.style.animationDuration="3s"

语法

animation-duration: time;

值	说明
time	设置一个动画周期的时间间隔（以秒或毫秒为单位）。默认值为0，表示不会有动画

实例

设置动画在两秒内完成:

animation-duration:2s;
-webkit-animation-duration:2s; /* Safari and Chrome */

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
animation-duration	43.0 3.0 -webkit-	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.0 -o-

CSS3 tutorial: CSS3 动画

Body 对象参考手册 CSS 参考手册

定义和用法

animation-fill-mode：设置样式以在动画不播放时应用元素。

注释：其属性值是由逗号分隔的一个或多个填充模式关键词。

默认值：	none
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.animationFillMode=none

语法

animation-fill-mode: none|forwards|backwards|both|initial|inherit;

值	描述
none	默认值。无样式
forwards	动画结束后，使用元素的结束属性值。
backwards	使用元素的起始值。
both	动画将遵循向前和向后的规则。

实例

为 h1 元素规定填充模式：

h1
{
animation-fill-mode: forwards;
}

尝试一下 »

浏览器支持

属性
animation-fill-mode	4.0 -webkit-	10.0	16.0 5.0 -moz-	4.0 -webkit-	15.0 -webkit- 12.1 12.0 -o-

Internet Explorer 10、Firefox 以及 Opera 支持 animation-fill-mode 属性。

Safari 和 Chrome 支持替代的 -webkit-animation-fill-mode 属性。

注释：Internet Explorer 9 以及更早的版本不支持 animation-fill-mode 属性。

CSS3 animation-iteration-count 属性

定义和用法

animation-iteration-count属性定义动画应该播放多少次。

默认值:	1
继承:	no
版本:	CSS3
JavaScript 语法:	object object.style.animationIterationCount=3

语法

animation-iteration-count: value;

值	描述	测试
n	定义播放动画多少次。默认值为1	测试 »
infinite	指定动画应该播放无限次（永远）	测试 »

实例

播放三次动画：

animation-iteration-count:3;
-webkit-animation-iteration-count:3; /*Safari and Chrome*/

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

W3Cschool教程(51coolma.cn)

属性
animation-iteration-count	43.0 4.0 -webkit-	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.0 -o-

CSS3 教程: CSS3 动画

Body 对象参考手册 CSS 参考手册

定义和用法

animation-name 属性为 @keyframes 动画规定名称。

注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。

默认值：	none
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.animationName="mymove"

语法

animation-name: keyframename|none;

值	描述
keyframename	规定需要绑定到选择器的 keyframe 的名称。
none	规定无动画效果（可用于覆盖来自级联的动画）。

实例

为 @keyframes 动画规定一个名称：

div
{
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
}

尝试一下 »

浏览器支持

属性
animation-name	43.0 4.0 -webkit-	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.0 -o-

Internet Explorer 10、Firefox 以及 Opera 支持 animation-name 属性。

Safari 和 Chrome 支持替代的 -webkit-animation-name 属性。

注释：Internet Explorer 9 以及更早的版本不支持 animation-name 属性。

定义和用法

animation-play-state ：设置是否运行或暂停动画。

注释：您可以在 JavaScript 中使用该属性，这样就能在播放过程中暂停动画。

默认值：	running
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.animationPlayState="paused"

语法

animation-play-state: paused|running;

值	描述	测试
paused	动画已暂停。	测试
running	默认值，动画正在运行。	测试

实例

暂停动画：

div
{
animation-play-state:paused;
-webkit-animation-play-state:paused; /* Safari 和 Chrome */
}

尝试一下 »

浏览器支持

属性
animation-play-state	43.0 4.0 -webkit-	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.0 -o-

Internet Explorer 10、Firefox 以及 Opera 支持 animation-play-state 属性。

Safari 和 Chrome 支持替代的 -webkit-animation-play-state 属性。

注释：Internet Explorer 9 以及更早的版本不支持 animation-play-state 属性。

CSS3 animation-timing-function 属性

定义和用法

animation-timing-function：指定动画速度曲线。

速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。

速度曲线用于使变化更为平滑。

默认值:	ease
继承:	no
版本:	CSS3
JavaScript 语法:	object object.style.animationTimingFunction="linear"

语法

animation-timing-function: linear|ease|ease-in|ease-out|cubic-bezier(n,n,n,n);

值	描述	测试
linear	动画从开始到结束具有相同的速度。	测试
ease	动画有一个缓慢的开始，然后快，结束慢。	测试
ease-in	动画有一个缓慢的开始。	测试
ease-out	动画结束缓慢。	测试
ease-in-out	动画具有缓慢的开始和慢的结束。	测试
cubic-bezier(n,n,n,n)	在立方贝塞尔函数中定义速度函数。可能的值是从0到1的数字值。

提示: 请试着在下面的"尝试一下"功能中使用不同的值。

在线实例

实例

从开始到结束以相同的速度播放动画:

animation-timing-function:linear;
-webkit-animation-timing-function:linear; /* Safari and Chrome */

尝试一下 »
在此页底部有更多的例子。

实例

为了更好地理解不同的定时函数值，这里提供了设置五个不同值的五个不同的 div 元素：

尝试一下 »

实例

与上例相同，但是通过 cubic-bezier 函数来定义速度曲线：

尝试一下 »

浏览器支持

属性
animation-timing-function	43.0 4.0 -webkit-	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.0 -o-

CSS3 tutorial: CSS3 动画

CSS 参考手册

实例

使 div 元素看上去像一个按钮：

div{appearance:button;-moz-appearance:button; /* Firefox */-webkit-appearance:button; /* Safari 和 Chrome */}

亲自试一试

页面底部有更多实例。

浏览器支持

所有主流浏览器都不支持 appearance 属性。

Firefox 支持替代的 -moz-appearance 属性。

Safari 和 Chrome 支持替代的 -webkit-appearance 属性。

定义和用法

appearance 属性允许您使元素看上去像标准的用户界面元素。

默认值：	normal
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.appearance="button"

语法

appearance: normal|icon|window|button|menu|field;

值	描述
normal	将元素呈现为常规元素。
icon	将元素呈现为图标（小图片）。
window	将元素呈现为视口。
button	将元素呈现为按钮。
menu	将元素呈现为一套供用户选择的选项。
field	将元素呈现为输入字段。

CSS 参考手册

CSS3 backface-visibility 属性

定义和用法

backface-visibility 属性定义当元素不面向屏幕时是否可见。

如果在旋转元素不希望看到其背面时，该属性很有用。

Chrome/Safari 用户：为了更好地理解这个属性，查看演示: 查看在线实例。

默认值:	visible
继承:	no
版本:	CSS3
JavaScript语法:	object.style.backfaceVisibility="hidden"

语法

backface-visibility: visible|hidden;

值	描述
visible	默认值。背面是可见的。
hidden	背面是不可见的。

实例

隐藏旋转的div元素的背面:

div
{
backface-visibility:hidden;
-webkit-backface-visibility:hidden; /* Chrome and Safari */
-moz-backface-visibility:hidden; /* Firefox */
-ms-backface-visibility:hidden; /* Internet Explorer */
}

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
backface-visibility	36.0 12.0 -webkit-	10.0	16.0 10.0 -moz-	9.0 4.0 -webkit-	23.0 15.0 -webkit-

CSS background 属性

标签定义及使用说明

背景缩写属性可以在一个声明中设置所有的背景属性。

可以设置的属性分别是：background-color, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment,和background-image.

如果上述值缺少一个，这不要紧，例如background：＃FF0000 URL（smiley.gif）;是允许的。

默认值:	请参阅单独的属性
继承:	no
版本:	CSS1+ CSS3中的新的属性
JavaScript 语法:	object object.style.background="red url(smiley.gif) top left no-repeat"

语法

background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

值	说明	CSS
background-color	指定要使用的背景颜色	1
background-position	指定背景图像的位置	1
background-size	指定背景图片的大小	3
background-repeat	指定如何重复背景图像	1
background-origin	指定背景图像的定位区域	3
background-clip	指定背景图像的绘画区域	3
background-attachment	设置背景图像是否固定或者随着页面的其余部分滚动。	1
background-image	指定要使用的一个或多个背景图像	1

实例

在一个div元素中设置多个背景图像（并指定他们的位置）：

body{background: #00ff00 url('smiley.gif') no-repeat fixed center; }

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
background	1.0	4.0	1.0	1.0	3.5

所有主要浏览器都支持background属性。

注意IE8和更早版本不支持一个元素多个背景图像。

注意 IE7和更早的版本不支持"继承"的值。 IE8需要定义！DOCTYPE。 IE9支持"继承"。

CSS 教程: CSS Background

CSS3 教程: CSS3 Backgrounds

定义和用法

background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。

默认值:	scroll
继承:	no
版本:	CSS1
JavaScript 语法:	object object.style.backgroundAttachment="fixed"

属性值

值	说明
scroll	背景图片随页面的其余部分滚动。这是默认
fixed	背景图像是固定的
inherit	指定background-attachment的设置应该从父元素继承
local	背景图片随滚动元素滚动

实例

如何指定一个固定的背景图像：

body
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
background-attachment	1.0	4.0	1.0	1.0	3.5

注意： Internet Explorer 8和更早版本的浏览器不支持多个背景图像在一个元素.

CSS 教程: CSS Background

CSS background-blend-mode 属性

实例

混合模式:

尝试一下 »

定义和用法

background-blend-mode 属性定义了背景层的混合模式（图片与颜色）。

默认值:	normal
Inherited:	no
Animatable:	no. 查看 animatable
版本:	CSS3
JavaScript 语法:	object.style.backgroundBlendMode="screen"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

属性
background-blend-mode	35.0	不支持	30.0	7.1	22.0

CSS 语法

background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;

属性值

值	描述	实例
normal	默认值。设置正常的混合模式。	尝试一下 »
multiply	正片叠底模式。	尝试一下 »
screen	滤色模式。	尝试一下 »
overlay	叠加模式。	尝试一下 »
darken	变暗模式。	尝试一下 »
lighten	变亮模式。	尝试一下 »
color-dodge	颜色减淡模式。	尝试一下 »
saturation	饱和度模式。	尝试一下 »
color	颜色模式。	尝试一下 »
luminosity	亮度模式。	尝试一下 »

CSS 教程: CSS 背景

CSS3 background-clip 属性

定义和用法

background-clip属性指定背景绘制区域。

默认值:	border-box
继承:	no
版本:	CSS3
JavaScript 语法:	object object.style.backgroundClip="content-box"

语法

background-clip: border-box|padding-box|content-box;

值	说明
border-box	默认值。背景绘制在边框方框内（剪切成边框方框）。
padding-box	背景绘制在衬距方框内（剪切成衬距方框）。
content-box	背景绘制在内容方框内（剪切成内容方框）。

实例

指定绘图区的背景：

div
{
background-color:yellow;
background-clip:content-box;
}

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
border-image	16.0 4.0 -webkit-	11.0	15.0 3.5 -moz-	6.0 3.1 -webkit-	15.0 11.0 -o-

CSS3 教程: CSS3 Backgrounds

CSS background-color 属性

实例

设置不同元素的背景色：

body
{
background-color:yellow;
}
h1
{
background-color:#00ff00;
}
p
{
background-color:rgb(255,0,255);
}

尝试一下 »

标签定义及使用说明

background-color属性设置一个元素的背景颜色。

元素的背景是元素的总大小，包括填充和边界（但不包括边距）。

默认值:	transparent
继承:	no
版本:	CSS1
JavaScript 语法:	object object.style.backgroundColor="#00FF00"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
background-color	1.0	4.0	1.0	1.0	3.5

所有主要浏览器都支持background-color属性。

注意 IE7和更早的版本不支持"继承"的值。 IE8需要定义！DOCTYPE。 IE9支持"继承"。

提示和注释

提示: 使用背景色和文本颜色，使文本易于阅读。

属性值

值	描述
color	指定背景颜色。在CSS颜色值近可能的寻找一个颜色值的完整列表。
transparent	指定背景颜色应该是透明的。这是默认
inherit	指定背景颜色，应该从父元素继承

在线实例

设置部分文字的背景色
这个例子演示了如何设置部分文字的背景色。

CSS 教程: CSS 背景

CSS background-image 属性

实例

设置body元素的背景图像：

body
{
background-image:url('paper.gif');
background-color:#cccccc;
}

尝试一下 »

标签定义及使用说明

background-image属性设置一个元素的背景图像。

元素的背景是元素的总大小，包括填充和边界（但不包括边距）。

默认情况下，background-image放置在元素的左上角，并重复垂直和水平方向。

默认值:	none
继承:	no
版本:	CSS1
JavaScript 语法:	object object.style.backgroundImage="url(stars.gif)"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

Property
background-image	1.0	4.0	1.0	1.0	3.5

注意 IE8 和更早版本的浏览器不支持多个背景图像在一个元素

注意IE7和更早的版本不支持"继承"的值。 IE8需要定义！DOCTYPE。 IE9支持"继承"。

提示和注释

Tip: 务必设置背景色，如果图像是不可用，将被使用。

属性值

值	说明
url('URL')	图像的URL
none	无图像背景会显示。这是默认
inherit	指定背景图像应该从父元素继承

在线实例

多个背景图片
本实例演示了文档中多个背景图像。

CSS 教程: CSS Background

CSS3 教程: CSS3 Backgrounds

CSS3 background-origin 属性

定义和用法

background-Origin属性指定background-position属性应该是相对位置。

注意如果背景图像background-attachment是"固定"，这个属性没有任何效果。

默认值:	padding-box
继承:	no
版本:	CSS3
JavaScript 语法:	object object.style.backgroundOrigin="content-box"

语法

background-origin: padding-box|border-box|content-box;

值	描述
padding-box	背景图像填充框的相对位置
border-box	背景图像边界框的相对位置
content-box	背景图像的相对位置的内容框

实例

内容框相对定位的背景图片：

div
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-position:left;
background-origin:content-box;
}

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

Property
background-origin	4.0	9.0	4.0	3.0	10.5

CSS3 教程: CSS3 Backgrounds

定义和用法

background-position属性设置背景图像的起始位置。

注意对于这个工作在Firefox和Opera，background-attachment必须设置为 "fixed（固定）"。

默认值:	0% 0%
继承:	no
版本:	CSS1
JavaScript 语法:	object object.style.backgroundPosition="center"

语法

background-position: horizontal vertical

水平是

percentage | length | left | center | right

垂直是

percentage | length | top | center | bottom

属性值

值	描述
left top left center left bottom right top right center right bottom center top center center center bottom	如果仅指定一个关键字，其他值将会是"center"
x% y%	第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。。默认值为：0％0％
xpos ypos	第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px0px）或任何其他 CSS单位。如果仅指定了一个值，其他值将是50％。你可以混合使用％和positions
inherit	指定background-position属性设置应该从父元素继承

实例

如何定位background-image：

body
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}

尝试一下 »

如何设置页面背景图像
这个例子演示了如何在页面上设置background-image。

如何使用％来定位背景图像
这个例子演示了如何使用％设置页面上的图像位置。

如何使用像素来定位背景图像
这个例子演示了如何使用像素设置页面上的图像位置。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
background-position	1.0	4.0	1.0	1.0	3.5

注意: IE8 及更早的浏览器版本不支持一个元素有多个背景图片。

CSS 教程: CSS Background

CSS 参考手册: background-image 属性

CSS background-repeat 属性

实例

只有垂直方向重复background-image：

body
{
background-image:url('paper.gif');
background-repeat:repeat-y;
}

尝试一下 »

标签定义及使用说明

设置如何平铺对象的 background-image 属性。

默认情况下，重复background-image的垂直和水平方向。

默认值:	repeat
继承:	no
版本:	CSS1
JavaScript 语法:	object.style.backgroundRepeat="repeat-y"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

Property
background-repeat	1.0	4.0	1.0	1.0	3.5

IE8以及更早版本的浏览器不支持多个背景图像在一个元素。

注意 IE7和更早的版本不支持"inherit（继承）"的值。 IE8需要定义！DOCTYPE。 IE9支持"inherit（继承）"。

提示和注释

提示: background-position属性设置背景图像位置。如果指定的位置是没有任何背景，图像总是放在元素的左上角。

属性值

值	说明
repeat	背景图像将向垂直和水平方向重复。这是默认
repeat-x	只有水平位置会重复背景图像
repeat-y	只有垂直位置会重复背景图像
no-repeat	background-image不会重复
inherit	指定background-repea属性设置应该从父元素继承

在线实例

如何在垂直和水平方向重复背景图像
这个例子演示了如何在垂直和水平方向重复背景图像。

如何重复背景图像仅水平方向
这个例子演示了如何重复背景图像仅水平方向。

如何显示背景图像只有一次
这个例子演示了如何显示一个背景图片没有重复只有一次。

CSS 教程: CSS Background

CSS 参考手册: background-position属性

实例

指定背景图像的大小：

div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}

尝试一下 »
在此页底部有更多的例子。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

Property
background-size	4.0 1.0 -webkit-	9.0	4.0 3.6 -moz-	4.1 3.0 -webkit-	10.5 10.0 -o-

标签定义及使用说明

background-size属性指定背景图片大小。

默认值:	auto
继承:	no
版本:	CSS3
JavaScript 语法:	object object.style.backgroundSize="60px 80px"

语法

background-size: length|percentage|cover|contain;

值	描述
length	设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
percentage	将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
cover	此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain	此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

在线实例

拉伸背景图像
拉伸背景图像完全覆盖内容面积。

四个背景图像图像横向拉伸
拉伸4个横向背景图片。

CSS3 教程: CSS3 背景

CSS border 属性

实例

设置四个边框样式：

p
{
border:5px solid red;
}

尝试一下 »

标签定义及使用说明

缩写边框属性设置在一个声明中所有的边框属性。

可以设置的属性分别（按顺序）：border-width, border-style,和border-color.

如果上述值缺少一个没有关系，例如border：＃FF0000;是允许的。

默认值:	not specified
继承:	no
版本:	CSS1
JavaScript 语法:	object object.style.border="3px solid blue"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
border	1.0	4.0	1.0	1.0	3.5

属性值

值	说明
border-width	指定边框的宽度
border-style	指定边框的样式
border-color	指定边框的颜色
inherit	指定应该从父元素继承border属性值

CSS 教程: CSS Border

CSS border-bottom 属性

实例

设置底部边框样式：

p
{
border-style:solid;
border-bottom:thick dotted #ff0000;
}

尝试一下 »

标签定义及使用说明

border-bottom缩写属性设置一个声明中所有底部边框属性。

可以设置的属性分别（按顺序）：border-bottom-width, border-bottom-style,和border-bottom-color.

如果上述值缺少一个没有关系，例如border-bottom：＃FF0000;是允许的

默认值:	not specified
继承:	no
版本:	CSS1
JavaScript 语法:	object object.style.borderBottom="3px solid blue"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
border-bottom	1.0	4.0	1.0	1.0	3.5

Property Values

值	描述
border-bottom-width	指定底部边框宽度
border-bottom-style	指定底部边框样式
border-bottom-color	指定底部边框颜色
inherit	指定border-bottom 属性值，应该从父元素继承

CSS 教程: CSS Border

CSS border-bottom-color 属性

实例

设置底部边框颜色：

p
{
border-style:solid;
border-bottom-color:#ff0000;
}

尝试一下 »

标签定义及使用说明

border-bottom-color属性设置元素的底部边框颜色。

注意使用border-bottom颜色属性前，必须先声明border样式属性。元素必须有边框，你才可以改变颜色。

默认值:	not specified
继承:	no
版本:	CSS1
JavaScript 语法:	object object.style.borderBottomColor="blue"

浏览器支持

所有主要浏览器都支持border-bottom-color属性。

注意 Internet Explorer6（和更早版本）不支持"transparent"属性值。

注意 IE7和更早的版本不支持"inherit(继承)"的值。 IE8需要定义！DOCTYPE。 IE9支持"inherit(继承)"。

Property Values

值	描述	测试
color	指定背景颜色。在CSS颜色值查找颜色值的完整列表。
transparent	指定边框的颜色应该是透明的。这是默认
inherit	指定边框的颜色，应该从父元素继承

CSS 教程: CSS Border

CSS 参考手册: border-bottom 属性

CSS 参考手册

实例

向 div 元素的左下角添加圆角边框：

div{border:2px solid;border-bottom-left-radius:2em;}

亲自试一试

浏览器支持

属性
border-radius	9.0	5.0 4.0 -webkit-	4.0 3.0 -moz-	5.0 3.1 -webkit-	10.5

IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-bottom-left-radius 属性。

定义和用法

border-bottom-left-radius 属性定义左下角边框的形状。

提示：该属性允许您向元素添加圆角边框。

默认值：	0
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.borderBottomLeftRadius="5px"

语法

border-bottom-left-radius: length|% [length|%];

值	描述	测试
length	定义左下角的形状。	测试
%	以百分比值定义左下角的形状。	测试

实例

向 div 元素的右下角添加圆角边框：

div{border:2px solid;border-bottom-right-radius:2em;}

运行一下

浏览器支持

属性
border-radius	9.0	5.0 4.0 -webkit-	4.0 3.0 -moz-	5.0 3.1 -webkit-	10.5

IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-bottom-right-radius 属性。

定义和用法

border-bottom-right-radius 属性定义右下角边框的形状。

提示：该属性允许您向元素添加圆角边框。

默认值：	0
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.borderBottomRightRadius="5px"

语法

border-bottom-right-radius: length|% [length|%];

值	描述	测试
length	定义右下角的形状。	测试
%	以百分比值定义右下角的形状。	测试

CSS border-bottom-style 属性

实例

设置底部边框样式：

p
{
border-style:solid;
border-bottom-style:dotted;
}

尝试一下 »

属性定义及使用说明

border-bottom-style属性设置元素底部边框样式。

默认值:	not specified
继承:	no
版本:	CSS1
JavaScript 语法:	object object.style.borderBottomStyle="dotted"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
border-bottom-style	1.0	5.5	1.0	1.0	9.2

属性值

值	说明
none	指定无边框
hidden	与"none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	指定点状边框
dashed	指定虚线边框
solid	指定实线边框
double	指定一个双边框
groove	定义双线。双线的宽度等于 border-width 的值
ridge	定义三维菱形边框。其效果取决于 border-color 的值
inset	定义三维凹边框。其效果取决于 border-color 的值
outset	定义三维凸边框。其效果取决于 border-color 的值
inherit	指定应该从父元素继承边框样式

CSS 教程: CSS Border

CSS 参考手册: border-bottom 属性

CSS border-bottom-width 属性

实例

设置底部边框宽度：

p
{
border-style:solid;
border-bottom-width:15px;
}

尝试一下 »

属性定义及使用说明

border-bottom-width属性设置元素的底部边框宽度。

注意务必先声明border-style属性才可以设置border-bottom-width属性。元素必须有边框，你才可以改变宽度。

默认值:	medium
继承:	no
版本:	CSS1
JavaScript 语法:	object object.style.borderBottomWidth="thick"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
border-bottom-width	1.0	4.0	1.0	1.0	3.5

Property Values

值	说明
thin	定义细的下边框
medium	默认值。定义中等的下边框
thick	定义粗的下边框
length	允许您自定义下边框的宽度
inherit	规定应该从父元素继承边框宽度

CSS 教程: CSS Border

CSS 参考手册: border-bottom property

CSS border-collapse 属性

属性定义及使用说明

border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。

默认值:	separate
继承:	yes
版本:	CSS2
JavaScript 语法:	object object.style.borderCollapse="collapse"

实例

为表格设置合并边框模型：

table{border-collapse:collapse;}

尝试一下 »

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

所有主要浏览器都支持border - collapse属性。

注意： 任何版本的Internet Explorer（包括IE9）支持属性值"inherit"。

注意: border - collapse属性,如果没有指定!DOCTYPE，可能产生意想不到的效果。

有可能的值

值	说明
collapse	如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性
separate	默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性
inherit	规定应该从父元素继承 border-collapse 属性的值

CSS 教程: CSS Table

CSS border-color 属性

实例

设置四个边框颜色：

p
{
border-style:solid;
border-color:#ff0000 #0000ff;
}

尝试一下 »

属性定义及使用说明

border-color属性属性设置四条边框的颜色,此属性可设置 1 到 4 种颜色。

border-color 属性是一个简写属性，可设置一个元素的所有边框中可见部分的颜色，或者为 4 个边分别设置不同的颜色。请看下面的例子：

实例:

border-color:红，绿，蓝,粉红色;

上边框是红色
右边框是绿色
底部边框是蓝
左边框是粉红色

border-color：红，绿，蓝;

上边框是红色
左，右边框是绿色
底部边框是蓝

border-color：红，绿;

顶部和底部边框是红色
左右边框是绿色

border-color：红色;

所有四个边框是红色

注意：请始终把 border-style 属性声明到 border-color 属性之前。元素必须在您改变其颜色之前获得边框。

默认值:	not specified
继承:	no
版本:	CSS1
JavaScript 语法:	object object.style.borderColor="#FF0000 blue"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
border-color	1.0	4.0	1.0	1.0	3.5

属性值

值	说明
color	指定背景颜色。在CSS颜色值查找颜色值的完整列表
transparent	指定边框的颜色应该是透明的。这是默认
inherit	指定边框的颜色，应该从父元素继承

CSS 教程: CSS Border

CSS 参考手册

实例

将图片规定为包围 div 元素的边框：

div{-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */-o-border-image:url(border.png) 30 30 round; /* Opera */border-image:url(border.png) 30 30 round;}

页面底部有更多实例。

浏览器支持

属性
border-image	16.0 4.0 -webkit-	11.0	15.0 3.5 -moz-	6.0 3.1 -webkit-	15.0 11.0 -o-

Internet Explorer 11, Firefox, Opera 15, Chrome 以及 Safari 6 支持 border-image 属性。

Safari 5 支持替代的 -webkit-border-image 属性。

定义和用法

border-image 属性是一个简写属性，用于设置以下属性：

border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat

如果省略值，会设置其默认值。

提示：请使用 border-image-* 属性来构造漂亮的可伸缩按钮！

默认值：	none 100% 1 0 stretch
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.borderImage="url(border.png) 30 30 round"

可能的值

值	描述	测试
border-image-source	用在边框的图片的路径。
border-image-slice	图片边框向内偏移。
border-image-width	图片边框的宽度。
border-image-outset	边框图像区域超出边框的量。
border-image-repeat	图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。	测试

亲自试一试 - 实例

Border-image 按钮: 本例演示如何通过 border-image 属性来创建按钮。

实例

设置 border-image-outset 属性：

div{border-image-source: url(border.png);border-image-outset: 30 30;}

浏览器支持

属性
border-image-outset	15.0	11.0	15.0	6.0	15.0

Opera 不支持 border-image-outset 属性。

Internet Explorer 10 以及更早的版本不支持 border-image-outset 属性。

Safari 5 以及更早的版本不支持 border-image-outset 属性。

请参阅 border-image 属性。

定义和用法

border-image-outset 属性规定边框图像超过边框盒的量。

默认值：	0
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.borderImageOutset="30 30"

可能的值

border-image-outset: length|number;

值	描述
length
number	代表对应的 border-width 的倍数。

实例

规定如何重复图像边框：

div{border-image-source: url(border.png);border-image-repeat: round;}

浏览器支持

属性
border-image-repeat	15.0	11.0	15.0	6.0	15.0

Opera 不支持 border-image-repeat 属性。

Internet Explorer 10 以及更早的版本不支持 border-image-repeat 属性。

Safari 5 以及更早的版本不支持 border-image-repeat 属性。

请参阅 border-image 属性。

定义和用法

border-image-repeat 属性规定图像边框是否应该被重复（repeated）、拉伸（stretched）或铺满（rounded）。

默认值：	stretch
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.borderImageRepeat="round"

可能的值

border-image-repeat: stretch|repeat|round;

注释：该属性规定如何延展和铺排边框图像的边缘和中间部分。因此，您可以规定两个值。如果省略第二个值，则采取与第一个值相同的值。

值	描述
stretch	拉伸图像来填充区域
repeat	平铺（重复）图像来填充区域。
round	类似 repeat 值。如果无法完整平铺所有图像，则对图像进行缩放以适应区域。

实例

使用一幅图像作为围绕 div 元素的边框：

div{  border-image-source: url(border.png);}

浏览器支持

属性
border-image-source	15.0	11.0	15.0	6.0	15.0

Opera 不支持 border-image-source 属性。

Internet Explorer 10 以及更早的版本不支持 border-image-source 属性。

Safari 5 以及更早的版本不支持 border-image-source 属性。

请参阅 border-image 属性。

定义和用法

border-image-source 属性规定要使用的图像，代替 border-style 属性中设置的边框样式。

提示：如果值为 "none"，或者如果图像无法显示，则使用边框样式。

默认值：	none
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.borderImageSource="url(border.png)"

语法

border-image-source: none|image;

值	描述
none	不使用图像。
image	用作边框的图像的路径。

定义和用法

border-image-width 属性规定图像边框的宽度。

默认值：	none
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.borderImageWidth="30 30"

语法

border-image-width: number|%|auto;

值	描述
number	代表对应的 border-width 的倍数。
%	参考边框图像区域的尺寸：区域的高度影响水平偏移，宽度影响垂直偏移。
auto	如果规定该属性，则宽度为对应的图像切片的固有宽度。

实例

规定图像边框的宽度：

div{border-image-source: url(border.png);border-image-width: 30 30;}

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
border-image-width	15.0	11.0	13.0	6.0	15.0

Opera 不支持 border-image-width 属性。

Internet Explorer 10 以及更早的版本不支持 border-image-width 属性。

Safari 5 以及更早的版本不支持 border-image-width 属性。

请参阅 border-image 属性。

CSS border-left 属性

实例

设置左边框的样式：

p
{
border-style:solid;
border-left:thick double #ff0000;
}

尝试一下 »

属性定义及使用说明

border-left 简写属性把左边框的所有属性设置到一个声明中。

可以按顺序设置如下属性： border-left-width, border-left-style, and border-left-color.

如果不设置其中的某个值，也不会出问题，比如 border-left:solid #ff0000; 也是允许的。

默认值：	not specified
继承性：	no
版本：	CSS1
JavaScript 语法：	object.style.borderLeft="3px solid blue"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
border-left	1.0	4.0	1.0	3.5	1.0

Property Values

值	描述
border-left-width	规定左边框的宽度。参阅：border-left-width 中可能的值。
border-left-style	规定左边框的样式。参阅：border-left-style 中可能的值。
border-left-color	规定左边框的颜色。参阅：border-left-color 中可能的值。
inherit	规定应该从父元素继承 border-left 属性的设置。

CSS 教程: CSS Border

CSS border-left-color 属性

实例

设置左边框颜色：

p
{
border-style:solid;
border-left-color:#ff0000
}

尝试一下 »

属性定义及使用说明

border-left-color属性设置一个元素的左边框颜色。

注意请始终把border-style属性声明到border-color属性之前。元素必须在您改变其颜色之前获得边框。

默认值:	not specified
继承:	no
版本:	CSS1
JavaScript 语法:	object object.style.borderLeftColor="blue"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
border-left-color	1.0	4.0	1.0	3.5	1.0

Property Values

值	说明
color	指定左边框颜色。在CSS颜色值查找颜色值的完整列表。
transparent	指定边框的颜色应该是透明的。这是默认
inherit	指定边框的颜色，应该从父元素继承

CSS 教程: CSS Border

CSS 参考手册: border-left 属性

CSS border-left-style 属性

实例

Set the style of the left border:

p
{
border-style:solid;
border-left-style:dotted;
}

尝试一下 »

属性定义及使用说明

border-left-style 设置元素左边框的样式。

默认值：	not specified
继承性：	no
版本：	CSS1
JavaScript 语法：	object.style.borderLeftStyle="dotted"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
border-left-style	1.0	5.5	1.0	1.0	9.2

属性值

值	描述
none	定义无边框。
hidden	与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值。
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
inset	定义 3D inset 边框。其效果取决于 border-color 的值。
outset	定义 3D outset 边框。其效果取决于 border-color 的值。
inherit	规定应该从父元素继承边框样式。

CSS 教程: CSS Border

CSS 参考手册: border-left 属性

CSS border-left-width 属性

实例

设置左边框的宽度：

p
{
border-style:solid;
border-left-width:15px;
}

尝试一下 »

属性定义及使用说明

border-left-width 属性设置元素的左边框的宽度。

只有当边框样式不是 none 时才起作用。如果边框样式是 none，边框宽度实际上会重置为 0。不允许指定负长度值。

注意:请始终在 border-left-width 属性之前声明 border-style 属性。元素只有在获得边框之后，才能改变其边框的宽度。

默认值：	medium
继承性：	no
版本：	CSS1
JavaScript 语法：	object.style.borderLeftWidth="thick"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
border-left-width	1.0	4.0	1.0	1.0	3.5

属性值

值	描述
thin	定义细的左边框。
medium	默认值。定义中等的左边框。
thick	定义粗的左边框。
length	允许您自定义左边框的宽度。
inherit	规定应该从父元素继承边框宽度。

CSS 教程: CSS Border

CSS 参考手册: border-left 属性

CSS 参考手册

实例

规定图像边框的向内偏移：

div{border-image-source: url(border.png);border-image-slice: 50% 50%;}

浏览器支持

属性
border-image-slice	15.0	11.0	15.0	6.0	15.0

Opera 不支持 border-image-slice 属性。

Internet Explorer 10 以及更早的版本不支持 border-image-slice 属性。

Safari 5 以及更早的版本不支持 border-image-slice 属性。

请参阅 border-image 属性。

定义和用法

border-image-slice 属性规定图像边框的向内偏移。

默认值：	100%
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.borderImageSlice="50% 50%"

语法

border-image-slice: number|%|fill;

值	描述
number	数字值，代表图像中像素（如果是光栅图像）或矢量坐标（如果是矢量图像）。
%	相对于图像尺寸的百分比值：图像的宽度影响水平偏移，高度影响垂直偏移。
fill	保留边框图像的中间部分。

实例

向 div 元素添加圆角边框：

div{border:2px solid;border-radius:25px;}

亲自试一试

页面底部有更多实例。

浏览器支持

属性
border-radius	4.0 -webkit-	9.0	4.0 -moz-	5.0 -webkit-	10.5 -o-

IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-radius 属性。

定义和用法

border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。

提示：该属性允许您为元素添加圆角边框！

默认值：	0
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.borderRadius="5px"

语法

border-radius: 1-4 length|% / 1-4 length|%;

值	描述	测试
length	定义圆角的形状。	测试
%	以百分比定义圆角的形状。	测试

例子 1

border-radius:2em;

等价于：

border-top-left-radius:2em;border-top-right-radius:2em;border-bottom-right-radius:2em;border-bottom-left-radius:2em;

例子 2

border-radius: 2em 1em 4em / 0.5em 3em;

等价于：

border-top-left-radius: 2em 0.5em;border-top-right-radius: 1em 3em;border-bottom-right-radius: 4em 0.5em;border-bottom-left-radius: 1em 3em;

CSS border-right 属性

实例

设置右边框的样式：

p
{
border-style:solid;
border-right:thick double #ff0000;
}

尝试一下 »

属性定义及使用说明

border-right 简写属性把左边框的所有属性设置到一个声明中。

可以设置的属性是（按顺序）：border-right-width, border-right-style, and border-right-color.

如果上述值缺少一个，没有关系，例如border-right:solid #ff0000; 是允许的。

默认值:	not specified
继承:	no
版本:	CSS1
JavaScript 语法:	object object.style.borderRight="3px solid blue"

浏览器支持

所有主要浏览器都支持border-right属性。

注意IE7和更早的版本不支持"继承"的值。 IE8需要定义！DOCTYPE。 IE9支持"继承"。

Property Values

值	说明
border-right-width	指定右边框的宽度
border-right-style	指定右边框的样式
border-right-color	指定右边框的颜色
inherit	指定了border-right属性的值，应该从父元素继承

CSS 教程: CSS Border

CSS border-right-color 属性

实例

设定右边框的颜色：

p
{
border-style:solid;
border-right-color:#ff0000
}

尝试一下 »

属性定义及使用说明

border-right-color属性设置一个元素的的右边框的颜色。

注意请始终把 border-style 属性声明到 border-color 属性之前。元素必须在您改变其颜色之前获得边框。

默认值:	not specified
继承:	no
版本:	CSS1
JavaScript 语法:	object object.style.borderRightColor="blue"

浏览器支持

所有主要浏览器都支持border-right-color属性。

注意： Internet Explorer6（和更早版本）不支持"transparent"属性值。

注意：任何版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

Property Values

值	描述
color_name	规定颜色值为颜色名称的边框颜色（比如 red）。
hex_number	规定颜色值为十六进制值的边框颜色（比如 #ff0000）。
rgb_number	规定颜色值为 rgb 代码的边框颜色（比如 rgb(255,0,0)）。
transparent	默认值。边框颜色为透明。
inherit	规定应该从父元素继承边框颜色。

CSS 教程: CSS Border

CSS 参考手册: border-right 属性

CSS border-right-style 属性

实例

设定右边框的样式：

p
{
border-style:solid;
border-right-style:dotted;
}

尝试一下 »

属性定义及使用说明

border-right-style属性设置元素右边框的样式。

默认值:	not specified
继承:	no
版本:	CSS1
JavaScript 语法:	object object.style.borderRightStyle="dotted"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
border-right-style	1.0	4.0	1.0	1.0	3.5

Property Values

值	描述
none	定义无边框。
hidden	与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值。
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
inset	定义 3D inset 边框。其效果取决于 border-color 的值。
outset	定义 3D outset 边框。其效果取决于 border-color 的值。
inherit	规定应该从父元素继承边框样式。

CSS 教程: CSS Border

CSS 参考手册: border-right 属性

CSS border-right-width 属性

实例

设置右边框的宽度：

p
{
border-style:solid;
border-right-width:15px;
}

尝试一下 »

属性定义及使用说明

border-right-width属性设置一个元素右边框的宽度。

注意请始终在 border-right-width 属性之前声明 border-style 属性。元素只有在获得边框之后，才能改变其边框的宽度。

默认值：	medium
继承性：	no
版本：	CSS1
JavaScript 语法：	object.style.borderRightWidth="thick"

浏览器支持

所有浏览器都支持 border-right-width 属性。

注意：IE7和更早的版本不支持"继承"的值。 IE8需要定义！DOCTYPE。 IE9支持"继承"。

Property Values

值	描述
thin	定义细的右边框。
medium	默认值。定义中等的右边框。
thick	定义粗的右边框。
length	允许您自定义右边框的宽度。
inherit	规定应该从父元素继承边框宽度。

CSS 教程: CSS Border

CSS 参考手册: border-right 属性

CSS 参考手册

实例

为表格设置 border-spacing：

table  {  border-collapse:separate;  border-spacing:10px 50px;  }

亲自试一试

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

所有主流浏览器都支持 border-spacing 属性。

注释：如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 border-spacing 属性。

定义和用法

border-spacing 属性设置相邻单元格的边框间的距离（仅用于“边框分离”模式）。

注释：某些版本的IE浏览器不支持此属性。

说明

默认值：	not specified
继承性：	yes
版本：	CSS2
JavaScript 语法：	object.style.borderSpacing="15px"

可能的值

值

描述

length length

规定相邻单元的边框之间的距离。使用 px、cm 等单位。不允许使用负值。

如果定义一个 length 参数，那么定义的是水平和垂直间距。

如果定义两个 length 参数，那么第一个设置水平间距，而第二个设置垂直间距。

inherit

规定应该从父元素继承 border-spacing 属性的值。

TIY 实例

设置表格边框之间的空白: 本例演示如何设置单元格边框之间的距离。

CSS border-style 属性

实例

设置四个边框的样式：

p
{
border-style:solid;
}

尝试一下 »

More examples at the bottom of this page.

属性定义及使用说明

border-style属性设置一个元素的四个边框的样式。此属性可以有一到四个值。

实例:

border-style:dotted solid double dashed;

上边框是点状
右边框是实线
下边框是双线
左边框是虚线

border-style:dotted solid double;

上边框是点状
右边框和左边框是实线
下边框是双线

border-style:dotted solid;

上边框和下边框是点状
右边框和左边框是实线

border-style:dotted;

所有4个边框都是点状

默认值:	not specified
继承:	no
版本:	CSS1
JavaScript 语法:	object object.style.borderStyle="dotted double"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
border-style	1.0	4.0	1.0	1.0	3.5

属性值

值	描述
none	定义无边框。
hidden	与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值。
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
inset	定义 3D inset 边框。其效果取决于 border-color 的值。
outset	定义 3D outset 边框。其效果取决于 border-color 的值。
inherit	规定应该从父元素继承边框样式。

在线实例

每边设置不同的边框
本例演示如何在元素的各边设置不同的边框。

CSS 教程: CSS Border

CSS border-top 属性

实例

设置上边框的样式：

p
{
border-style:solid;
border-top:thick double #ff0000;
}

尝试一下 »

属性定义及使用说明

border-top 简写属性把上边框的所有属性设置到一个声明中

可以按顺序设置如下属性： border-top-width, border-top-style, and border-top-color.

如果不设置其中的某个值，也不会出问题，比如 border-top:solid #ff0000; 也是允许的。

默认值：	not specified
继承性：	no
版本：	CSS1
JavaScript 语法：	object.style.borderTop="3px solid blue"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
border-top	1.0	4.0	1.0	1.0	3.5

属性值

值	描述
border-top-width	规定上边框的宽度。参阅：border-top-width 中可能的值。
border-top-style	规定上边框的样式。参阅：border-top-style 中可能的值。
border-top-color	规定上边框的颜色。参阅：border-top-color 中可能的值。
inherit	规定应该从父元素继承 border-top 属性的设置。

CSS 教程: CSS Border

CSS border-top-color 属性

实例

Set the color of the top border:

p
{
border-style:solid;
border-top-color:#ff0000
}

尝试一下 »

属性定义及使用说明

border-top-color 设置元素的上边框的颜色。

注意：请始终把border-style属性声明到border-top-color属性之前。元素必须在您改变其颜色之前获得边框。

默认值：	not specified
继承性：	no
版本：	CSS1
JavaScript 语法：	object.style.borderTopColor="blue"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
border-top-color	1.0	4.0	1.0	1.0	3.5

Property Values

值	描述
color_name	规定颜色值为颜色名称的边框颜色（比如 red）。
hex_number	规定颜色值为十六进制值的边框颜色（比如 #ff0000）。
rgb_number	规定颜色值为 rgb 代码的边框颜色（比如 rgb(255,0,0)）。
transparent	默认值。边框颜色为透明。
inherit	规定应该从父元素继承边框颜色。

CSS 教程: CSS Border

CSS 参考手册: border-top 属性

CSS3 border-top-left-radius 属性

实例

为div元素的左上角添加一个圆角边框：

div
{
border:2px solid;
border-top-left-radius:2em;
}

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
border-radius	9.0	5.0 4.0 -webkit-	4.0 3.0 -moz-	5.0 3.1 -webkit-	10.5

属性定义及使用说明

border-top-left-radius属性定义了左上角的边框形状。

提示: 这个属性允许你为元素添加圆角边框！

默认值:	0
继承:	no
版本:	CSS3
JavaScript 语法:	object object.style.borderTopLeftRadius="5px"

语法

border-top-left-radius: length|% [length|%];

值	描述
length	定义左上角的形状。
%	使用%定义左上角的形状。

CSS3 教程: CSS3 Borders

CSS3 border-top-right-radius 属性

实例

为div元素的右上角添加一个圆角边框：

div
{
border:2px solid;
border-top-right-radius:2em;
}

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
border-radius	9.0	5.0 4.0 -webkit-	4.0 3.0 -moz-	5.0 3.1 -webkit-	10.5

属性定义及使用说明

border-top-right-radius属性定义了右上角的边框形状。

提示: 这个属性允许你为元素添加圆角边框！

默认值:	0
继承:	no
版本:	CSS3
JavaScript 语法:	object object.style.borderTopRightRadius="5px"

语法

border-top-right-radius: length|% [length|%];

值	描述
length	定义右上角的形状。
%	使用%定义右上角的形状。

CSS3教程: CSS3 Borders

CSS border-top-style 属性

实例

设置顶部边框样式：

p
{
border-style:solid;
border-top-style:dotted;
}

尝试一下 »

属性定义及使用说明

border-top-style属性设置一个元素的顶部边框样式。

默认值：	not specified
继承性：	no
版本：	CSS1
JavaScript 语法：	object.style.borderTopStyle="dotted"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
border-top-style	1.0	5.5	1.0	1.0	9.2

属性值

值	描述
none	定义无边框。
hidden	与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值。
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
inset	定义 3D inset 边框。其效果取决于 border-color 的值。
outset	定义 3D outset 边框。其效果取决于 border-color 的值。
inherit	规定应该从父元素继承边框样式。

CSS 教程: CSS Border

CSS 参考手册: border-top 属性

CSS border-top-width 属性

实例

设置顶部边框的宽度：

p
{
border-style:solid;
border-top-width:15px;
}

尝试一下 »

属性定义及使用说明

border-top-width属性设置一个元素的顶部边框的宽度。

注意:请始终在 border-top-width 属性之前声明 border-style 属性。元素只有在获得边框之后，才能改变其边框的宽度。

默认值:	medium
继承:	no
版本:	CSS1
JavaScript 语法:	object object.style.borderTopWidth="thick"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
border-top-width	1.0	4.0	1.0	1.0	3.5

属性值

值	描述
thin	定义细的上边框。
medium	默认值。定义中等的上边框。
thick	定义粗的上边框。
length	允许您自定义上边框的宽度。
inherit	规定应该从父元素继承边框宽度。

CSS 教程: CSS Border

CSS 参考手册: border-top 属性

CSS border-width 属性

实例

设置四个边框的宽度：

p
{
border-style:solid;
border-width:15px;
}

尝试一下 »

属性定义及使用说明

border-width属性设置一个元素的四个边框的宽度。此属性可以有一到四个值。

实例:

border-width:thin medium thick 10px;

上边框是细边框
右边框是中等边框
下边框是粗边框
左边框是 10px 宽的边框

border-width:thin medium thick;

上边框是细边框
右边框和左边框是中等边框
下边框是粗边框

border-width:thin medium;

上边框和下边框是细边框
右边框和左边框是中等边框

border-width:thin;

所有4个边框都是细边框

默认值：	medium
继承性：	no
版本：	CSS1
JavaScript 语法：	object.style.borderWidth="thin thick"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
border-width	1.0	4.0	1.0	1.0	3.5

属性值

值	描述
thin	定义细的边框。
medium	默认。定义中等的边框。
thick	定义粗的边框。
length	允许您自定义边框的宽度。
inherit	规定应该从父元素继承边框宽度。

CSS 教程: CSS Border

CSS bottom 属性

实例

设置图像的底部边缘，在元素的底边上面0px与5px：

img.ex1

{

position:absolute;

bottom:0px;

}

img.ex2

{

position:relative;

bottom:-100px;

}

尝试一下 »

属性定义及使用说明

对于绝对定位元素，bottom属性设置单位高于/低于包含它的元素的底边。

对于相对定位元素，bottom属性设置单位高于/低于其正常位置的元素的底边。

注意：如果"position：static"，底部的属性没有任何效果。

默认值：	auto
继承性：	no
版本：	CSS2
JavaScript 语法：	object.style.bottom="50px"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
bottom	1.0	5.0	1.0	1.0	6.0

属性值

值	描述
auto	默认值。通过浏览器计算底部的位置。
%	设置以包含元素的百分比计的底边位置。可使用负值。
length	使用 px、cm 等单位设置元素的底边位置。可使用负值。
inherit	规定应该从父元素继承 bottom 属性的值。

CSS 教程: CSS Positioning

CSS 参考手册

实例

通过使用 box-align and box-pack 属性，居中 div 框的子元素：

div{width:350px;height:100px;border:1px solid black;/* Firefox */display:-moz-box;-moz-box-pack:center;-moz-box-align:center;/* Safari、Opera 以及 Chrome */display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;/* W3C */display:box;box-pack:center;box-align:center;}

亲自试一试

页面底部有更多实例。

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

目前没有浏览器支持 box-align 属性。

Firefox 支持替代的 -moz-box-align 属性。

Safari、Opera 以及 Chrome 支持替代的 -webkit-box-align 属性。

定义和用法

box-align 属性规定如何对齐框的子元素。

默认值：	stretch
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.boxAlign="center"

语法

box-align: start|end|center|baseline|stretch;

值	描述	测试
start	对于正常方向的框，每个子元素的上边缘沿着框的顶边放置。对于反方向的框，每个子元素的下边缘沿着框的底边放置。	测试
end	对于正常方向的框，每个子元素的下边缘沿着框的底边放置。对于反方向的框，每个子元素的上边缘沿着框的顶边放置。	测试
center	均等地分割多余的空间，一半位于子元素之上，另一半位于子元素之下。	测试
baseline	如果 box-orient 是inline-axis或horizontal，所有子元素均与其基线对齐。	测试
stretch	拉伸子元素以填充包含块

亲自试一试 - 实例

改变元素的 box-align 值: 该例演示如何使用 JavaScript 来改变元素的 box-align 值。

CSS 参考手册

实例

以反方向显示 div 框的子元素：

div{width:350px;height:100px;border:1px solid black;/* Firefox */display:-moz-box;-moz-box-direction:reverse;/* Safari、Opera 以及 Chrome */display:-webkit-box;-webkit-box-direction:reverse;/* W3C */display:box;box-direction:reverse;}

亲自试一试

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

目前没有浏览器支持 box-direction 属性。

Firefox 支持替代的 -moz-box-direction 属性。

Safari、Opera 以及 Chrome 支持替代的 -webkit-box-direction 属性。

定义和用法

box-direction 属性规定框元素的子元素以什么方向来排列。

默认值：	normal
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.boxDirection="reverse"

语法

box-direction: normal|reverse|inherit;

值	描述	测试
normal	以默认方向显示子元素。	测试
reverse	以反方向显示子元素。	测试
inherit	应该从子元素继承 box-direction 属性的值

CSS 参考手册

实例

定义两个可伸缩的 p 元素。如果父元素的总宽度是 300 像素，则 #p1 的宽度是 100 像素，而 #p2 的宽度是 200 像素：

#p1{-moz-box-flex:1.0; /* Firefox */-webkit-box-flex:1.0; /* Safari 和 Chrome */box-flex:1.0;border:1px solid red;}#p2{-moz-box-flex:2.0; /* Firefox */-webkit-box-flex:2.0; /* Safari 和 Chrome */box-flex:2.0;border:1px solid blue;}

亲自试一试

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

目前没有浏览器支持 box-flex 属性。

Firefox 支持替代的 -moz-box-flex 属性。

Safari、Opera 以及 Chrome 支持替代的 -webkit-box-flex 属性。

定义和用法

box-flex 属性规定框的子元素是否可伸缩其尺寸。

提示：可伸缩元素能够随着框的缩小或扩大而缩写或放大。只要框中有多余的空间，可伸缩元素就会扩展来填充这些空间。

默认值：	0.0（指示该元素不可伸缩）
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.boxFlex=2.0

语法

box-flex: value;

值	描述
value	元素的可伸缩行。柔性是相对的，例如 box-flex 为 2 的子元素两倍于 box-flex 为 1 的子元素。

CSS 参考手册

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

目前没有浏览器支持 box-flex-group 属性。

定义和用法

box-flex-group 属性用于向柔性分组分配可伸缩元素。

提示：可伸缩元素能够随着框的缩小和扩大而伸缩。

默认值：	1
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.boxFlexGroup=2

语法

box-flex-group: integer;

值	描述
integer	一个整数。（第一个柔性分组是 1，后面的柔性分组是更大的值）。

CSS 参考手册

实例

规定允许 div 扩展为多行：

div{display:box;box-orient:horizontal;box-lines:multiple;width:200px;}

亲自试一试

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

目前没有浏览器支持 box-lines 属性。

定义和用法

box-lines 属性规定如果列超出了父框中的空间，是否要换行显示。

提示：默认地，水平框会在单独的行中排列其子元素，而垂直框会在单独的列中排列其子元素。

默认值：	single
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.boxLines="multiple"

语法

box-lines: single|multiple;

值	描述
single	所有子元素会被放置在单独的行或列中。（无法匹配的元素会被视为溢出）。
multiple	允许框扩展为多行，以容纳其所有子元素。

CSS 参考手册

实例

规定框中子元素的显示次序：

.box{display:-moz-box; /* Firefox */display:-webkit-box; /* Safari 和 Chrome */display:box;border:1px solid black;}.ord1{margin:5px;-moz-box-ordinal-group:1; /* Firefox */-webkit-box-ordinal-group:1; /* Safari 和 Chrome */box-ordinal-group:1;}.ord2{margin:5px;-moz-box-ordinal-group:2; /* Firefox */-webkit-box-ordinal-group:2; /* Safari 和 Chrome */box-ordinal-group:2;}

亲自试一试

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

目前没有浏览器支持 box-ordinal-group 属性。

Firefox 支持替代的 -moz-box-ordinal-group 属性。

Safari 和 Chrome 支持替代的 -webkit-box-ordinal-group 属性。

定义和用法

box-ordinal-group 属性规定框中子元素的显示次序。

值更低的元素会显示在值更高的元素前面显示。

注释：分组值相同的元素，它们的显示次序取决于其源次序。

默认值：	1
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.boxOrdinalGroup=2

语法

box-ordinal-group: integer;

值	描述	测试
integer	一个整数，指示子元素的显示次序。	测试

CSS 参考手册

CSS3 box-orient 属性

实例

指定div元素的子元素横向排列：

尝试一下 »

浏览器支持

目前所有主流浏览器都不支持box-orient属性。

Firefox通过私有属性- MOZ-box-orient支持。

Safari, Opera, 和 Chrome通过私有属性 -webkit-box-orient 支持.

属性定义及使用说明

box-orient 属性指定一个box子元素是否应按水平或垂直排列。

Tip: 水平方向的box里的子元素是由左到右显示，垂直方向的box显示从上到下排列。然而，box-direction方向可由 box-ordinal-group属性改变这个顺序。

默认值:	inline-axis
继承:	no
版本:	CSS3
JavaScript 语法:	object.style.boxOrient="vertical"

语法

box-orient: horizontal|vertical|inline-axis|block-axis|inherit;

值	说明
horizontal	指定子元素在一个水平线上从左至右排列
vertical	从顶部向底部垂直布置子元素
inline-axis	子元素沿着内联坐标轴（映射到横向）
block-axis	子元素沿着块坐标轴（映射到垂直）
inherit	box-orient 属性的值应该从父元素继承

CSS3 box-pack 属性

实例

对div中的子元素同时使用box-align和box-pack的居中属性：

尝试一下 »

浏览器支持

目前主流浏览器都不支持box-pack属性。

Internet Explorer 10 使用 -ms-flex-pack property 属性来代替支持。

Firefox通过私有属性- MOZ-box-pack支持。

Safari, Opera, 和 Chrome 通过私有属性 -webkit-box-pack 支持.

注意： Internet Explorer 9及更早IE版本不支持弹性框.

属性定义及使用说明

box-pack属性指定一个box的子元素时，被置于该框的子元素小于该框。

此属性指定横向框的水平位置，垂直位置的垂直框。

默认值:	start
继承:	no
版本:	CSS3
JavaScript 语法:	object.style.boxPack="center"

语法

box-pack: start|end|center|justify;

值	说明
start	对于普通方向的boxes，左边缘的第一个子元素被放置在左侧（所有额外的空间放置后的最后一个子元素）。对于反向boxes，右边缘最后一个子元素放置在右侧（所有额外的空间放置前的第一个子元素）
end	对于正常的方向的boxes，最后一个子元素的右边缘放置在右侧（所有额外的空间放置前的第一个子元素）。对于反向boxes，第一个孩子的左边缘放置在左侧（所有额外的空间放置后的最后一个子元素）
center	额外的空间划分均匀的两半，前一半放置第一个子元素，另一半放置最后一个子元素
justify	额外的空间平均分配给每个子元素

CSS 参考手册

实例

向 div 元素添加 box-shadow：

div{box-shadow: 10px 10px 5px #888888;}

亲自试一试

页面底部有更多实例。

浏览器支持

属性
border-image	10.0 -webkit-	9.0.0	4.0 (2.0)[3] 3.5(1.9.1) -moz	5.1[1] 3.0 -webkit	10.5[1] -o-

IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。

定义和用法

box-shadow 属性向框添加一个或多个阴影。

提示：请使用 border-image-* 属性来构造漂亮的可伸缩按钮！

默认值：	none
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.boxShadow="10px 10px 5px #888888"

语法

box-shadow: h-shadow v-shadow blur spread color inset;

值	描述	测试
h-shadow	必需。水平阴影的位置。允许负值。	测试
v-shadow	必需。垂直阴影的位置。允许负值。	测试
blur	可选。模糊距离。	测试
spread	可选。阴影的尺寸。	测试
color	可选。阴影的颜色。请参阅 CSS 颜色值。	测试
inset	可选。将外部阴影 (outset) 改为内部阴影。	测试

亲自试一试 - 实例

扔到桌子上面的图片: 本例演示如何创建“Ballade”图片，并旋转图片。

实例

规定两个并排的带边框的框：

div{box-sizing:border-box;-moz-box-sizing:border-box; /* Firefox */-webkit-box-sizing:border-box; /* Safari */width:50%;float:left;}

亲自试一试

页面底部有更多实例。

浏览器支持

属性
box-sizing	10.0 4.0 -webkit-	8.0	29.0 2.0 -moz-	5.1 3.2 -webkit-	9.5

Internet Explorer、Opera 以及 Chrome 支持 box-sizing 属性。

Firefox 支持替代的 -moz-box-sizing 属性。

定义和用法

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

默认值：	content-box
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.boxSizing="border-box"

语法

box-sizing: content-box|border-box|inherit;

值

描述

content-box

这是由 CSS2.1 规定的宽度高度行为。

宽度和高度分别应用到元素的内容框。

在宽度和高度之外绘制元素的内边距和边框。

border-box

为元素设定的宽度和高度决定了元素的边框盒。

就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

inherit

规定应从父元素继承 box-sizing 属性的值。

CSS caption-side 属性

实例

指定表格标题的位置：

caption
{
caption-side:bottom;
}

尝试一下 »

属性定义及使用说明

Tcaption-side 属性设置表格标题的位置。

默认值：	top
继承性：	yes
版本：	CSS2
JavaScript 语法：	object.style.captionSide="bottom"

浏览器支持

所有主流浏览器都支持caption-side属性。

注意：IE8只有指定!DOCTYPE才支持caption-side属性。

属性值

值	描述
top	默认值。把表格标题定位在表格之上。
bottom	把表格标题定位在表格之下。
inherit	规定应该从父元素继承 caption-side 属性的值。

CSS 教程: CSS Table

CSS clear 属性

实例

指定段落的左侧或右侧不允许浮动的元素：

img
{
float:left;
}
p.clear
{
clear:both;
}

尝试一下 »
本页底部查看更多实例。

属性定义及使用说明

clear属性指定段落的左侧或右侧不允许浮动的元素。

默认值：	none
继承性：	no
版本：	CSS1
JavaScript 语法：	object.style.clear="left"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
clear	1.0	5.0	1.0	1.0	6.0

属性值

值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值。

CSS 教程: CSS Float

CSS clip 属性

实例

裁剪一张图像：

img
{
position:absolute;
clip:rect(0px,60px,200px,0px);
}

尝试一下 »

属性定义及使用说明

如果图像大于包含它的元素，会发生什么？-clip属性，让你指定一个绝对定位的元素，该尺寸应该是可见的，该元素被剪裁成这种形状并显示。

注意：: 如果先有"overflow：visible"，clip属性不起作用。

默认值:	auto
继承:	no
版本:	CSS2
JavaScript 语法:	object.style.clip="rect(0px,50px,50px,0px)"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
clip	1.0	8.0	1.0	1.0	7.0

属性值

值	描述
shape	设置元素的形状。唯一合法的形状值是：rect (top, right, bottom, left)
auto	默认值。不应用任何剪裁。
inherit	规定应该从父元素继承 clip 属性的值。

CSS 教程: CSS Positioning

CSS color 属性

实例

不同元素设置text-color：

body
{
color:red;
}
h1
{
color:#00ff00;
}
p
{
color:rgb(0,0,255);
}

尝试一下 »

属性定义及使用说明

Color属性指定文本的颜色。

默认值:	not specified
继承:	no
版本:	CSS1
JavaScript 语法:	object.style.color="#FF0000"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
color	1.0	3.0	1.0	1.0	3.5

提示和注释

提示:请使用合理的背景颜色和文本颜色搭配，这样可以提高文本的可读性。

Property Values

值	描述
color_name	规定颜色值为颜色名称的颜色（比如 red）。
hex_number	规定颜色值为十六进制值的颜色（比如 #ff0000）。
rgb_number	规定颜色值为 rgb 代码的颜色（比如 rgb(255,0,0)）。
inherit	规定应该从父元素继承颜色。

CSS 教程: CSS Text

CSS 参考手册

实例

将 div 元素中的文本分为三列：

div{-moz-column-count:3; /* Firefox */-webkit-column-count:3; /* Safari 和 Chrome */column-count:3;}

亲自试一试

页面底部有更多实例。

浏览器支持

属性
column-count	50.0 4.0 -webkit-	10.0	2.0 -moz-	9.0 3.1 -webkit-	37.0 15.0 -webkit 11.1

Internet Explorer 10 和 Opera 支持 column-count 属性。

Firefox 支持替代的 -moz-column-count 属性。

Safari 和 Chrome 支持替代的 -webkit-column-count 属性。

注释：Internet Explorer 9 以及更早版本的浏览器不支持 column-count 属性。

定义和用法

column-count 属性规定元素应该被划分的列数。

默认值：	auto
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.columnCount=3

语法

column-count: number|auto;

值	描述	测试
number	元素内容将被划分的最佳列数。	测试
auto	由其他属性决定列数，比如 "column-width"。	测试

亲自试一试 - 实例

Column-gap: 将 div 元素中的文本分为三列，并规定列间 30 像素的间隔。
Column-rule: 规定列之间的宽度、样式和颜色。

实例

规定如何对列进行填充：

div{column-fill:auto;}

浏览器支持

主流浏览器都不支持 column-fill 属性。

定义和用法

属性
column-fill	不支持	不支持	13.0 -moz-	不支持	不支持

column-fill 属性规定如何填充列（是否进行协调）。

默认值：	balance
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.columnFill="auto"

语法

column-fill: balance|auto;

值	描述
balance	对列进行协调。浏览器应对列长度的差异进行最小化处理。
auto	按顺序对列进行填充，列长度会各有不同。

亲自试一试 - 实例

Column-count: 把 div 元素中的文本划分为三列。
Column-gap: 将 div 元素中的文本分为三列，并规定列间 30 像素的间隔。
Column-rule: 规定列之间的宽度、样式和颜色。

实例

规定列间的间隔为 40 像素：

div{-moz-column-gap:40px; /* Firefox */-webkit-column-gap:40px; /* Safari 和 Chrome */column-gap:40px;}

亲自试一试

页面底部有更多实例。

浏览器支持

IE	Firefox	Chrome	Safari	Opera

Internet Explorer 10 和 Opera 支持 column-gap 属性。

Firefox 支持替代的 -moz-column-gap 属性。

Safari 和 Chrome 支持替代的 -webkit-column-gap 属性。

注释：Internet Explorer 9 以及更早版本的浏览器不支持 column-gap 属性。

定义和用法

column-gap 属性规定列之间的间隔。

注释：如果列之间设置了 column-rule，它会在间隔中间显示。

默认值：	normal
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.columnGap="40px"

语法

column-gap: length|normal;

值	描述	测试
length	把列间的间隔设置为指定的长度。	测试
normal	规定列间间隔为一个常规的间隔。W3C 建议的值是 1em。	测试

亲自试一试 - 实例

Column-count: 把 div 元素中的文本划分为三列。
Column-rule: 规定列之间的宽度、样式和颜色。

CSS3 column-rule 属性

实例

指定列之间的规则：宽度，样式和颜色：

div
{
column-rule:3px outset #ff00ff;
-moz-column-rule:3px outset #ff00ff; /* Firefox */
-webkit-column-rule:3px outset #ff00ff; /* Safari and Chrome */
}

尝试一下 »
在此页底部有更多的例子。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
column-rule	50.0 4.0 -webkit-	10.0	2.0 -moz-	9.0 3.1 -webkit-	37.0 15.0 -webkit 11.1

属性定义及使用说明

column-rule 属性

column-rule属性是一个速记属性设置所有column-rule-*属性。column-rule属性设置列之间的宽度，样式和颜色。

默认值:	medium none black
继承:	no
版本:	CSS3
JavaScript 语法:	object.style.columnRule="3px outset #ff00ff"

语法

column-rule: column-rule-width column-rule-style column-rule-color;

值	说明
column-rule-width	设置列中之间的宽度规则
column-rule-style	设置列中之间的样式规则
column-rule-color	设置列中之间的颜色规则

CSS3 column-rule-color 属性

实例

指定列之间的颜色规则：

div
{
column-rule-color:#ff0000;
-moz-column-rule-color:#ff0000; /* Firefox */
-webkit-column-rule-color:#ff0000; /* Safari and Chrome */
}

尝试一下 »
在此页底部有更多的例子。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
column-rule-color	50.0 4.0 -webkit-	10.0	2.0 -moz-	9.0 3.1 -webkit-	37.0 15.0 -webkit 11.1

属性定义及使用说明

column-rule-color属性指定列之间的颜色规则。

默认值:	black
继承:	no
版本:	CSS3
JavaScript 语法:	object.style.columnRuleColor="#ff00ff"

语法

column-rule-color: color;

值	描述	测试
color	指定颜色的规则。在CSS颜色值寻找颜色值的完整列表

CSS3 column-rule-style 属性

实例

指定列之间的样式规则：

div
{
column-rule-style:dotted;
-moz-column-rule-style:dotted; /* Firefox */
-webkit-column-rule-style:dotted; /* Safari and Chrome */
}

尝试一下 »
在此页底部有更多的例子。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
column-rule-style	50.0 4.0 -webkit-	10.0	2.0 -moz-	9.0 3.1 -webkit-	37.0 15.0 -webkit 11.1

属性定义及使用说明

column-rule-style属性指定列之间的样式规则。

默认值:	none
继承:	no
版本:	CSS3
JavaScript 语法:	object.style.columnRuleStyle="dotted"

语法

值	描述
none	定义没有规则。
hidden	定义隐藏规则。
dotted	定义点状规则。
dashed	定义虚线规则。
solid	定义实线规则。
double	定义双线规则。
groove	定义 3D grooved 规则。该效果取决于宽度和颜色值。
ridge	定义 3D ridged 规则。该效果取决于宽度和颜色值。
inset	定义 3D inset 规则。该效果取决于宽度和颜色值。
outset	定义 3D outset 规则。该效果取决于宽度和颜色值。

CSS3 column-rule-width 属性

实例

指定列之间的宽度规则：

div
{
column-rule-width:10px;
-moz-column-rule-width:10px; /* Firefox */
-webkit-column-rule-width:10px; /* Safari and Chrome */
}

尝试一下 »
在此页底部有更多的例子。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
column-rule-width	50.0 4.0 -webkit-	10.0	2.0 -moz-	9.0 3.1 -webkit-	37.0 15.0 -webkit 11.1

属性定义及使用说明

column-rule-width属性指定列之间的宽度规则。

默认值:	medium
继承:	no
版本:	CSS3
JavaScript 语法:	object.style.columnRuleWidth="thin"

语法

column-rule-width: thin|medium|thick|length;

值	说明
thin	指定一个细边框的规则
medium	定义一个中等边框规则
thick	指定一个粗边框的规则
length	指定宽度的规则

实例

使 h2 元素横跨所有列：

h2{-webkit-column-span:all; /* Chrome */column-span:all;}

亲自试一试

页面底部有更多实例。

浏览器支持

IE	Firefox	Chrome	Safari	Opera

Internet Explorer 10 和 Opera 支持 column-span 属性。

Safari 和 Chrome 支持替代的 -webkit-column-span 属性。

注释：Internet Explorer 9 以及更早版本的浏览器不支持 column-span 属性。

定义和用法

column-span 属性规定元素应横跨多少列。

默认值：	1
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.columnSpan="all"

语法

column-span: 1|all;

值	描述	测试
1	元素应横跨一列。	测试
all	元素应横跨所有列。	测试

亲自试一试 - 实例

Column-count: 把 div 元素中的文本划分为三列。
Column-gap: 将 div 元素中的文本分为三列，并列间 30 像素的间隔。
Column-rule: 规定列之间的宽度、样式和颜色。

实例

规定列的宽度：

div{column-width:100px;-moz-column-width:100px; /* Firefox */-webkit-column-width:100px; /* Safari 和 Chrome */}

亲自试一试

页面底部有更多实例。

浏览器支持

IE	Firefox	Chrome	Safari	Opera

Internet Explorer 10 和 Opera 支持 column-width 属性。

Firefox 支持替代的 -moz-column-width 属性。

Safari 和 Chrome 支持替代的 -webkit-column-width 属性。

注释：Internet Explorer 9 以及更早版本的浏览器不支持 column-width 属性。

定义和用法

column-width 属性规定列的宽度。

默认值：	auto
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.columnWidth="100px"

语法

column-width: auto|length;

值	描述	测试
auto	由浏览器决定列宽。	测试
length	规定列的宽度。	测试

亲自试一试 - 实例

Column-count: 把 div 元素中的文本划分为三列。
Column-gap: 将 div 元素中的文本分为三列，并列间 30 像素的间隔。
Column-rule: 规定列之间的宽度、样式和颜色。

实例

规定列的宽度和列数：

div{columns:100px 3;-moz-columns:100px 3; /* Firefox */-webkit-columns:100px 3; /* Safari 和 Chrome */}

亲自试一试

页面底部有更多实例。

浏览器支持

IE	Firefox	Chrome	Safari	Opera

Internet Explorer 10 和 Opera 支持 column 属性。

Firefox 支持替代的 -moz-column 属性。

Safari 和 Chrome 支持替代的 -webkit-column 属性。

注释：Internet Explorer 9 以及更早版本的浏览器不支持 column 属性。

定义和用法

columns 属性是一个简写属性，用于设置列宽和列数。

默认值：	auto auto
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.columns="100px 3"

语法

columns: column-width column-count;

值	描述
column-width	列的宽度。
column-count	列数。

亲自试一试 - 实例

Column-count: 把 div 元素中的文本划分为三列。
Column-gap: 将 div 元素中的文本分为三列，并列间 30 像素的间隔。
Column-rule: 规定列之间的宽度、样式和颜色。

CSS content 属性

实例

以下示例将在每个链接后的括号内加上网址：

a:after
{
content: " (" attr(href) ")";
}

尝试一下 »

属性定义及使用说明

content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。

默认值：	normal
继承：	no
版本：	CSS2
JavaScript 语法：	object.style.content="url(beep.wav)"

浏览器支持

所有主流浏览器都支持Content属性。

注意： IE8只有指定!DOCTYPE才支持Content属性。

Content属性值

值	说明
none	设置Content，如果指定成Nothing
normal	设置content，如果指定的话，正常，默认是"none"（该是nothing）
counter	设定计数器内容
attr(attribute)	设置Content作为选择器的属性之一。
string	设置Content到你指定的文本
open-quote	设置Content是开口引号
close-quote	设置Content是闭合引号
no-open-quote	如果指定，移除内容的开始引号
no-close-quote	如果指定，移除内容的闭合引号
url(url)	设置某种媒体（图像，声音，视频等内容）
inherit	指定的content属性的值，应该从父元素继承

CSS 参考手册: :before 伪元素

CSS 参考手册: :after 伪元素

CSS counter-increment 属性

实例

对部分和子部分进行编号（比如 "Section 1"、"1.1"、"1.2"）的方法：

尝试一下 »

属性定义及使用说明

counter-increment属性递增一个或多个计数器值。

counter-increment属性通常用于counter-reset属性和content属性。

默认值：	none
继承：	no
版本：	CSS2
JavaScript 语法：	object.style.counterIncrement="subsection"

浏览器支持

所有主流浏览器都支持counter-increment属性。

注意：IE8只有指定!DOCTYPE才支持counter-increment属性。

属性值

值	说明
none	没有计数器将递增
id number	id 定义将增加计数的选择器、id 或 class。number 定义增量。number 可以是正数、零或者负数。
inherit	指定counter-increment属性的值，应该从父元素继承

CSS 参考手册: :before 伪元素

CSS 参考手册: :after 伪元素

CSS 参考手册: content 属性

CSS 参考手册: counter-reset 属性

CSS counter-reset 属性

实例

对部分和子部分进行编号（比如 "Section 1"、"1.1"、"1.2"）的方法：

尝试一下 »

属性定义及使用说明

counter-reset属性创建或重置一个或多个计数器。

counter-reset属性通常是和counter-increment属性，content属性一起使用。

默认值：	none
继承：	no
版本：	CSS2
JavaScript 语法：	object.style.counterReset="subsection"

浏览器支持

所有主流浏览器都支持counter-reset属性。

注意： IE8只有指定!DOCTYPE才支持counter-reset属性。

属性值

值	说明
none	默认。不能对选择器的计数器进行重置
id number	id 定义重置计数器的选择器、id 或 class。number 可设置此选择器出现次数的计数器的值。可以是正数、零或负数。
inherit	规定应该从父元素继承 counter-reset 属性的值

CSS reference: :before 伪元素

CSS reference: :after 伪元素

CSS reference: content 属性

CSS reference: counter-increment 属性

CSS cursor 属性

实例

一些不同的光标：

span.crosshair{cursor:crosshair}
span.help{cursor:help}
span.wait{cursor:wait}

尝试一下 »

属性定义及使用说明

cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状

默认值：	auto
继承：	yes
版本：	CSS2
JavaScript 语法：	object.style.cursor="crosshair"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
cursor	5.0	5.5	4.0	5.0	9.6

属性值

值	描述
url	需使用的自定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
default	默认光标（通常是一个箭头）
auto	默认。浏览器设置的光标。
crosshair	光标呈现为十字线。
pointer	光标呈现为指示链接的指针（一只手）
move	此光标指示某对象可被移动。
e-resize	此光标指示矩形框的边缘可被向右（东）移动。
ne-resize	此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize	此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize	此光标指示矩形框的边缘可被向上（北）移动。
se-resize	此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize	此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize	此光标指示矩形框的边缘可被向下移动（北/西）。
w-resize	此光标指示矩形框的边缘可被向左移动（西）。
text	此光标指示文本。
wait	此光标指示程序正忙（通常是一只表或沙漏）。
help	此光标指示可用的帮助（通常是一个问号或一个气球）。

CSS direction 属性

实例

设置文字方向"right-to-left":

div
{
direction:rtl;
}

尝试一下 »

属性定义及使用说明

direction属性指定文本方向/书写方向。

默认值：	ltr
继承：	yes
版本：	CSS2
JavaScript 语法：	object.style.direction="rtl"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
direction	2.0	5.5	1.0	1.3	9.2

属性值

值	描述
ltr	默认。文本方向从左到右。
rtl	文本方向从右到左。
inherit	规定应该从父元素继承 direction 属性的值。

CSS 教程: CSS Text

CSS display 属性

实例

设置段落生成一个行内框：

p.inline
{
display:inline;
}

尝试一下 »

属性定义及使用说明

display 属性规定元素应该生成的框的类型。

默认值：	inline
继承：	no
版本：	CSS1
JavaScript 语法：	object.style.display="inline"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
display	4.0	8.0 Partial from 5.5	3.0	3.1	7.0

属性值

值	描述
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）
list-item	此元素会作为列表显示。
run-in	此元素会根据上下文作为块级元素或内联元素显示。
compact	CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker	CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table	此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table	此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group	此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group	此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group	此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row	此元素会作为一个表格行显示（类似 <tr>）。
table-column-group	此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column	此元素会作为一个单元格列显示（类似 <col>）
table-cell	此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption	此元素会作为一个表格标题显示（类似 <caption>）
inherit	规定应该从父元素继承 display 属性的值。

CSS 教程: CSS Display 和visibility

CSS empty-cells 属性

实例

隐藏表中的空单元格的边框和背景：

table
{
border-collapse:separate;
empty-cells:hide;
}

尝试一下 »

属性定义及使用说明

empty-cells 属性设置是否显示表格中的空单元格（仅用于"分离边框"模式）。

默认值：	show
继承：	yes
版本：	CSS2
JavaScript 语法：	object.style.emptyCells="hide"

浏览器支持

所有主流浏览器都支持empty-cells属性。

注意：只有指定!DOCTYPE，IE8才支持empty-cells属性。

属性值

值	描述
hide	不在空单元格周围绘制边框。
show	在空单元格周围绘制边框。默认。
inherit	规定应该从父元素继承 empty-cells 属性的值。

CSS 教程: CSS Table

CSS3 filter(滤镜) 属性

实例

修改所有图片的颜色为黑白 (100% 灰度):

img {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}

尝试一下 »

定义和使用

filter 属性定义了元素(通常是<img>)的可视效果(例如：模糊与饱和度)。

默认值:	none
继承:	no
动画支持:	是。详细可查阅 CSS 动画
版本:	CSS3
JavaScript 语法:	object.style.WebkitFilter="grayscale(100%)" 尝试一下 »

浏览器支持

表格中的数字表示支持该方法的第一个浏览器的版本号。

紧跟在数字后面的 -webkit- 为指定浏览器的前缀。

属性
filter	18.0 -webkit-	不支持	35.0	6.0 -webkit-	15.0 -webkit-

注意: 旧版 Internet Explorer 浏览器(4.0 to 8.0) 支持的非标准 "filter" 属性已被废弃。 IE8 及更低版本浏览器通常使用 opacity 属性。

CSS 语法

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

提示: 使用空格分隔多个滤镜。

Filter 函数

注意: 滤镜通常使用百分比 (如：75%), 当然也可以使用小数来表示 (如：0.75)。

Filter	描述
none	默认值，没有效果。
blur(px)	给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起，所以值越大越模糊；如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。
brightness(%)	给图片应用一种线性乘法，使其看起来更亮或更暗。如果值是0%，图像会全黑。值是100%，则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的，图像会比原来更亮。如果没有设定值，默认是1。
contrast(%)	调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。
drop-shadow(h-shadow v-shadow blur spread color)	给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。函数接受<shadow>(在CSS3背景中定义)类型的值，除了"inset"关键字是不允许的。该函数与已有的box-shadow box-shadow属性很相似；不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。`<shadow>参数如下：` <offset-x> <offset-y> (必须) 这是设置阴影偏移量的两个 <length>值. <offset-x> 设定水平方向距离. 负值会使阴影出现在元素左边. <offset-y>设定垂直距离.负值会使阴影出现在元素上方。查看<length>可能的单位. 如果两个值都是0, 则阴影出现在元素正后面 (如果设置了 `<blur-radius> and/or <spread-radius>，会有模糊效果).` <blur-radius> (可选) 这是第三个code><length>值. 值越大，越模糊，则阴影会变得更大更淡.不允许负值若未设定，默认是0 (则阴影的边界很锐利). <spread-radius> (可选) 这是第四个 <length>值. 正值会使阴影扩张和变大，负值会是阴影缩小.若未设定，默认是0 (阴影会与元素一样大小). 注意: Webkit, 以及一些其他浏览器不支持第四个长度，如果加了也不会渲染。 <color> (可选) 查看 <color>该值可能的关键字和标记。若未设定，颜色值基于浏览器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中，会应用colorcolor属性的值。另外, 如果颜色值省略，WebKit中阴影是透明的。
grayscale(%)	将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；
hue-rotate(deg)	给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。
invert(%)	反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间，则是效果的线性乘子。若值未设置，值默认是0。
opacity(%)	转化图像的透明程度。值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化。值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。若值未设置，值默认是1。该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。
saturate(%)	转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化。其他值，则是效果的线性乘子。超过100%的值是允许的，则有更高的饱和度。若值未设置，值默认是1。
sepia(%)	将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；
url()	URL函数接受一个XML文件，该文件设置了一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素。例如： filter: url(svg-url#element-id)
initial	设置属性为默认值，可参阅： CSS initial 关键字
inherit	从父元素继承该属性，可参阅：CSS inherit 关键字

CSS flex 属性

CSS 参考手册

实例

让所有弹性盒模型对象的子元素都有相同的长度，忽略它们内部的内容：

#main div
{
flex:1;
}

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。

属性
flex	29.0 21.0 -webkit-	11.0 10.0 -ms-	28.0 18.0 -moz-	9.0 6.1 -webkit-	17.0

定义和用法

flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

注意：如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。

默认值：	0 1 auto
继承：	否
可动画化：	是，参见个别的属性。请参阅可动画化（animatable）。
版本：	CSS3
JavaScript 语法：	object.style.flex="1"尝试一下

CSS 语法

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

属性值

值	描述
flex-grow	一个数字，规定项目将相对于其他灵活的项目进行扩展的量。
flex-shrink	一个数字，规定项目将相对于其他灵活的项目进行收缩的量。
flex-basis	项目的长度。合法值："auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。
auto	与 1 1 auto 相同。
none	与 0 0 auto 相同。
initial	设置该属性为它的默认值，即为 0 1 auto。请参阅 initial。
inherit	从父元素继承该属性。请参阅 inherit。

CSS 参考手册：flex-basis 属性

CSS 参考手册：flex-direction 属性

CSS 参考手册：flex-flow 属性

CSS 参考手册：flex-grow 属性

CSS 参考手册：flex-shrink 属性

CSS 参考手册：flex-wrap 属性

CSS 参考手册

CSS flex-basis 属性

CSS 参考手册

实例

设置第二个弹性盒元素的初始长度为 80 像素：

div:nth-of-type(2) {flex-basis: 80px;}

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。

属性
flex-basis	29.0 21.0 -webkit-	11.0 10.0 -ms-	28.0 18.0 -moz-	9.0 6.1 -webkit-	17.0

定义和用法

flex-basis 属性用于设置或检索弹性盒伸缩基准值。。

注意：如果元素不是弹性盒对象的元素，则 flex-basis 属性不起作用。

默认值：	auto
继承：	否
可动画化：	是。请参阅可动画化（animatable）。尝试一下
版本：	CSS3
JavaScript 语法：	object.style.flexBasis="200px"尝试一下

CSS 语法

flex-basis: number|auto|initial|inherit;

属性值

值	描述
number	一个长度单位或者一个百分比，规定灵活项目的初始长度。
auto	默认值。长度等于灵活项目的长度。如果该项目未指定长度，则长度将根据内容决定。
initial	设置该属性为它的默认值。请参阅 initial。
inherit	从父元素继承该属性。请参阅 inherit。

CSS 参考手册：flex 属性

CSS 参考手册：flex-direction 属性

CSS 参考手册：flex-flow 属性

CSS 参考手册：flex-grow 属性

CSS 参考手册：flex-shrink 属性

CSS 参考手册：flex-wrap 属性

CSS 参考手册

CSS flex-direction 属性

CSS 参考手册

实例

设置 <div> 元素内弹性盒元素的方向为相反的顺序：

div
{
display:flex;
flex-direction:row-reverse;
}

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。

属性
flex-direction	29.0 21.0 -webkit-	11.0 10.0 -ms-	28.0 18.0 -moz-	9.0 6.1 -webkit-	17.0

定义和用法

flex-direction 属性规定灵活项目的方向。

注意：如果元素不是弹性盒对象的元素，则 flex-direction 属性不起作用。

默认值：	row
继承：	否
可动画化：	否。请参阅可动画化（animatable）。
版本：	CSS3
JavaScript 语法：	object.style.flexDirection="column-reverse"尝试一下

CSS 语法

属性值

值	描述	实例
row	默认值。灵活的项目将水平显示，正如一个行一样。	尝试一下 »
row-reverse	与 row 相同，但是以相反的顺序。	尝试一下 »
column	灵活的项目将垂直显示，正如一个列一样。	尝试一下 »
column-reverse	与 column 相同，但是以相反的顺序。	尝试一下 »
initial	设置该属性为它的默认值。请参阅 initial。	尝试一下 »
inherit	从父元素继承该属性。请参阅 inherit。

CSS 参考手册：flex 属性

CSS 参考手册：flex-basis 属性

CSS 参考手册：flex-flow 属性

CSS 参考手册：flex-grow 属性

CSS 参考手册：flex-shrink 属性

CSS 参考手册：flex-wrap 属性

CSS 参考手册

CSS flex-flow 属性

CSS 参考手册

实例

让弹性盒的元素以相反的顺序显示，且在必要的时候进行拆行：

display:flex;
flex-flow:row-reverse wrap;

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。

属性
flex-flow	29.0 21.0 -webkit-	11.0 10.0 -ms-	28.0 18.0 -moz-	9.0 6.1 -webkit-	17.0

定义和用法

flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性。

flex-flow 属性用于设置或检索弹性盒模型对象的子元素排列方式。

flex-direction 属性规定灵活项目的方向。

flex-wrap 属性规定灵活项目是否拆行或拆列。

注意：如果元素不是弹性盒对象的元素，则 flex-flow 属性不起作用。

默认值：	row nowrap
继承：	否
可动画化：	否。请参阅可动画化（animatable）。
版本：	CSS3
JavaScript 语法：	object.style.flexFlow="column nowrap"尝试一下

CSS 语法

flex-flow: flex-direction flex-wrap|initial|inherit;

属性值

值	描述
flex-direction	可能的值： row row-reverse column column-reverse initial inherit 默认值是 "row"。规定灵活项目的方向。
flex-wrap	可能的值： nowrap wrap wrap-reverse initial inherit 默认值是 "nowrap"。规定灵活项目是否拆行或拆列。
initial	设置该属性为它的默认值。请参阅 initial。
inherit	从父元素继承该属性。请参阅 inherit。

CSS 参考手册：flex 属性

CSS 参考手册：flex-basis 属性

CSS 参考手册：flex-direction 属性

CSS 参考手册：flex-grow 属性

CSS 参考手册：flex-shrink 属性

CSS 参考手册：flex-wrap 属性

CSS 参考手册

CSS flex-grow 属性

CSS 参考手册

实例

让第二个元素的宽度为其他元素的三倍：

div:nth-of-type(1) {flex-grow: 1;}
div:nth-of-type(2) {flex-grow: 3;}
div:nth-of-type(3) {flex-grow: 1;}

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。

属性
flex-grow	29.0 21.0 -webkit-	11.0 10.0 -ms-	28.0 18.0 -moz-	9.0 6.1 -webkit-	17.0

定义和用法

flex-grow 属性用于设置或检索弹性盒的扩展比率。。

注意：如果元素不是弹性盒对象的元素，则 flex-grow 属性不起作用。

默认值：	0
继承：	否
可动画化：	是。请参阅可动画化（animatable）。尝试一下
版本：	CSS3
JavaScript 语法：	object.style.flexGrow="5"尝试一下

CSS 语法

flex-grow: number|initial|inherit;

属性值

值	描述
number	一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。
initial	设置该属性为它的默认值。请参阅 initial。
inherit	从父元素继承该属性。请参阅 inherit。

CSS 参考手册：flex 属性

CSS 参考手册：flex-basis 属性

CSS 参考手册：flex-direction 属性

CSS 参考手册：flex-flow 属性

CSS 参考手册：flex-shrink 属性

CSS 参考手册：flex-wrap 属性

CSS 参考手册

CSS flex-shrink 属性

CSS 参考手册

实例

让第二个元素收缩到其他元素的三分之一：

div:nth-of-type(2) {flex-shrink: 3;}

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。

属性
flex-shrink	29.0 21.0 -webkit-	11.0 10.0 -ms-	28.0 18.0 -moz-	9.0 6.1 -webkit-	17.0

定义和用法

flex-shrink 属性用于设置或检索弹性盒的收缩比率。。

注意：如果元素不是弹性盒对象的元素，则 flex-shrink 属性不起作用。

默认值：	1
继承：	否
可动画化：	是。请参阅可动画化（animatable）。尝试一下
版本：	CSS3
JavaScript 语法：	object.style.flexShrink="5"尝试一下

CSS 语法

flex-shrink: number|initial|inherit;

属性值

值	描述
number	一个数字，规定项目将相对于其他灵活的项目进行收缩的量。默认值是 0。
initial	设置该属性为它的默认值。请参阅 initial。
inherit	从父元素继承该属性。请参阅 inherit。

CSS 参考手册：flex 属性

CSS 参考手册：flex-basis 属性

CSS 参考手册：flex-direction 属性

CSS 参考手册：flex-flow 属性

CSS 参考手册：flex-grow 属性

CSS 参考手册：flex-wrap 属性

CSS 参考手册

CSS flex-wrap 属性

CSS 参考手册

实例

让弹性盒元素在必要的时候拆行：

display:flex;
flex-wrap: wrap;

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。

属性
flex-wrap	29.0 21.0 -webkit-	11.0 10.0 -ms-	28.0 18.0 -moz-	9.0 6.1 -webkit-	17.0

定义和用法

flex-wrap 属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。。

注意：如果元素不是弹性盒对象的元素，则 flex-wrap 属性不起作用。

默认值：	nowrap
继承：	否
可动画化：	否。请参阅可动画化（animatable）。
版本：	CSS3
JavaScript 语法：	object.style.flexWrap="nowrap"尝试一下

CSS 语法

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

属性值

值	描述
nowrap	默认值。规定灵活的项目不拆行或不拆列。
wrap	规定灵活的项目在必要的时候拆行或拆列。
wrap-reverse	规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。
initial	设置该属性为它的默认值。请参阅 initial。
inherit	从父元素继承该属性。请参阅 inherit。

CSS 参考手册：flex 属性

CSS 参考手册：flex-direction 属性

CSS 参考手册：flex-flow 属性

CSS 参考手册：flex-grow 属性

CSS 参考手册：flex-shrink 属性

CSS 参考手册：flex-basis 属性

CSS 参考手册

CSS float 属性

实例

让图像向右侧浮动：

img
{
float:right;
}

尝试一下 »

在此页底部有更多的例子。

属性定义及使用说明

float属性指定一个盒子（元素）是否应该浮动。

注意： 绝对定位的元素忽略float属性！

默认值：	none
继承：	no
版本：	CSS1
JavaScript 语法：	object.style.cssFloat="left"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
float	1.0	4.0	1.0	1.0	7.0

属性值

值	描述
left	元素向左浮动。
right	元素向右浮动。
none	默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit	规定应该从父元素继承 float 属性的值。

CSS font 属性

实例

指定在一个声明的所有字体属性：

p.ex1
{
font:15px arial,sans-serif;
}

p.ex2
{
font:italic bold 12px/30px Georgia, serif;
}

尝试一下 »

在此页底部有更多的例子。

属性定义及使用说明

font 简写属性在一个声明中设置所有字体属性。

可设置的属性是（按顺序）： "font-style font-variant font-weight font-size/line-height font-family"

font-size和font-family的值是必需的。如果缺少了其他值，默认值将被插入，如果有默认值的话。

注意： line - height属性设置行与行之间的空间。

默认值：	not specified
继承：	yes
版本：	CSS1
JavaScript 语法：	object.style.font="italic small-caps bold 12px arial,sans-serif"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
font	1.0	4.0	1.0	1.0	3.5

Font 特性

值	描述
font-style	规定字体样式。参阅：font-style 中可能的值。
font-variant	规定字体异体。参阅：font-variant 中可能的值。
font-weight	规定字体粗细。参阅：font-weight 中可能的值。
font-size/line-height	规定字体尺寸和行高。参阅：font-size 和 line-height 中可能的值。
font-family	规定字体系列。参阅：font-family 中可能的值。
caption	定义被标题控件（比如按钮、下拉列表等）使用的字体。
icon	定义被图标标记使用的字体。
menu	定义被下拉列表使用的字体。
message-box	定义被对话框使用的字体。
small-caption	caption 字体的小型版本。
status-bar	定义被窗口状态栏使用的字体。

CSS3 @font-face 规则

实例

指定名为"myFirstFont"的字体，并指定在哪里可以找到它的URL：

@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9 */
}

尝试一下 »

属性定义及使用说明

@font-face规则，网页设计师再也不必使用的"web-safe"的字体之一。

字体的名称，font - face规则：

font-family: myFirstFont;

字体文件包含在您的服务器上的某个地方，参考CSS：

src: url('Sansation_Light.ttf')

如果字体文件是在不同的位置，请使用完整的URL：

src: url('http://www.51coolma.css/css3/Sansation_Light.ttf')

现在准备使用该字体，下面是如何使用它所有的div元素的一个例子：

div{font-family: myFirstFont;}

语法：

@font-face{font-properties}

以下实例为在div中使用的字体:

div{font-family: myFirstFont;}

语法：

@font-face{font-properties}

字体描述	值	说明
font-family	name	必需的。定义字体的名称。
src	URL	必需的。定义该字体下载的网址（S）
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	可选。定义该字体应该如何被拉长。默认值是"正常"
font-style	normal italic oblique	可选。定义该字体应该是怎样样式。默认值是"正常"
font-weight	normal bold 100 200 300 400 500 600 700 800 900	可选。定义字体的粗细。默认值是"正常"
unicode-range	unicode-range	可选。定义该字体支持Unicode字符的范围。默认值是"ü+0-10 FFFF"

浏览器支持

浏览器

Internet Explorer 9, Firefox, Opera,Chrome, 和 Safari支持@font-face 规则。

但是，Internet Explorer 9 只支持 .eot 类型的字体，Firefox, Chrome, Safari, 和 Opera 支持 .ttf 与.otf 两种类型字体。

注意：Internet Explorer 8 及更早IE版本不支持@font-face 规则。

CSS3 教程： CSS3 字体

CSS font-family 属性

实例

指定段落的字体：

p
{
font-family:"Times New Roman",Georgia,Serif;
}

尝试一下 »

属性定义及使用说明

font - family属性指定一个元素的字体。

font-family 可以把多个字体名称作为一个"回退"系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。

有两种类型的字体系列名称：

family-name - 指定的系列名称：具体字体的名称，比如："times"、"courier"、"arial"。
generic-family - 通常字体系列名称：比如："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace。

注意： 每个值用逗号分开。

注意: 如果字体名称包含空格，它必须加上引号。在HTML中使用"style"属性时，必须使用单引号。

默认值：	not specified
继承：	yes
版本：	CSS1
JavaScript 语法：	object.style.fontFamily="arial,sans-serif"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
font-family	1.0	4.0	1.0	1.0	3.5

属性值

值

描述

family-name
generic-family

用于某个元素的字体族名称或/及类族名称的一个优先表。

默认值：取决于浏览器。

inherit

规定应该从父元素继承字体系列。

CSS 教程: CSS Font

CSS 参考手册: font 属性

CSS font-size 属性

实例

设置不同的HTML元素的字体大小：

h1 {font-size:250%}
h2 {font-size:200%}
p {font-size:100%}

尝试一下 »

属性定义及使用说明

font-size属性设置字体大小。

默认值：	medium
继承：	yes
版本：	CSS1
JavaScript 语法：	object.style.fontSize="larger"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
font-size	1.0	5.5	1.0	1.0	7.0

属性值

值	描述
xx-small x-small small medium large x-large xx-large	把字体的尺寸设置为不同的尺寸，从 xx-small 到 xx-large。默认值：medium。
smaller	把 font-size 设置为比父元素更小的尺寸。
larger	把 font-size 设置为比父元素更大的尺寸。
length	把 font-size 设置为一个固定的值。
%	把 font-size 设置为基于父元素的一个百分比值。
inherit	规定应该从父元素继承字体尺寸。

CSS 教程: CSS Font

CSS 参考手册: font 属性

CSS 参考手册

实例

设置不同的 HTML 元素的 font-size-adjust 属性：

h1  {  font-size-adjust:0.58;  }p  {  font-size-adjust:0.60;  }

亲自试一试

浏览器支持

Internet Explorer 不支持 font-size-adjust 属性。

定义和用法

font-size-adjust 属性为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height。

说明

默认值：	none
继承性：	yes
版本：	CSS2
JavaScript 语法：	object.style.fontSizeAdjust="0.70"

可能的值

值

描述

none

默认。如果此字体不可用，则不保持此字体的 x-height。

number

定义字体的 aspect 值比率。

可使用的公式：

首选字体的字体尺寸 * （font-size-adjust 值 / 可用字体的 aspect 值）=可应用到可用字体的字体尺寸

举例：

如果 14px 的 Verdana（aspect 值是 0.58）不可用，但是某个可用的字体的 aspect 值是 0.46，那么替代字体的尺寸将是 14 * (0.58/0.46) = 17.65px。

TIY 实例

使用 font-size-adjust 设置字体尺寸: 本例演示如何使用 font-size-adjust 设置字体尺寸。

实例

设置 HTML 元素的 font-stretch 属性：

h1  {  font-stretch:ultra-condensed;  }

浏览器支持

IE	Firefox	Chrome	Safari	Opera

所有主流浏览器都不支持 font-stretch 属性。

定义和用法

font-stretch 属性可对当前的 font-family 进行伸缩变形。

默认值：	normal
继承性：	yes
版本：	CSS2
JavaScript 语法：	object.style.fontStretch="ultra-expanded"

可能的值

值	描述
normal	默认值。把缩放比例设置为标准。
wider	把伸展比例设置为更进一步的伸展值
narrower	把收缩比例设置为更进一步的收缩值
ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded	设置 font-family 的缩放比例。 "ultra-condensed" 是最宽的值，而 "ultra-expanded" 是最窄的值。

CSS font-style 属性

实例

三个段落设置不同的字体样式：

p.normal {font-style:normal}
p.italic {font-style:italic}
p.oblique {font-style:oblique}

尝试一下 »

属性定义及使用说明

font-style属性指定文本的字体样式。

默认值：	normal
继承：	yes
版本：	CSS1
JavaScript 语法：	object.style.fontStyle="italic"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
font-style	1.0	4.0	1.0	1.0	7.0

属性值

值	描述
normal	默认值。浏览器显示一个标准的字体样式。
italic	浏览器会显示一个斜体的字体样式。
oblique	浏览器会显示一个倾斜的字体样式。
inherit	规定应该从父元素继承字体样式。

CSS 教程: CSS Font

CSS 参考手册: font 属性

CSS font-variant 属性

实例

把段落设置为小型大写字母字体：

p.small
{
font-variant:small-caps;
}

尝试一下 »

属性定义及使用说明

font-variant 属性主要用于定义小型大写字母文本

默认值：	normal
继承：	yes
版本：	CSS1
JavaScript 语法：	object.style.fontVariant="small-caps"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
font-variant	1.0	4.0	1.0	1.0	3.5

属性值

值	描述
normal	默认值。浏览器会显示一个标准的字体。
small-caps	浏览器会显示小型大写字母的字体。
inherit	规定应该从父元素继承 font-variant 属性的值。

CSS 教程: CSS Font

CSS 参考手册: font 属性

CSS font-weight 属性

实例

三段文字设置不同的字体粗细：

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

尝试一下 »

属性定义及使用说明

font-weight 属性设置文本的粗细

默认值：	normal
继承：	yes
版本：	CSS1
JavaScript 语法：	object.style.fontWeight="900"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
font-weight	2.0	4.0	1.0	1.3	3.5

属性值

值	描述
normal	默认值。定义标准的字符。
bold	定义粗体字符。
bolder	定义更粗的字符。
lighter	定义更细的字符。
100 200 300 400 500 600 700 800 900	定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。
inherit	规定应该从父元素继承字体的粗细。

CSS 教程: CSS Font

CSS 参考手册: font 属性

CSS3 grid-columns 属性

实例

为div元素添加网格线，一个右侧200像素，另一个在剩余空间中：

div
{
grid-columns:50% * * 200px;
}

浏览器支持

目前没有主流浏览器支持grid-columns属性。

属性定义及使用说明

grid-columns属性指定网格中的每一列的宽度。

默认值：	none
继承：	no
版本：	CSS3
JavaScript 语法：	object.style.gridColumns="50% * * 200px"

语法

grid-columns: length|%|none|inherit;

值	描述
length	参考包含块的网格。
%	参考包含块的宽度。
none
inherit

CSS3 grid-rows 属性

实例

定义为100像素的标题行，必要的并添加许多附加的30和60像素的高度：

div
{
grid-rows:100px (30px 60px);
}

浏览器支持

目前所有主流浏览器都不支持支持grid-rows属性。

属性定义及使用说明

grid-rows属性指定在网格中的每一行的高度。

默认值：	none
继承：	no
版本：	CSS3
JavaScript 语法：	object.style.gridRows="100px (30px 60px)"

语法

grid-rows: length|%|none|inherit;

值	描述
length	参考包含块的网格。
%	参考包含块的高度。
none
inherit

CSS 参考手册

实例

在 p 元素首行的开始边缘之外放置一个标点符号：

p{hanging-punctuation:first;}

浏览器支持

IE	Firefox	Chrome	Safari	Opera

目前主流浏览器都不支持 hanging-punctuation 属性。

定义和用法

hanging-punctuation 属性规定把标点符号放在文本整行的开头还是结尾的行框之外。

默认值：	none
继承性：	yes
版本：	CSS3
JavaScript 语法：	object.style.hangingPunctuation="first"

语法

hanging-punctuation: none|first|last|allow-end|force-end;

值	描述
none	不在文本整行的开头还是结尾的行框之外放置标签符号。
first	标点附着在首行开始边缘之外。
last	标点附着在首行结尾边缘之外。
allow-end
force-end

CSS 参考手册

CSS height 属性

实例

设置一个段落的高度和宽度：

p.ex
{
height:100px;
width:100px;
}

尝试一下 »

在此页底部有更多的例子。

属性定义及使用说明

height属性设置元素的高度。

注意： height属性不包括填充，边框，或页边距！

默认值：	auto
继承：	no
版本：	CSS1
JavaScript 语法：	object.style.height="50px"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
height	1.0	4.0	1.0	1.0	7.0

属性值

值	描述
auto	默认。浏览器会计算出实际的高度。
length	使用 px、cm 等单位定义高度。
%	基于包含它的块级对象的百分比高度。
inherit	规定应该从父元素继承 height 属性的值。

CSS3 icon 属性

实例

将图像元素设置为图标化的等价物：

img
{
content:icon;
icon:url(imgicon.png);
}

浏览器支持

没有主流浏览器支持icon属性。

属性定义及使用说明

icon 属性为创作者提供了将元素设置为图标等价物的能力。

注意：元素的图标是不可使用，除非"content"属性设置为"icon"！

默认值：	auto
继承：	no
版本：	CSS3
JavaScript 语法：	object.style.icon="url(image.png)"

语法

icon: auto|URL|inherit;

值	描述
auto	使用由浏览器提供的默认通用图标。
URL	引用列表中的一个或多个图标，列表用逗号分隔。
inherit	规定应从元素继承 icon 属性的值。

CSS justify-content 属性

CSS 参考手册

实例

在弹性盒对象的 <div> 元素中的各项周围留有空白：

div
{
display: flex;
justify-content: space-around;
}

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。

属性
justify-content	29.0 21.0 -webkit-	11.0	28.0 18.0 -moz-	9.0 6.1 -webkit-	17.0

定义和用法

justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

提示：使用 align-content 属性对齐交叉轴上的各项（垂直）。

默认值：	flex-start
继承：	否
可动画化：	否。请参阅可动画化（animatable）。
版本：	CSS3
JavaScript 语法：	object.style.justifyContent="space-between"尝试一下

CSS 语法

属性值

值	描述	测试
flex-start	默认值。项目位于容器的开头。	测试 »
flex-end	项目位于容器的结尾。	测试 »
center	项目位于容器的中心。	测试 »
space-between	项目位于各行之间留有空白的容器内。	测试 »
space-around	项目位于各行之前、之间、之后都留有空白的容器内。	测试 »
initial	设置该属性为它的默认值。请参阅 initial。	测试 »
inherit	从父元素继承该属性。请参阅 inherit。

CSS 参考手册：align-content 属性

CSS 参考手册：align-items 属性

CSS 参考手册：align-self 属性

CSS 参考手册

实例

使 div 元素匀速向下移动：

@keyframes mymove{from {top:0px;}to {top:200px;}}@-moz-keyframes mymove /* Firefox */{from {top:0px;}to {top:200px;}}@-webkit-keyframes mymove /* Safari 和 Chrome */{from {top:0px;}to {top:200px;}}@-o-keyframes mymove /* Opera */{from {top:0px;}to {top:200px;}}

亲自试一试

页面底部有更多实例。

浏览器支持

IE	Firefox	Chrome	Safari	Opera

目前浏览器都不支持 @keyframes 规则。

Firefox 支持替代的 @-moz-keyframes 规则。

Opera 支持替代的 @-o-keyframes 规则。

Safari 和 Chrome 支持替代的 @-webkit-keyframes 规则。

定义和用法

通过 @keyframes 规则，您能够创建动画。

创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。

在动画过程中，您能够多次改变这套 CSS 样式。

以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。

0% 是动画的开始时间，100% 动画的结束时间。

为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

注释：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。

语法

@keyframes animationname {keyframes-selector {css-styles;}}

值

描述

animationname

必需。定义动画的名称。

keyframes-selector

必需。动画时长的百分比。

合法的值：

0-100%
from（与 0% 相同）
to（与 100% 相同）

css-styles

必需。一个或多个合法的 CSS 样式属性。

亲自试一试 - 实例

实例 1

在一个动画中添加多个 keyframe 选择器：

@keyframes mymove{0%   {top:0px;}25%  {top:200px;}50%  {top:100px;}75%  {top:200px;}100% {top:0px;}}@-moz-keyframes mymove /* Firefox */{0%   {top:0px;}25%  {top:200px;}50%  {top:100px;}75%  {top:200px;}100% {top:0px;}}@-webkit-keyframes mymove /* Safari 和 Chrome */{0%   {top:0px;}25%  {top:200px;}50%  {top:100px;}75%  {top:200px;}100% {top:0px;}}@-o-keyframes mymove /* Opera */{0%   {top:0px;}25%  {top:200px;}50%  {top:100px;}75%  {top:200px;}100% {top:0px;}}

亲自试一试

实例 2

在一个动画中改变多个 CSS 样式：

@keyframes mymove{0%   {top:0px; background:red; width:100px;}100% {top:200px; background:yellow; width:300px;}}@-moz-keyframes mymove /* Firefox */{0%   {top:0px; background:red; width:100px;}100% {top:200px; background:yellow; width:300px;}}@-webkit-keyframes mymove /* Safari 和 Chrome */{0%   {top:0px; background:red; width:100px;}100% {top:200px; background:yellow; width:300px;}}@-o-keyframes mymove /* Opera */{0%   {top:0px; background:red; width:100px;}100% {top:200px; background:yellow; width:300px;}}

亲自试一试

实例 3

带有多个 CSS 样式的多个 keyframe 选择器：

@keyframes mymove{0%   {top:0px; left:0px; background:red;}25%  {top:0px; left:100px; background:blue;}50%  {top:100px; left:100px; background:yellow;}75%  {top:100px; left:0px; background:green;}100% {top:0px; left:0px; background:red;}}@-moz-keyframes mymove /* Firefox */{0%   {top:0px; left:0px; background:red;}25%  {top:0px; left:100px; background:blue;}50%  {top:100px; left:100px; background:yellow;}75%  {top:100px; left:0px; background:green;}100% {top:0px; left:0px; background:red;}}@-webkit-keyframes mymove /* Safari and Chrome */{0%   {top:0px; left:0px; background:red;}25%  {top:0px; left:100px; background:blue;}50%  {top:100px; left:100px; background:yellow;}75%  {top:100px; left:0px; background:green;}100% {top:0px; left:0px; background:red;}}@-o-keyframes mymove /* Opera */{0%   {top:0px; left:0px; background:red;}25%  {top:0px; left:100px; background:blue;}50%  {top:100px; left:100px; background:yellow;}75%  {top:100px; left:0px; background:green;}100% {top:0px; left:0px; background:red;}}

亲自试一试

CSS left 属性

实例

把图像的左边缘设置在其包含元素左边缘向右5像素的位置：

img
{
position:absolute;
left:5px;
}

尝试一下 »

属性定义及使用说明

left 属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。

如果 "position" 属性的值为 "static"，那么设置 "left" 属性不会产生任何效果。

注意： If "position:static", the left property has no effect.

默认值：	auto
继承：	no
版本：	CSS2
JavaScript 语法：	object.style.left="50px"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
left	1.0	5.5	1.0	1.0	5.0

属性值

值	描述
auto	默认值。通过浏览器计算左边缘的位置。
%	设置以包含元素的百分比计的左边位置。可使用负值。
length	使用 px、cm 等单位设置元素的左边位置。可使用负值。
inherit	规定应该从父元素继承 left 属性的值。

CSS 教程: CSS Positioning

CSS letter-spacing 属性

实例

设置为h1和h2元素的字母间距：

h1 {letter-spacing:2px}
h2 {letter-spacing:-3px}

尝试一下 »

属性定义及使用说明

letter-spacing 属性增加或减少字符间的空白（字符间距）

默认值：	normal
继承：	yes
版本：	CSS1
JavaScript 语法：	object.style.letterSpacing="3px"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
letter-spacing	1.0	4.0	1.0	1.0	3.5

属性值

值	描述
normal	默认。规定字符间没有额外的空间。
length	定义字符间的固定空间（允许使用负值）。
inherit	规定应该从父元素继承 letter-spacing 属性的值。

CSS 教程: CSS Text

CSS line-height 属性

实例

Set the line height in percent:

p.small {line-height:90%}
p.big {line-height:200%}

尝试一下 »

在此页底部有更多的例子。

属性定义及使用说明

设置以百分比计的行高：.

注意： 负值是不允许的

默认值：	normal
继承：	yes
版本：	CSS1
JavaScript 语法：	object.style.lineHeight="2"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
line-height	1.0	4.0	1.0	1.0	7.0

属性值

值	描述
normal	默认。设置合理的行间距。
number	设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length	设置固定的行间距。
%	基于当前字体尺寸的百分比行间距。
inherit	规定应该从父元素继承 line-height 属性的值。

CSS list-style 属性

实例

在一个声明中指定所有列表属性：

ul
{
list-style:square url("sqpurple.gif");
}

尝试一下 »

属性定义及使用说明

list-style 简写属性在一个声明中设置所有的列表属性。

可以设置的属性（按顺序）： list-style-type, list-style-position, list-style-image.

可以不设置其中的某个值，比如 "list-style:circle inside;" 也是允许的。未设置的属性会使用其默认值。

默认值：	disc outside none
继承：	yes
版本：	CSS1
JavaScript 语法：	object.style.listStyle="decimal inside"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
list-style	1.0	4.0	1.0	1.0	7.0

属性值

值	描述
list-style-type	设置列表项标记的类型。参阅：list-style-type 中可能的值。
list-style-position	设置在何处放置列表项标记。参阅：list-style-position 中可能的值。
list-style-image	使用图像来替换列表项的标记。参阅：list-style-image 中可能的值。
initial	将这个属性设置为默认值。参阅：initial 中可能的值。
inherit	规定应该从父元素继承 list-style 属性的值。参阅：inherit 中可能的值。

CSS 教程: CSS 列表

CSS list-style-image 属性

实例

指定列表中的列表项标记的图像：

ul
{
list-style-image:url('sqpurple.gif');
}

尝试一下 »

属性定义及使用说明

list-style-image 属性使用图像来替换列表项的标记。

注意: 请始终规定一个 "list-style-type" 属性以防图像不可用。

默认值：	none
继承：	yes
版本：	CSS1
JavaScript 语法：	object.style.listStyleImage="url('/images/blueball.gif')"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
list-style-image	1.0	4.0	1.0	1.0	7.0

属性值

值	描述
URL	图像的路径。
none	默认。无图形被显示。
inherit	规定应该从父元素继承 list-style-image 属性的值。

CSS 教程: CSS 列表

CSS 参考手册: list-style 属性

CSS list-style-position 属性

实例

规定列表中列表项目标记的位置：

ul
{
list-style-position:inside;
}

尝试一下 »

属性定义及使用说明

list-style-position属性指示如何相对于对象的内容绘制列表项标记。

Outside:

Coffee
Tea
Coca-cola

Inside:

Coffee
Tea
Coca-cola

默认值：	outside
继承：	yes
版本：	CSS1
JavaScript 语法：	object.style.listStylePosition="inside"

浏览器支持

所有主流浏览器都支持list-style-position属性。

注意：IE7和更早的版本不支持"inherit"的值。IE8需要定义！DOCTYPE。IE9支持"inherit"。

属性值

值	描述
inside	列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside	默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
inherit	规定应该从父元素继承 list-style-position 属性的值。

CSS 教程: CSS 列表

CSS 参考手册: list-style 属性

CSS list-style-type 属性

实例

设置一些不同的列表样式：

ul.circle {list-style-type:circle}
ul.square {list-style-type:square}
ol.upper-roman {list-style-type:upper-roman}
ol.lower-alpha {list-style-type:lower-alpha}

尝试一下 »

在此页底部有更多的例子。

属性定义及使用说明

list-style-type 属性设置列表项标记的类型。

默认值：	"disc" for <ul> and "decimal" for <ol>
继承：	yes
版本：	CSS1
JavaScript 语法：	object.style.listStyleType="square"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
list-style-type	1.0	4.0	1.0	1.0	3.5

属性值

值	描述
none	无标记。
disc	默认。标记是实心圆。
circle	标记是空心圆。
square	标记是实心方块。
decimal	标记是数字。
decimal-leading-zero	0开头的数字标记。(01, 02, 03, 等。)
lower-roman	小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman	大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha	小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha	大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek	小写希腊字母(alpha, beta, gamma, 等。)
lower-latin	小写拉丁字母(a, b, c, d, e, 等。)
upper-latin	大写拉丁字母(A, B, C, D, E, 等。)
hebrew	传统的希伯来编号方式
armenian	传统的亚美尼亚编号方式
georgian	传统的乔治亚编号方式(an, ban, gan, 等。)
cjk-ideographic	简单的表意数字
hiragana	标记是：a, i, u, e, o, ka, ki, 等。（日文片假名）
katakana	标记是：A, I, U, E, O, KA, KI, 等。（日文片假名）
hiragana-iroha	标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）
katakana-iroha	标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）

CSS margin 属性

实例

设置一个p元素的所有四个边距：

p
{
margin:2cm 4cm 3cm 4cm;
}

尝试一下 »

属性定义及使用说明

margin简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值。

实例:

margin:10px 5px 15px 20px;
- 上边距是 10px
- 右边距是 5px
- 下边距是 15px
- 左边距是 20px
margin:10px 5px 15px;
- 上边距是 10px
- 右边距和左边距是 5px
- 下边距是 15px
margin:10px 5px;
- 上边距和下边距是 10px
- 右边距和左边距是 5px
margin:10px;
- 所有四个边距都是 10px

注意： 负值是允许的。

默认值：	0
继承：	no
版本：	CSS1
JavaScript 语法：	object.style.margin="10px 5px"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
margin	1.0	6.0	1.0	1.0	3.5

属性值

值	描述
auto	浏览器计算外边距。
length	规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。
%	规定基于父元素的宽度的百分比的外边距。
inherit	规定应该从父元素继承外边距。

CSS 教程: CSS Margin

CSS margin-bottom 属性

实例

设置一个p元素的下边距：

p
{
margin-bottom:2cm;
}

尝试一下 »

属性定义及使用说明

margin-bottom属性设置元素的下边距。

注意： 负值是允许的。

默认值：	0
继承：	no
版本：	CSS1
JavaScript 语法：	object.style.marginBottom="10px"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
margin-bottom	1.0	6.0	1.0	1.0	3.5

属性值

值	描述
auto	浏览器计算下外边距。
length	规定以具体单位计的下外边距值，比如像素、厘米等。默认值是 0px。
%	规定基于父元素的宽度的百分比的下外边距。
inherit	规定应该从父元素继承下外边距。

CSS 教程: CSS Margin

CSS margin-left 属性

实例

设置一个p元素的左边距：

p
{
margin-left:2cm;
}

尝试一下 »

属性定义及使用说明

margin-left属性设置元素的左边距。

注意： 负值是允许的。

默认值：	0
继承：	no
版本：	CSS1
JavaScript 语法：	object.style.marginLeft="10px"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
margin-left	1.0	6.0	1.0	1.0	3.5

属性值

值	描述
auto	浏览器设置的左外边距。
length	定义固定的左外边距。默认值是0。
%	定义基于父对象总高度的百分比左外边距。
inherit	规定应该从父元素继承左外边距。

CSS 教程: CSS Margin

CSS margin-right 属性

实例

设置一个p元素的右边距：

p
{
margin-right:2cm;
}

尝试一下 »

属性定义及使用说明

margin-right属性设置元素的右边距。

注意： 负值是允许的。

默认值：	0
继承：	no
版本：	CSS1
JavaScript 语法：	object.style.marginRight="10px"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
margin-right	1.0	6.0	1.0	1.0	3.5

属性值

值	描述
auto	浏览器设置的右外边距。
length	定义固定的右外边距。默认值是 0。
%	定义基于父对象总高度的百分比右外边距。
inherit	规定应该从父元素继承右外边距。

CSS 教程: CSS Margin

CSS margin-top 属性

实例

设置一个p元素的上部边距：

p
{
margin-top:2cm;
}

尝试一下 »

属性定义及使用说明

margin-top属性设置元素的上部边距。

注意： 负值是允许的。

默认值：	0
继承：	no
版本：	CSS1
JavaScript 语法：	object.style.marginTop="10px"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
margin-top	1.0	6.0	1.0	1.0	3.5

属性值

值	描述
auto	浏览器设置的上外边距。
length	定义固定的上外边距。默认值是 0。
%	定义基于父对象总高度的百分比上外边距。
inherit	规定应该从父元素继承上外边距。

CSS 教程: CSS Margin

CSS max-height 属性

实例

设置段落的最大高度：

p
{
max-height:50px;
}

尝试一下 »

属性定义及使用说明

max-height 属性设置元素的最大高度。

注意： max-height属性不包括填充，边框，或页边距！

默认值：	none
继承：	no
版本：	CSS2
JavaScript 语法：	object.style.maxHeight="10px"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
max-height	1.0	7.0	1.0	2.0.2	7.0

属性值

值	描述
none	默认。定义对元素被允许的最大高度没有限制。
length	定义元素的最大高度值。
%	定义基于包含它的块级对象的百分比最大高度。
inherit	规定应该从父元素继承 max-height 属性的值。

CSS 教程: CSS Dimension

CSS 参考手册: min-height 属性

CSS max-width 属性

实例

设置段落的最大宽度：

p
{
max-width:100px;
}

尝试一下 »

属性定义及使用说明

max-width属性设置元素的最大宽度。

注意： max-width属性不包括填充，边框，或页边距！

默认值：	none
继承：	no
版本：	CSS2
JavaScript 语法：	object.style.maxWidth="100px"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
max-width	1.0	7.0	1.0	2.0.2	7.0

属性值

值	描述
none	默认。定义对元素的最大宽度没有限制。
length	定义元素的最大宽度值。
%	定义基于包含它的块级对象的百分比最大宽度。
inherit	规定应该从父元素继承 max-width 属性的值。

CSS 教程: CSS Dimension

CSS 参考手册: min-width 属性

CSS3 @media 查询

实例

如果文档宽度小于 300 像素则修改背景演示(background-color):

@media screen and (max-width: 300px) {
    body {
       background-color:lightblue;
    }
}

尝试一下 »

定义和使用

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

浏览器支持

表格中的数字表示支持 @media 规则的第一个浏览器的版本号。

Rule
@media	21	9	3.5	4.0	9

CSS 语法

@media mediatype and|not|only (media feature) {
CSS-Code;
}

你也可以针对不同的媒体使用不同 stylesheets :

媒体类型

值	描述
all	用于所有设备
aural	已废弃。用于语音和声音合成器
braille	已废弃。应用于盲文触摸式反馈设备
embossed	已废弃。用于打印的盲人印刷设备
handheld	已废弃。用于掌上设备或更小的装置，如PDA和小型电话
print	用于打印机和打印预览
projection	已废弃。用于投影设备
screen	用于电脑屏幕，平板电脑，智能手机等。
speech	应用于屏幕阅读器等发声设备
tty	已废弃。用于固定的字符网格，如电报、终端设备和对字符有限制的便携设备
tv	已废弃。用于电视和网络电视

媒体功能

值	描述
aspect-ratio	定义输出设备中的页面可见区域宽度与高度的比率
color	定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0
color-index	定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0
device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的比率。
device-height	定义输出设备的屏幕可见高度。
device-width	定义输出设备的屏幕可见宽度。
grid	用来查询输出设备是否使用栅格或点阵。
height	定义输出设备中的页面可见区域高度。
max-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最大比率。
max-color	定义输出设备每一组彩色原件的最大个数。
max-color-index	定义在输出设备的彩色查询表中的最大条目数。
max-device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最大比率。
max-device-height	定义输出设备的屏幕可见的最大高度。
max-device-width	定义输出设备的屏幕最大可见宽度。
max-height	定义输出设备中的页面最大可见区域高度。
max-monochrome	定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。
max-resolution	定义设备的最大分辨率。
max-width	定义输出设备中的页面最大可见区域宽度。
min-aspect-ratio	定义输出设备中的页面可见区域宽度与高度的最小比率。
min-color	定义输出设备每一组彩色原件的最小个数。
min-color-index	定义在输出设备的彩色查询表中的最小条目数。
min-device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最小比率。
min-device-width	定义输出设备的屏幕最小可见宽度。
min-device-height	定义输出设备的屏幕的最小可见高度。
min-height	定义输出设备中的页面最小可见区域高度。
min-monochrome	定义在一个单色框架缓冲区中每像素包含的最小单色原件个数
min-resolution	定义设备的最小分辨率。
min-width	定义输出设备中的页面最小可见区域宽度。
monochrome	定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0
orientation	定义输出设备中的页面可见区域高度是否大于或等于宽度。
resolution	定义设备的分辨率。如：96dpi, 300dpi, 118dpcm
scan	定义电视类设备的扫描工序。
width	定义输出设备中的页面可见区域宽度。

实例

使用 @media 查询来制作响应式设计：

@media only screen and (max-width: 500px) {
    .gridmenu {
        width:100%;
    }

    .gridmain {
        width:100%;
    }

    .gridright {
        width:100%;
    }
}

尝试一下 »

CSS min-height 属性

实例

设置段落的最低高度：

p
{
min-height:100px;
}

尝试一下 »

属性定义及使用说明

min-height 属性设置元素的最低高度。

注意： min-height属性不包括填充，边框，或页边距！

默认值：	0
继承：	no
版本：	CSS2
JavaScript 语法：	object.style.minHeight="10px"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
min-height	1.0	7.0	3.0	2.0.2	4.0

属性值

值	描述
length	定义元素的最小高度。默认值是 0。
%	定义基于包含它的块级对象的百分比最小高度。
inherit	规定应该从父元素继承 min-height 属性的值。

CSS 教程: CSS Dimension

CSS 参考手册: max-height 属性

CSS min-width 属性

实例

设置段落的最小宽度：

p
{
min-width:1000px;
}

尝试一下 »

属性定义及使用说明

min-width属性设置元素的最小宽度。

注意： min-width属性不包括填充，边框，或页边距！

默认值：	0
继承：	no
版本：	CSS2
JavaScript 语法：	object.style.minWidth="10px"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
min-width	1.0	7.0	1.0	2.0.2	4.0

属性值

值	描述
length	定义元素的最小宽度值。默认值：取决于浏览器。
%	定义基于包含它的块级对象的百分比最小宽度。
inherit	规定应该从父元素继承 min-width 属性的值。

CSS 教程: CSS Dimension

CSS 参考手册: max-width 属性

CSS3 nav-down 属性

实例

规定在使用方向键时向何处导航：

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
nav-down	不兼容	不兼容	不兼容	不兼容	Supported in Opera 11.5-12. 不兼容于更新版本的浏览器

属性定义及使用说明

nav-down 属性规定当使用 nav-down 导航键时，向何处进行导航。

默认值：	auto
继承：	no
版本：	CSS3
JavaScript 语法：	object.style.navDown="#div2"

语法

nav-down: auto|id|target-name|inherit;

值	说明
auto	浏览器决定导航到哪个元素。
id	规定被导航元素的 id。
target-name	规定被导航的目标框架。
inherit	规定应从父元素继承 nav-down 属性的值。

CSS3 nav-index 属性

实例

指定两个按钮的Tab键顺序：

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
nav-index	不兼容	不兼容	不兼容	不兼容	Supported in Opera 11.5-12. 不兼容于更新版本的浏览器

属性定义及使用说明

nav-index属性指定了连续的导航元素的顺序（"Tab键顺序"）。

默认值：	auto
继承：	no
版本：	CSS3
JavaScript 语法：	object.style.navIndex=2

语法

nav-index: auto|number|inherit;

值	说明
auto	浏览器指派的元素的Tab键顺序
number	表示该元素的Tab键顺序。 1意味着首先
inherit	指定nav- index属性的值应该从父元素继承

CSS3 nav-left 属性

实例

指定导航使用向左箭头和右箭头导航键：

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
nav-right	不兼容	不兼容	不兼容	不兼容	Supported in Opera 11.5-12. 不兼容于更新版本的浏览器

属性定义及使用说明

nav-left的属性指定使用箭头向左导航键导航。

默认值：	auto
继承：	no
版本：	CSS3
JavaScript 语法：	object.style.navLeft="#div2"

语法

nav-left: auto|id|target-name|inherit;

值	说明
auto	浏览器将决定哪个元素导航
id	指定导航到该元素的ID
target-name	指定导航到目标帧
inherit	指定nav-left属性的值，应该从父元素继承

CSS 参考手册

实例

规定在使用方向键时向何处导航：

button#b1{top:20%;left:25%;nav-index:1;nav-right:#b2;nav-left:#b4;nav-down:#b2;nav-up:#b4;}button#b2{top:40%;left:50%;nav-index:2;nav-right:#b3;nav-left:#b1;nav-down:#b3;nav-up:#b1;}button#b3{top:70%;left:25%;nav-index:3;nav-right:#b4;nav-left:#b2;nav-down:#b4;nav-up:#b2;}button#b4{top:40%;left:0%;nav-index:4;nav-right:#b1;nav-left:#b3;nav-down:#b1;nav-up:#b3;}

亲自试一试

浏览器支持

目前只有 Opera 支持 nav-right 属性。

定义和用法

nav-right 属性规定当使用 nav-right 导航键时，向何处进行导航。

默认值：	auto
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.navRight="#div2"

语法

nav-right: auto|id|target-name|inherit;

值	描述
auto	浏览器决定导航到哪个元素。
id	规定被导航元素的 id。
target-name	规定被导航的目标框架。
inherit	规定应从父元素继承 nav-right 属性的值。

CSS 参考手册

实例

规定在使用方向键时向何处导航：

button#b1{top:20%;left:25%;nav-index:1;nav-right:#b2;nav-left:#b4;nav-down:#b2;nav-up:#b4;}button#b2{top:40%;left:50%;nav-index:2;nav-right:#b3;nav-left:#b1;nav-down:#b3;nav-up:#b1;}button#b3{top:70%;left:25%;nav-index:3;nav-right:#b4;nav-left:#b2;nav-down:#b4;nav-up:#b2;}button#b4{top:40%;left:0%;nav-index:4;nav-right:#b1;nav-left:#b3;nav-down:#b1;nav-up:#b3;}

亲自试一试

浏览器支持

目前只有 Opera 支持 nav-up 属性。

定义和用法

nav-up 属性规定当使用 nav-up 导航键时，向何处进行导航。

默认值：	auto
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.navUp="#div2"

语法

nav-up: auto|id|target-name|inherit;

值	描述
auto	浏览器决定导航到哪个元素。
id	规定被导航元素的 id。
target-name	规定被导航的目标框架。
inherit	规定应从父元素继承 nav-up 属性的值。

CSS 参考手册

CSS3 opacity 属性

实例

设置一个div元素的透明度级别：

div
{
opacity:0.5;
}

尝试一下 »
在此页底部有更多的例子。

浏览器支持

所有主流浏览器都支持opacity属性。.

注意：IE8和早期版本支持另一种过滤器属性。像：filter:Alpha(opacity=50)

属性定义及使用说明

Opacity属性设置一个元素了透明度级别。

默认值：	1
继承：	no
版本：	CSS3
JavaScript 语法：	object.style.opacity=0.5

语法

opacity: value|inherit;

值	描述
value	指定不透明度。从0.0（完全透明）到1.0（完全不透明）
inherit	Opacity属性的值应该从父元素继承

CSS order 属性

CSS 参考手册

实例

设置弹性盒对象元素的顺序：

div#myRedDIV {order:2;}
div#myBlueDIV {order:4;}
div#myGreenDIV {order:3;}
div#myPinkDIV {order:1;}

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。

属性
order	29.0 21.0 -webkit-	11.0	28.0 18.0 -moz-	9.0 6.1 -webkit-	17.0

定义和用法

order 属性设置或检索弹性盒模型对象的子元素出现的順序。。

注意：如果元素不是弹性盒对象的元素，则 order 属性不起作用。

默认值：	0
继承：	否
可动画化：	是，参见个别的属性。请参阅可动画化（animatable）。尝试一下
版本：	CSS3
JavaScript 语法：	object.style.order="2"尝试一下

CSS 语法

order: number|initial|inherit;

属性值

值	描述
number	默认值是 0。规定灵活项目的顺序。
initial	设置该属性为它的默认值。请参阅 initial。
inherit	从父元素继承该属性。请参阅 inherit。

CSS 参考手册：flex 属性

CSS 参考手册：flex-basis 属性

CSS 参考手册：flex-direction 属性

CSS 参考手册：flex-flow 属性

CSS 参考手册：flex-grow 属性

CSS 参考手册：flex-shrink 属性

CSS 参考手册：flex-wrap 属性

CSS 参考手册：align-content 属性

CSS 参考手册：align-items 属性

CSS 参考手册：align-self 属性

CSS 参考手册

CSS outline 属性

实例

设置元素周围的轮廓：

p
{
outline:#00FF00 dotted thick;
}

尝试一下 »

属性定义及使用说明

outline（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

outline简写属性在一个声明中设置所有的轮廓属性。

可以设置的属性分别是（按顺序）：outline-color, outline-style, outline-width

如果不设置其中的某个值，也不会出问题，比如 outline:solid #ff0000; 也是允许的。

默认值：	invert none medium
继承：	no
版本：	CSS2
JavaScript 语法：	object.style.outline="#0000FF dotted thin"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
outline	1.0	8.0	1.5	1.2	7.0

属性值

值	描述
outline-color	规定边框的颜色。参阅：outline-color 中可能的值。
outline-style	规定边框的样式。参阅：outline-style 中可能的值。
outline-width	规定边框的宽度。参阅：outline-width 中可能的值。
inherit	规定应该从父元素继承 outline 属性的设置。

CSS 教程: CSS Outline

CSS outline-color 属性

实例

设置一个虚线轮廓的颜色：

p
{
outline-style:dotted;
outline-color:#00ff00;
}

尝试一下 »

属性定义及使用说明

outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围。

outline-color属性指定轮廓颜色。

注意： 请始终在 outline-color 属性之前声明 outline-style 属性。元素只有获得轮廓以后才能改变其轮廓的颜色。

默认值：	invert
继承：	no
版本：	CSS2
JavaScript 语法：	object.style.outlineColor="#00FF00"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
outline-color	1.0	8.0	1.5	1.2	7.0

提示和注释

outline是围绕元素。它是围绕元素的边距。但是，它是来自不同的边框属性。

outline不是元素尺寸的一部分，因此元素的宽度和高度属性不包含轮廓的宽度。

属性值

值	描述
color	指定轮廓颜色。在CSS颜色值寻找颜色值的完整列表。
invert	默认。执行颜色反转（逆向的颜色）。可使轮廓在不同的背景颜色中都是可见。
inherit	规定应该从父元素继承轮廓颜色的设置。

CSS 教程: CSS Outline

CSS 参考手册: outline 属性

CSS3 outline-offset 属性

实例

指定外边框边缘的轮廓15px：

div
{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
outline-offset	4.0	不兼容	3.5	3.1	10.5

属性定义及使用说明

outline-offset属性设置轮廓框架在 border 边缘外的偏移

Outlines在两个方面不同于边框：

Outlines 不占用空间
Outlines 可能非矩形

默认值：	0
继承：	no
版本：	CSS3
JavaScript 语法：	object.style.outlineOffset="15px"

语法

outline-offset: length|inherit:

值	描述
length	轮廓与边框边缘的距离。
inherit	规定应从父元素继承 outline-offset 属性的值。

CSS3 教程: CSS3 User Interface

CSS outline-style 属性

实例

设置outline的样式：

p
{
outline-style:dotted;
}

尝试一下 »

在此页底部有更多的例子。

属性定义及使用说明

outline（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围。

outline-style属性指定outline的样式。

默认值：	none
继承：	no
版本：	CSS2
JavaScript 语法：	object.style.outlineStyle="dotted"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
outline-style	1.0	8.0	1.5	1.2	7.0

提示和注释

outline是围绕元素。它是围绕元素的边距。但是，它是来自不同的边框属性。

outline不是元素尺寸的一部分，因此元素的宽度和高度属性不包含轮廓的宽度。

属性值

值	描述
none	默认。定义无轮廓。
dotted	定义点状的轮廓。
dashed	定义虚线轮廓。
solid	定义实线轮廓。
double	定义双线轮廓。双线的宽度等同于 outline-width 的值。
groove	定义 3D 凹槽轮廓。此效果取决于 outline-color 值。
ridge	定义 3D 凸槽轮廓。此效果取决于 outline-color 值。
inset	定义 3D 凹边轮廓。此效果取决于 outline-color 值。
outset	定义 3D 凸边轮廓。此效果取决于 outline-color 值。
inherit	规定应该从父元素继承轮廓样式的设置。

CSS outline-width 属性

实例

设置轮廓的宽度：

p
{
outline-style:dotted;
outline-width:5px;
}

尝试一下 »

属性定义及使用说明

outline（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围。

outline-width指定轮廓的宽度。

注意： 请始终在outline-wicth属性之前声明outline-style属性。元素只有获得轮廓以后才能改变其轮廓的宽度。

默认值：	medium
继承：	no
版本：	CSS2
JavaScript 语法：	object.style.outlineWidth="thin"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
outline-width	1.0	8.0	1.5	1.2	7.0

提示和注释

outline是围绕元素。它是围绕元素的边距。但是，它是来自不同的边框属性。

outline不是元素尺寸的一部分，因此元素的宽度和高度属性不包含轮廓的宽度。

属性值

值	描述
thin	规定细轮廓。
medium	默认。规定中等的轮廓。
thick	规定粗的轮廓。
length	允许您规定轮廓粗细的值。
inherit	规定应该从父元素继承轮廓宽度的设置。

CSS 教程: CSS Outline

CSS 参考手册: outline 属性

CSS overflow 属性

实例

设置overflow属性进行滚动：

div
{
width:150px;
height:150px;
overflow:scroll;
}

尝试一下 »

属性定义及使用说明

overflow属性指定如果内容溢出一个元素的框，会发生什么。

默认值：	visible
继承：	no
版本：	CSS2
JavaScript 语法：	object.style.overflow="scroll"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
overflow	1.0	4.0	1.0	1.0	7.0

注意：在X Lion(Mac OS),滚动条显示默认是隐藏的,只有当被使用(即使"overflow:scroll"已设置)。

属性值

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

CSS 教程: CSS Positioning

CSS 参考手册

实例

裁剪 div 元素中内容的左/右边缘 - 如果溢出元素的内容区域的话：

div{overflow-x:hidden;}

亲自试一试

浏览器支持

所有主流浏览器都支持 overflow-x 属性。

注释：overflow-x 属性无法在 IE8 以及更早的浏览器正确地工作。

定义和用法

overflow-x 属性规定是否对内容的左/右边缘进行裁剪 - 如果溢出元素内容区域的话。

提示：使用 overflow-y 属性来确定对上/下边缘的裁剪。

默认值：	visible
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.overflowX="scroll"

语法

overflow-x: visible|hidden|scroll|auto|no-display|no-content;

值	描述	测试
visible	不裁剪内容，可能会显示在内容框之外。	测试
hidden	裁剪内容 - 不提供滚动机制。	测试
scroll	裁剪内容 - 提供滚动机制。	测试
auto	如果溢出框，则应该提供滚动机制。	测试
no-display	如果内容不适合内容框，则删除整个框。	测试
no-content	如果内容不适合内容框，则隐藏整个内容。	测试

CSS 参考手册

实例

裁剪 div 元素中内容的上/下边缘 - 如果溢出元素的内容区域的话：

div{overflow-y:hidden;}

亲自试一试

浏览器支持

所有主流浏览器都支持 overflow-y 属性。

注释：overflow-y 属性无法在 IE8 以及更早的浏览器正确地工作。

定义和用法

overflow-y 属性规定是否对内容的上/下边缘进行裁剪 - 如果溢出元素内容区域的话。

提示：使用 overflow-x 属性来确定对左/右边缘的裁剪。

默认值：	visible
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.overflowY="scroll"

语法

overflow-y: visible|hidden|scroll|auto|no-display|no-content;

值	描述	测试
visible	不裁剪内容，可能会显示在内容框之外。	测试
hidden	裁剪内容 - 不提供滚动机制。	测试
scroll	裁剪内容 - 提供滚动机制。	测试
auto	如果溢出框，则应该提供滚动机制。	测试
no-display	如果内容不适合内容框，则删除整个框。	测试
no-content	如果内容不适合内容框，则隐藏整个内容。	测试

CSS 参考手册

CSS padding 属性

实例

设置一个P元素的填充：

p
{
padding:2cm 4cm 3cm 4cm;
}

尝试一下 »

属性定义及使用说明

padding 简写属性在一个声明中设置所有填充属性。该属性可以有1到4个值。

实例:

padding:10px 5px 15px 20px;
- 上填充是 10px
- 右填充是 5px
- 下填充是 15px
- 左填充是 20px
padding:10px 5px 15px;
- 上填充是 10px
- 右填充和左填充是 5px
- 下填充是 15px
padding:10px 5px;
- 上填充和下填充是 10px
- 右填充和左填充是 5px
padding:10px;
- 所有四个填充都是 10px

注意： 负值是不允许的。

默认值：	0
继承：	no
版本：	CSS1
JavaScript 语法：	object.style.padding="10px 5px"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
padding	1.0	4.0	1.0	1.0	3.5

属性值

值	说明
length	规定以具体单位计的填充值，比如像素、厘米等。默认值是 0px
%	规定基于父元素的宽度的百分比的填充
inherit	指定应该从父元素继承padding

CSS 教程: CSS Padding

CSS padding-bottom 属性

实例

设置一个P元素的底部填充：p>

p
{
padding-bottom:2cm;
}

尝试一下 »

属性定义及使用说明

padding-bottom属性设置元素的底部内边距（底部空白）。

注意： 负值是不允许的。

默认值：	0
继承：	no
版本：	CSS1
JavaScript 语法：	object.style.paddingBottom="2cm"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
padding-bottom	1.0	4.0	1.0	1.0	3.5

属性值

值	描述
length	规定以具体单位计的固定的下内边距值，比如像素、厘米等。默认值是 0px。
%	定义基于父元素宽度的百分比下内边距。此值不会如预期地那样工作于所有的浏览器中。
inherit	规定应该从父元素继承下内边距。

CSS 教程: CSS Padding

CSS padding-left 属性

实例

设置一个P元素的左部填充：

p
{
padding-left:2cm;
}

尝试一下 »

属性定义及使用说明

padding-left属性设置一个元素的左内边距（空格）。

注意： 负值是不允许的。

默认值：	0
继承：	no
版本：	CSS1
JavaScript 语法：	object.style.paddingLeft="2cm"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
padding-bottom	1.0	4.0	1.0	1.0	3.5

属性值

值	描述
length	规定以具体单位计的固定的左内边距值，比如像素、厘米等。默认值是 0px。
%	定义基于父元素宽度的百分比左内边距。此值不会如预期地那样工作于所有的浏览器中。
inherit	规定应该从父元素继承左内边距。

CSS 教程: CSS Padding

CSS padding-right Property

实例

设置一个P元素的右部填充：

p
{
padding-right:2cm;
}

尝试一下 »

属性定义及使用说明

padding-right属性设置一个元素的右内边距（空白）。

注意： 负值是不允许的。

默认值：	0
继承：	no
版本：	CSS1
JavaScript 语法：	object.style.paddingRight="2cm"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
padding-bottom	1.0	4.0	1.0	1.0	3.5

属性值

值	描述
length	规定以具体单位计的固定的右内边距值，比如像素、厘米等。默认值是 0px。
%	定义基于父元素宽度的百分比右内边距。此值不会如预期地那样工作于所有的浏览器中。
inherit	规定应该从父元素继承右内边距。

CSS 教程: CSS Padding

CSS padding-top 属性

实例

设置一个P元素的顶部填充：

p
{
padding-top:2cm;
}

尝试一下 »

属性定义及使用说明

padding-top属性设置一个元素的顶部内边距（空白）。

注意： 负值是不允许的。

默认值：	0
继承：	no
版本：	CSS1
JavaScript 语法：	object.style.paddingTop="2cm"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
padding-bottom	1.0	4.0	1.0	1.0	3.5

属性值

值	描述
length	规定以具体单位计的固定的上内边距值，比如像素、厘米等。默认值是 0px。
%	定义基于父元素宽度的百分比上内边距。此值不会如预期的那样工作于所有的浏览器中。
inherit	规定应该从父元素继承上内边距。

CSS 教程: CSS Padding

CSS page-break-after 属性

实例

设置在表格元素之后始终进行分页的分页行为：

<html>
<head>
<style>
@media print
{
table {page-break-after:always}
}
</style>
</head>

<body>
....
</body>
</html>

属性定义及使用说明

page-break-after 属性设置元素后的 page-breaking 行为。

注意： 您不能对绝对定位的元素使用此属性。

注意： 请尽可能少地使用分页属性，并且避免在表格、浮动元素、带有边框的块元素中使用分页属性。

默认值：	auto
继承：	no
版本：	CSS2
JavaScript 语法：	object.style.pageBreakAfter="always"

浏览器支持

所有主要浏览器都支持page-break-after属性。

注意： 任何版本的Internet Explorer（包括IE8）支持属性值"left"，"right"，和"inherit"。

注意： Firefox，Chrome和Safari不支持属性值"avoid"，"left"和"right"。.

属性值

值	描述
auto	默认。如果必要则在元素后插入分页符。
always	在元素后插入分页符。
avoid	避免在元素后插入分页符。
left	在元素之后足够的分页符，一直到一张空白的左页为止。
right	在元素之后足够的分页符，一直到一张空白的右页为止。
inherit	规定应该从父元素继承 page-break-after 属性的设置。

CSS page-break-before 属性

实例

设置在表格元素之前始终进行分页的分页行为：

<html>
<head>
<style>
@media print
{
h1 {page-break-before:always}
}
</style>
</head>

<body>
....
</body>
</html>

属性定义及使用说明

page-break-before 属性设置元素前的 page-breaking 行为。

注意： 您不能对绝对定位的元素使用此属性。

注意：请尽可能少地使用分页属性，并且避免在表格、浮动元素、带有边框的块元素中使用分页属性。

默认值：	auto
继承：	no
版本：	CSS2
JavaScript 语法：	object.style.pageBreakBefore="always"

浏览器支持

所有主要浏览器都支持page-break-before属性。

注意： 任何版本的Internet Explorer（包括IE8）支持属性值"left"，"right"，和"inherit"。

注意： Firefox,Chrome和Safari不支持属性值"avoid"，"left"和"right"。

属性值

值	描述
auto	默认值。如果必要则在元素前插入分页符。
always	在元素前插入分页符。
avoid	避免在元素前插入分页符。
left	在元素之前足够的分页符，一直到一张空白的左页为止。
right	在元素之前足够的分页符，一直到一张空白的右页为止。
inherit	规定应该从父元素继承 page-break-before 属性的设置。

CSS 参考手册

实例

设置在表格元素内部避免进行分页的分页行为：

<html><head><style>@media print{table {page-break-inside:avoid;}}</style></head><body>....</body></html>

浏览器支持

只有 Opera 浏览器支持 page-break-inside 属性。

定义和用法

page-break-inside 属性设置元素内部的 page-breaking 行为。

尽管可以用 always 强制放上分页符，但是无法保证避免分页符的插入，创作人员最多只能要求用户代理尽可能避免插入分页。

应用于：position 值为 relative 或 static 的非浮动块级元素。

注释：请尽可能少地使用分页属性，并且避免在表格、浮动元素、带有边框的块元素中使用分页属性。

默认值：	auto
继承性：	no
版本：	CSS2
JavaScript 语法：	object.style.pageBreakInside="avoid"

可能的值

值	描述
auto	默认。如果必要则在元素内部插入分页符。
avoid	避免在元素内部插入分页符。
inherit	规定应该从父元素继承 page-break-inside 属性的设置。

实例

设置元素被查看位置的视图：

div{perspective: 500;-webkit-perspective: 500; /* Safari 和 Chrome */}

亲自试一试

浏览器支持

目前浏览器都不支持 perspective 属性。

Chrome 和 Safari 支持替代的 -webkit-perspective 属性。

定义和用法

perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。

当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

注释：perspective 属性只影响 3D 转换元素。

提示：请与 perspective-origin 属性一同使用该属性，这样您就能够改变 3D 元素的底部位置。

默认值：	none
继承性：	yes
版本：	CSS3
JavaScript 语法：	object.style.perspective=500

语法

perspective: number|none;

值	描述
number	元素距离视图的距离，以像素计。
none	默认值。与 0 相同。不设置透视。

CSS 参考手册

CSS3 perspective-origin 属性

实例

设置一个3D元素的基数位置：

div
{
perspective:150;
perspective-origin: 10% 10%;
-webkit-perspective:150; /* Safari and Chrome */
-webkit-perspective-origin: 10% 10%; /* Safari and Chrome */
}

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
perspective-origin	36.0 12.0 -webkit-	10.0	16.0 10.0 -moz-	9.0 4.0.3 -webkit-	23.0 15.0 -webkit-

属性定义及使用说明

perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。

定义时的perspective -Origin属性，它是一个元素的子元素，透视图，而不是元素本身。

注意： 对于Chrome和Safari用户：为了更好地理解perspective属性!

对于 Chrome 和 Safari 用户: 为了更好地理解perspective-Origin属性，请查看查看实例.

默认值：	50% 50%
继承：	no
版本：	CSS3
JavaScript 语法：	object.style.perspectiveOrigin="10% 10%"

语法

perspective-origin: x-axis y-axis;

值

描述

x-axis

定义该视图在 x 轴上的位置。默认值：50%。

可能的值：

left
center
right
length
%

y-axis

定义该视图在 y 轴上的位置。默认值：50%。

可能的值：

top
center
bottom
length
%

CSS position 属性

实例

定位<h2>元素：

h2
{
position:absolute;
left:100px;
top:150px;
}

尝试一下 »

在此页底部有更多的例子。

属性定义及使用说明

position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。

默认值：	static
继承：	no
版本：	CSS2
JavaScript 语法：	object.style.position="absolute"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
position	1.0	7.0	1.0	1.0	4.0

属性值

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。
initial	设置该属性为默认值，详情查看 CSS initial 关键字。

CSS3 punctuation-trim 属性

实例

在p元素在每一行的开头放置开头标点符号：

p
{
punctuation-trim:start;
}

浏览器支持

T任何主流浏览器都不支持punctuation-trim属性。

属性定义及使用说明

punctuation-trim属性指定是否应修饰，当它出现在一条线，或相邻的另一个全形标点符号字符开头或结束标点字符。

默认值：	none
继承：	yes
版本：	CSS3
JavaScript 语法：	object.style.punctuationTrim="start"

语法

punctuation-trim: none|start|end|allow-end|adjacent;

值	说明
none	请勿修剪打开或关闭标点符号
start	在每一行的开头放置开头标点符号
end	在每一行的末尾修剪结束标点符号
allow-end	如果另有不适合之前的理由，修剪每行末尾的结束标点符号。
adjacent	若以前相邻字符修剪开口punctuation是一个全形开口，中间或结束标点符号，或表意文字空间。修剪结束标点符号，如果下一个相邻的字符是一个全形关闭或中间punctuation，或表意文字空间

CSS quotes 属性

实例

设置嵌套引用的引号类型：

q:lang(en)
{
quotes: "ï¿½" "ï¿½" "'" "'";
}

尝试一下 »

属性定义及使用说明

quotes属性设置嵌套引用的引号类型。

默认值：	not specified
继承：	yes
版本：	CSS2
JavaScript 语法：	object.style.quotes="none"

浏览器支持

所有主流浏览器都支持quotes属性。

注意：IE8需要定义！DOCTYPE才支持quotes属性。

属性值

值

描述

none

规定 "content" 属性的 "open-quote" 和 "close-quote" 的值不会产生任何引号。

string string string string

定义要使用的引号。

前两个值规定第一级引用嵌套，后两个值规定下一级引号嵌套。

inherit

规定应该从父元素继承 quotes 属性的值。

引号字符

效果	说明	实体编号
"	双引号	"
'	单引号	'
‹	单一的左尖括号	‹
›	单一的右尖括号	›
«	双的左尖括号	«
»	双的右尖括号	»
'	左引号(单 high-6)	‘
'	右引号(单 high-9)	’
"	左引号(双 high-6)	“
"	右引号(双 high-9)	”
„	双引号 (双 low-9)	„

CSS3 resize 属性

实例

指定一个div元素，允许用户调整大小：

div
{
resize:both;
overflow:auto;
}

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
resize	4.0	不兼容	5.0 4.0 -moz-	4.0	15.0

属性定义及使用说明

resize属性指定一个元素是否是由用户调整大小的。

注意：resize属性适用于计算其他元素的溢出值是不是"visible"。

默认值：	none
继承：	no
版本：	CSS3
JavaScript 语法：	object.style.resize="both"

语法

resize: none|both|horizontal|vertical:

值	描述
none	用户无法调整元素的尺寸。
both	用户可调整元素的高度和宽度。
horizontal	用户可调整元素的宽度。
vertical	用户可调整元素的高度。

CSS3 教程: CSS3 用户界面

CSS right 属性

实例

把图像的右边缘设置在其包含元素右边缘向左 5 像素的位置：

img
{
position:absolute;
right:5px;
}

尝试一下 »

属性定义及使用说明

right 属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。

注意： 如果 "position" 属性的值为 "static"，那么设置 "right" 属性不会产生任何效果。

默认值：	auto
继承：	no
版本：	CSS2
JavaScript 语法：	object.style.right="50px"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
right	1.0	5.5	1.0	1.0	5.0

属性值

值	描述
auto	默认值。通过浏览器计算右边缘的位置。
%	设置以包含元素的百分比计的右边位置。可使用负值。
length	使用 px、cm 等单位设置元素的右边位置。可使用负值。
inherit	规定应该从父元素继承 right 属性的值。

CSS 教程: CSS Positioning

CSS 参考手册

实例

将 h1 元素旋转 180 度（从上向下）：

h1{rotation-point:50% 50%;rotation:180deg;}

亲自试一试

浏览器支持

目前没有浏览器支持 rotation 属性。

定义和用法

rotation 属性围绕由 rotation-point 属性定义的指定点，对块级元素进行逆时针旋转。

提示：边框、内边距、内容以及背景（非固定）也会被旋转！

默认值：	0
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.rotation="180deg"

语法

rotation: angle;

值	描述
angle	元素旋转角度。可能的值：0deg 到 360deg。

CSS 参考手册

CSS tab-size 属性

CSS 参考手册

实例

设置一个 <pre> 元素的 tab-size：

pre {tab-size: 16; }
pre {-moz-tab-size: 16; } /* 针对 Firefox 的代码 */
pre {-o-tab-size: 16; } /* 针对 Opera 的代码 */

尝试一下 »

浏览器支持

目前只有 Chrome 支持 tab-size 属性。

Firefox 支持另一个可替代该属性的属性，即 -moz-tab-size 属性。

Opera 支持另一个可替代该属性的属性，即 -o-tab-size 属性。

目前没有浏览器支持该值作为长度单位。

定义和用法

tab-size 属性规定制表符（tab）字符的空格长度。

在 HTML 中，制表符（tab）字符通常显示为一个单一的空格字符，除了一些元素，比如 <textarea> 和 <pre>，tab-size 属性的结果只对这些元素有效。

默认值：	8
继承：	是
可动画化：	否。请参阅可动画化（animatable）。
版本：	CSS3
JavaScript 语法：	object.style.tabSize="16"尝试一下

CSS 语法

tab-size: number|length|initial|inherit;

属性值

值	描述	测试
number	默认值是 8。规定每个制表符（tab）字符要显示的空格字符的数量。	测试 »
length	规定制表符（tab）字符的长度。几乎所有的主流浏览器都不支持该属性值。
initial	设置该属性为它的默认值。请参阅 initial。	测试 »
inherit	从父元素继承该属性。请参阅 inherit。

CSS 参考手册

CSS table-layout 属性

实例

设置表格的布局算法：

table
{
table-layout:fixed;
}

尝试一下 »

属性定义及使用说明

table-layout属性为表设置表格布局算法。

默认值：	auto
继承：	no
版本：	CSS2
JavaScript 语法：	object.style.tableLayout="fixed"

浏览器支持

所有主流浏览器都支持table-layout属性。

注意： IE7和更早的版本不支持"inherit"的值。IE8需要定义！DOCTYPE。IE9支持"inherit"。

属性值

值	描述
auto	默认。列宽度由单元格内容设定。
fixed	列宽由表格宽度和列宽度设定。
inherit	规定应该从父元素继承 table-layout 属性的值。

CSS 教程: CSS 表格

CSS 参考手册

实例

在新窗口中打开所有超链接，并在所有其他标签页/窗口上面放置新窗口：

a{target:new front;}

亲自试一试

浏览器支持

目前没有浏览器支持 target。

定义和用法

target 属性是一个简写属性，用于设置以下属性：

target-name
target-new
target-position

默认值：	current window above
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.target="new front"

语法

target: target-name target-new target-position;

值	描述
target-name	规定在何处打开超链接（target destination）。
target-new	规定应该在新窗口或已有窗口的新标签页中打开超链接。
target-position	规定在何处放置新的目的地链接。

注释：target-new 和 target-position 值只有在 target-name 值创建新标签页或新窗口中有效。

CSS 参考手册

实例

在新窗口中打开所有超链接：

a{target-name:new;}

浏览器支持

目前没有浏览器支持 target-name。

定义和用法

target-name 属性规定在何处打开超链接 (target destination)。

默认值：	current
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.targetName="new"

语法

target-name: current|root|parent|new|modal|name;

值	描述
current	在链接所在的框架、标签页或窗口中打开超链接。
root	在当前标签页或窗口中超链接。
parent	在父框架中打开超链接。如果当前框架没有父框架，则将该值视作 root。
new	创建新的目的地（参阅 target-new）。
modal	在新的（暂时创建的）模态窗口中打开新窗口。
name	在已有框架、窗口或标签页中打开链接。如果 name 目的地不存在，则用该名称创建新的目的地。

CSS 参考手册

实例

在新标签页而不是新窗口中打开超链接：

a{target-name:new;target-new:tab;}

浏览器支持

目前没有浏览器支持 target-new。

定义和用法

target-new 属性规定在新窗口还是新标签页或已有窗口中打开新的目的地链接。

注释：target-new 属性只有在 target-name 属性创建新标签页或新窗口时有效。

默认值：	window
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.targetNew="tab"

语法

target-new: window|tab|none;

值	描述
window	在新窗口中打开超链接。
tab	在已有窗口的新标签页中打开超链接。
none	不创建新的目的地。

CSS 参考手册

实例

在新窗口中打开超链接，并在所有其他标签页/窗口之前放置新的窗口：

a{target-name:new;target-position:front;}

浏览器支持

目前没有浏览器支持 target-position。

定义和用法

target-position 属性规定在何处放置新的目的地链接。

注释：target-position 属性只有在 target-name 属性创建新标签页或新窗口时有效。

默认值：	above
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.targetPosition="front"

语法

target-position: above|behind|front|back;

值	描述
above	在当前标签页/窗口之前放置新的目的地标签页/窗口。
behind	在当前标签页/窗口之后放置新的目的地标签页/窗口。
front	在所有其他标签页/窗口之前放置新的目的地标签页/窗口。
back	在所有其他标签页/窗口之后放置新的目的地标签页/窗口。

CSS 参考手册

CSS text-align 属性

实例

h1, h2, 和 h3元素设置文本的对齐方式：

h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}

尝试一下 »

在此页底部有更多的例子。

属性定义及使用说明

text-align属性指定元素文本的水平对齐方式。

默认值：	left if direction is ltr, and right if direction is rtl
继承：	yes
版本：	CSS1
JavaScript 语法：	object.style.textAlign="right"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
text-align	1.0	3.0	1.0	1.0	3.5

属性值

值	描述
left	把文本排列到左边。默认值：由浏览器决定。
right	把文本排列到右边。
center	把文本排列到中间。
justify	实现两端对齐文本效果。
inherit	规定应该从父元素继承 text-align 属性的值。

CSS text-align-last 属性

CSS 参考手册

实例

把段落的最后一行向右对齐：

p
{
text-align: justify;
text-align-last: right;
-moz-text-align-last: right; } /* 针对 Firefox 的代码 */
}

尝试一下 »

浏览器支持

只有 Internet Explorer 支持 text-align-last 属性。

Firefox 支持另一个可替代该属性的属性，即 -moz-text-align-last 属性。

Internet Explorer 不支持 "start" 和 "end" 值。

定义和用法

text-align-last 属性规定如何对齐文本的最后一行。

注意：text-align-last 属性只有在 text-align 属性设置为 "justify" 时才起作用。

默认值：	auto
继承：	是
可动画化：	否。请参阅可动画化（animatable）。
版本：	CSS3
JavaScript 语法：	object.style.textAlignLast="right"尝试一下

CSS 语法

属性值

值	描述	测试
auto	默认值。最后一行被调整，并向左对齐。	测试 »
left	最后一行向左对齐。	测试 »
right	最后一行向右对齐。	测试 »
center	最后一行居中对齐。	测试 »
justify	最后一行被调整为两端对齐。	测试 »
start	最后一行在行开头对齐（如果 text-direction 是从左到右，则向左对齐；如果 text-direction 是从右到左，则向右对齐）。	测试 »
end	最后一行在行末尾对齐（如果 text-direction 是从左到右，则向右对齐；如果 text-direction 是从右到左，则向左对齐）。	测试 »
initial	设置该属性为它的默认值。请参阅 initial。	测试 »
inherit	从父元素继承该属性。请参阅 inherit。

CSS 参考手册

CSS text-decoration 属性

实例

设置h1，h2，h3和h4元素文本装饰：

h1 {text-decoration:overline}
h2 {text-decoration:line-through}
h3 {text-decoration:underline}

尝试一下 »

属性定义及使用说明

text-decoration 属性规定添加到文本的修饰。

注意： 修饰的颜色由 "color" 属性设置。

默认值：	none
继承：	no
版本：	CSS1
JavaScript 语法：	object.style.textDecoration="overline"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
text-decoration	1.0	3.0	1.0	1.0	3.5

属性值

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
blink	定义闪烁的文本。
inherit	规定应该从父元素继承 text-decoration 属性的值。

CSS 教程: CSS 文本

CSS text-decoration-color 属性

CSS 参考手册

实例

改变下划线文本中下划线的颜色：

p
{
text-decoration: underline;
text-decoration-color: red;
-moz-text-decoration-color: red; /* 针对 Firefox 的代码 */
}

尝试一下 »

浏览器支持

几乎所有的主流浏览器都不支持 text-decoration-color 属性。

Firefox 支持另一个可替代该属性的属性，即 -moz-text-decoration-color 属性。

定义和用法

text-decoration-color 属性规定文本修饰（下划线 underline、上划线 overline、中划线 line-through）的颜色。

注意：只有在带有可见的 text-decoration 的元素上，text-decoration-color 属性才起作用。

默认值：	currentColor
继承：	否
可动画化：	是。请参阅可动画化（animatable）。尝试一下
版本：	CSS3
JavaScript 语法：	object.style.textDecorationColor="red"尝试一下

CSS 语法

text-decoration-color: color|initial|inherit;

属性值

值	描述	测试
color	规定文本修饰的颜色。	测试 »
initial	设置该属性为它的默认值。请参阅 initial。	测试 »
inherit	从父元素继承该属性。请参阅 inherit。

CSS 参考手册

CSS text-decoration-line 属性

CSS 参考手册

实例

在段落的顶部显示一条线：

p
{
text-decoration-line: overline;
-moz-text-decoration-line: overline; /* 针对 Firefox 的代码 */
}

尝试一下 »

浏览器支持

几乎所有的主流浏览器都不支持 text-decoration-line 属性。

Firefox 支持另一个可替代该属性的属性，即 -moz-text-decoration-line 属性。

定义和用法

text-decoration-line 属性规定文本修饰要使用的线条类型。

注意：您也可以同时使用多个值，比如 underline 和 overline，来在文本的上方和下方都显示线条。

默认值：	none
继承：	否
可动画化：	否。请参阅可动画化（animatable）。
版本：	CSS3
JavaScript 语法：	object.style.textDecorationLine="overline"尝试一下

CSS 语法

属性值

值	描述	测试
none	默认值。规定文本修饰没有线条。	测试 »
underline	规定文本的下方将显示一条线。	测试 »
overline	规定文本的上方将显示一条线。	测试 »
line-through	规定文本的中间将显示一条线。	测试 »
initial	设置该属性为它的默认值。请参阅 initial。	测试 »
inherit	从父元素继承该属性。请参阅 inherit。

CSS 参考手册

CSS text-decoration-style 属性

CSS 参考手册

实例

在段落的下方显示一条波浪线：

p
{
text-decoration: underline;
-moz-text-decoration-style: wavy; /* 针对 Firefox 的代码 */
}

尝试一下 »

浏览器支持

几乎所有的主流浏览器都不支持 text-decoration-style 属性。

Firefox 支持另一个可替代该属性的属性，即 -moz-text-decoration-style 属性。

定义和用法

text-decoration-style 属性规定线条如何显示。

默认值：	solid
继承：	否
可动画化：	否。请参阅可动画化（animatable）。
版本：	CSS3
JavaScript 语法：	object.style.textDecorationStyle="wavy"尝试一下

CSS 语法

属性值

值	描述	测试
solid	默认值。线条将显示为单线。	测试 »
double	线条将显示为双线。	测试 »
dotted	线条将显示为点状线。	测试 »
dashed	线条将显示为虚线。	测试 »
wavy	线条将显示为波浪线。	测试 »
initial	设置该属性为它的默认值。请参阅 initial。	测试 »
inherit	从父元素继承该属性。请参阅 inherit。

CSS 参考手册

CSS text-indent 属性

实例

缩进段落的第一行50像素：

p
{
text-indent:50px;
}

尝试一下 »

属性定义及使用说明

text-indent 属性规定文本块中首行文本的缩进。

注意： 负值是允许的。如果值是负数，将第一行左缩进。

默认值：	0
继承：	yes
版本：	CSS1
JavaScript 语法：	object.style.textIndent="50px"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
text-indent	1.0	3.0	1.0	1.0	3.5

属性值

值	描述
length	定义固定的缩进。默认值：0。
%	定义基于父元素宽度的百分比的缩进。
inherit	规定应该从父元素继承 text-indent 属性的值。

CSS 教程: CSS 文本

CSS3 text-justify 属性

实例

Justification改变字与字之间的间距：

div
{
text-align:justify;
text-justify:inter-word;
}

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

Property
text-justify	不支持	5.5	不支持	不支持	不支持

属性定义及使用说明

text-justify属性指定文本对齐设置为"justify"的理据。

此属性指定应怎样对齐文本以及对齐间距。

默认值：	auto
继承：	yes
版本：	CSS3
JavaScript 语法：	object.style.textJustify="inter-word"

语法

值	描述
auto	浏览器决定齐行算法。
none	禁用齐行。
inter-word	增加/减少单词间的间隔。
inter-ideograph	用表意文本来排齐内容。
inter-cluster	只对不包含内部单词间隔的内容（比如亚洲语系）进行排齐。
distribute	类似报纸版面，除了在东亚语系中最后一行是不齐行的。
kashida	通过拉伸字符来排齐内容。

CSS3 text-outline 属性

实例

设置text-outline（文本-轮廓）:

p.test
{
text-outline: 2px 2px #ff0000;
}

浏览器支持

任何主流浏览器都不支持text-outline属性。

属性定义及使用说明

text-outline属性指定文字大纲。

默认值：	none
继承：	yes
版本：	CSS3
JavaScript 语法：	object.style.textOutline="2px 2px #ff0000"

语法

text-outline: thickness blur color;

值	描述
thickness	必需。轮廓的粗细。
blur	可选。轮廓的模糊半径。
color	必需。轮廓的颜色。参阅 CSS 颜色值。

CSS3 text-overflow 属性

实例

使用text-overflow属性：

div.test
{
text-overflow:ellipsis;
}

尝试一下 »
在此页底部有更多的例子。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
text-overflow	4.0	6.0	7.0	3.1	11.0 9.0 -o-

属性定义及使用说明

text-overflow属性指定当文本溢出包含它的元素，应该发生什么。

默认值：	clip
继承：	no
版本：	CSS3
JavaScript 语法：	object.style.textOverflow="ellipsis"

语法

text-overflow: clip|ellipsis|string;

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

实例

基础的文本阴影效果：

h1{text-shadow: 5px 5px 5px #FF0000;}

亲自试一试

页面底部有更多实例。

浏览器支持

IE	Firefox	Chrome	Safari	Opera

所有主流浏览器都支持 text-shadow 属性。

注释：Internet Explorer 9 以及更早版本的浏览器不支持 text-shadow 属性。

定义和用法

text-shadow 属性向文本设置阴影。

默认值：	none
继承性：	yes
版本：	CSS3
JavaScript 语法：	object.style.textShadow="2px 2px #ff0000"

语法

text-shadow: h-shadow v-shadow blur color;

值	描述	测试
h-shadow	必需。水平阴影的位置。允许负值。	测试
v-shadow	必需。垂直阴影的位置。允许负值。	测试
blur	可选。模糊的距离。	测试
color	可选。阴影的颜色。参阅 CSS 颜色值。	测试

亲自试一试 - 实例

带有模糊效果的文本阴影: 该例演示带有模糊效果的文本阴影。
白色文本上的阴影: 本例演示白色文本上的文本阴影。
霓虹灯效果的文本阴影: 本例演示带有霓虹灯效果的文本阴影。

实例

转换不同元素中的文本：

h1 {text-transform:uppercase;}
h2 {text-transform:capitalize;}
p {text-transform:lowercase;}

尝试一下 »

属性定义及使用说明

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

默认值：	none
继承：	yes
版本：	CSS1
JavaScript 语法：	object.style.textTransform="uppercase"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
animation-duration	43.0 3.0 -webkit-	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.0 -o-

属性值

值	描述
none	默认。定义带有小写字母和大写字母的标准的文本。
capitalize	文本中的每个单词以大写字母开头。
uppercase	定义仅有大写字母。
lowercase	定义无大写字母，仅有小写字母。
inherit	规定应该从父元素继承 text-transform 属性的值。

CSS 参考手册

实例

不允许换行：

p.test {text-wrap:none;}

亲自试一试

浏览器支持

目前主流浏览器都不支持 text-wrap 属性。

定义和用法

text-wrap 属性规定文本的换行（折行）规则。

默认值：	normal
继承性：	yes
版本：	CSS3
JavaScript 语法：	object.style.textWrap="none"

语法

text-wrap: normal|none|unrestricted|suppress;

值	描述
normal	只在允许的换行点进行换行。
none	不换行。元素无法容纳的文本会溢出。
unrestricted	在任意两个字符间换行。
suppress	压缩元素中的换行。浏览器只在行中没有其他有效换行点时进行换行。

CSS 参考手册

CSS top 属性

实例

把图像的上边缘设置在其包含元素上边缘之下5像素高的位置：

img
{
position:absolute;
top:5px;
}

尝试一下 »

属性定义及使用说明

top 属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。

注意： 如果 "position" 属性的值为 "static"，那么设置 "top" 属性不会产生任何效果。

默认值：	auto
继承：	no
版本：	CSS2
JavaScript 语法：	object.style.top="50px"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
top	1.0	5.0	1.0	1.0	6.0

属性值

值	描述
auto	默认值。通过浏览器计算上边缘的位置。
%	设置以包含元素的百分比计的上边位置。可使用负值。
length	使用 px、cm 等单位设置元素的上边位置。可使用负值。
inherit	规定应该从父元素继承 top 属性的值。

CSS 教程: CSS Positioning

实例

旋转 div 元素：

div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
}

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
transform (2D)	36.0 4.0 -webkit-	10.0 9.0 -ms-	16.0 3.5 -moz-	9.0 3.2 -webkit-	23.0 15.0 -webkit- 10.5 -o-
transform (3D)	36.0 12.0 -webkit-	12.0	10.0	16.0 10.0 -moz-	9.0 4.0 -webkit-

属性定义及使用说明

Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

为了更好地理解Transform属性,请查看在线实例.

默认值：	none
继承：	no
版本：	CSS3
JavaScript 语法：	object.style.transform="rotate(7deg)"

语法

transform: none|transform-functions;

值	描述
none	定义不进行转换。
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y)	定义 2D 转换。
translate3d(x,y,z)	定义 3D 转换。
translateX(x)	定义转换，只是用 X 轴的值。
translateY(y)	定义转换，只是用 Y 轴的值。
translateZ(z)	定义 3D 转换，只是用 Z 轴的值。
scale(x[,y]?)	定义 2D 缩放转换。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	通过设置 X 轴的值来定义缩放转换。
scaleY(y)	通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿着 X 轴的 3D 旋转。
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)	定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换。
perspective(n)	为 3D 转换元素定义透视视图。

CSS3 transform-origin 属性

实例

设置旋转元素的基点位置：

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
transform-origin (two-value syntax)	36.0 4.0 -webkit-	10.0 9.0 -ms-	16.0 3.5 -moz-	9.0 3.2 -webkit-	23.0 15.0 -webkit- 10.5 -o-
transform-origin (three-value syntax)	36.0 12.0 -webkit-	10.0	16.0 10.0 -moz-	9.0 4.0 -webkit-	23.0 15.0 -webkit-

属性定义及使用说明

transform-Origin属性允许您更改转换元素的位置。

2D转换元素可以改变元素的X和Y轴。 3D转换元素，还可以更改元素的Z轴。

为了更好地理解Transform-Origin属性，请查看这个演示.

注意： 使用此属性必须先使用transform 属性。

Tip:Safari/Chrome用户：为了更好地理解3D 转换属性,请查看演示.

默认值：	50% 50% 0
继承：	no
版本：	CSS3
JavaScript 语法：	object.style.transformOrigin="20% 40%"

语法

transform-origin: x-axis y-axis z-axis;

值

描述

x-axis

定义视图被置于 X 轴的何处。可能的值：

left
center
right
length
%

y-axis

定义视图被置于 Y 轴的何处。可能的值：

top
center
bottom
length
%

z-axis

定义视图被置于 Z 轴的何处。可能的值：

length

CSS3 transform-style 属性

实例

让转换的子元素保留3D转换：

div
{
transform: rotateY(60deg);
transform-style: preserve-3d;
-webkit-transform: rotateY(60deg); /* Safari and Chrome */
-webkit-transform-style: preserve-3d; /* Safari and Chrome */
}

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
transform-style	36.0 12.0 -webkit-	11.0	16.0 10.0 -moz-	9.0 4.0 -webkit-	23.0 15.0 -webkit-

属性定义及使用说明

transform--style属性指定嵌套元素是怎样在三维空间中呈现。

注意： 使用此属性必须先使用transform 属性.

Safari/Chrome用户：为了更好地理解transform--style属性，请查看实例演示.

默认值：	flat
继承：	no
版本：	CSS3
JavaScript 语法：	object.style.transformStyle="preserve-3d"

语法

transform-style: flat|preserve-3d;

值	描述
flat	子元素将不保留其 3D 位置。
preserve-3d	子元素将保留其 3D 位置。

CSS 参考手册

实例

把鼠标指针放到 div 元素上，其宽度会从 100px 逐渐变为 300px：

div{width:100px;transition: width 2s;-moz-transition: width 2s; /* Firefox 4 */-webkit-transition: width 2s; /* Safari 和 Chrome */-o-transition: width 2s; /* Opera */}

亲自试一试

浏览器支持

IE	Firefox	Chrome	Safari	Opera

Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。

Safari 支持替代的 -webkit-transition 属性。

注释：Internet Explorer 9 以及更早版本的浏览器不支持 transition 属性。

定义和用法

transition 属性是一个简写属性，用于设置四个过渡属性：

transition-property
transition-duration
transition-timing-function
transition-delay

注释：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。

默认值：	all 0 ease 0
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.transition="width 2s"

语法

transition: property duration timing-function delay;

值	描述
transition-property	规定设置过渡效果的 CSS 属性的名称。
transition-duration	规定完成过渡效果需要多少秒或毫秒。
transition-timing-function	规定速度效果的速度曲线。
transition-delay	定义过渡效果何时开始。

CSS 参考手册

实例

在过渡效果开始前等待 2 秒：

div{transition-delay: 2s;-moz-transition-delay: 2s; /* Firefox 4 */-webkit-transition-delay: 2s; /* Safari 和 Chrome */-o-transition-delay: 2s; /* Opera */}

亲自试一试

浏览器支持

IE	Firefox	Chrome	Safari	Opera

Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition-delay 属性。

Safari 支持替代的 -webkit-transition-delay 属性。

注释：Internet Explorer 9 以及更早版本的浏览器不支持 transition-delay 属性。

定义和用法

transition-delay 属性规定过渡效果何时开始。

transition-delay 值以秒或毫秒计。

默认值：	0
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.transitionDelay="2s"

语法

transition-delay: time;

值	描述
time	规定在过渡效果开始之前需要等待的时间，以秒或毫秒计。

CSS 参考手册

CSS3 transition-duration 属性

属性定义及使用说明

transition-duration 属性规定完成过渡效果需要花费的时间（以秒或毫秒计）。

默认值：	0
继承：	no
版本：	CSS3
JavaScript 语法：	object.style.transitionDuration="5s"

语法

transition-duration: time;

值	描述
time	规定完成过渡效果需要花费的时间（以秒或毫秒计）。默认值是 0，意味着不会有效果。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
transition-duration	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-

实例

最后5秒出现切换效果：

transition-duration: 5s;
-webkit-transition-duration: 5s; /* Safari */

尝试一下 »

CSS3 transition-property属性

属性定义及使用说明

transition-property属性指定CSS属性的nametransition效果（transition效果时将会启动指定的CSS属性的变化）。

提示:一个转场效果，通常会出现在当用户将鼠标悬停在一个元素上时。

注意：始终指定transition-duration属性，否则持续时间为0，transition不会有任何效果。

默认值：	all
继承：	no
版本：	CSS3
JavaScript 语法：	object.style.transitionProperty="width,height"

语法

transition-property: none|all| property;

值	描述
none	没有属性会获得过渡效果。
all	所有属性都将获得过渡效果。
property	定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
transition-property	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-

实例

将鼠标悬停在一个div元素上，逐步改变表格的宽度：

尝试一下 »
在此页底部有更多的例子。

CSS3 transition-timing-function 属性

属性定义及使用说明

transition-timing-function属性指定切换效果的速度。

此属性允许一个过渡效果，以改变其持续时间的速度。

默认值：	ease
继承：	no
版本：	CSS3
JavaScript 语法：	object.style.transitionTimingFunction="linear"

语法

值	描述
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)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
transition-timing-function	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-

实例

转场效果以同样的速度从开始到结束：

transition-timing-function: linear;
-webkit-transition-timing-function: linear; /* Safari and Chrome */

尝试一下 »

实例

为了更好地理解不同的函数值：这里有五个不同的div元素，用5个不同的值：

尝试一下 »

实例

和上面的例子一样，但指定速度曲线立方贝塞尔曲线函数：

尝试一下 »

CSS unicode-bidi 属性

CSS 参考手册

定义和用法

unicode-bidi 属性与 direction 属性一起使用，来设置或返回文本是否被重写，以便在同一文档中支持多种语言。

默认值：	normal
继承：	是
可动画化：	否。请参阅可动画化（animatable）。
版本：	CSS2
JavaScript 语法：	object.style.unicodeBidi="bidi-override"尝试一下

CSS 语法

unicode-bidi: normal|embed|bidi-override|initial|inherit;

属性值

值	描述	测试
normal	默认。不使用附加的嵌入层面。	测试 »
embed	创建一个附加的嵌入层面。	测试 »
bidi-override	创建一个附加的嵌入层面。重新排序取决于 direction 属性。	测试 »
initial	设置该属性为它的默认值。请参阅 initial。	测试 »
inherit	从父元素继承该属性。请参阅 inherit。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
unicode-bidi	2.0	5.5	1.0	1.3	9.2

实例

重写文本：

div
{
direction:rtl;
unicode-bidi:bidi-override;
}

尝试一下 »

CSS 教程：CSS Text（文本）

HTML DOM 参考手册：unicodeBidi 属性

CSS 参考手册

CSS vertical-align 属性

属性定义及使用说明

vertical-align属性设置一个元素的垂直对齐。

默认值：	baseline
继承：	no
版本：	CSS1
JavaScript 语法：	object.style.verticalAlign="bottom"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
vertical-align	1.0	4.0	1.0	1.0	4.0

属性值

值	描述
baseline	默认。元素放置在父元素的基线上。
sub	垂直对齐文本的下标。
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	把元素的顶端与行中最低的元素的顶端对齐。
text-bottom	把元素的底端与父元素字体的底端对齐。
length
%	使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit	规定应该从父元素继承 vertical-align 属性的值。

实例

重写文本：

img
{
vertical-align:text-top;
}

尝试一下 »

CSS 教程：CSS Text（文本）

CSS visibility 属性

属性定义及使用说明

visibility属性指定一个元素是否是可见的。

提示:即使不可见的元素也会占据页面上的空间。请使用 "display" 属性来创建不占据页面空间的不可见元素。

默认值：	visible
继承：	yes
版本：	CSS2
JavaScript 语法：	object.style.visibility="hidden"

属性值

值	描述
visible	默认值。元素是可见的。
hidden	元素是不可见的。
collapse	当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。
inherit	规定应该从父元素继承 visibility 属性的值。

浏览器支持

所有主流浏览器都支持visibility属性。

注意： ：Internet Explorer（包括IE8）没有版本支持属性值"inherit"或"collapse"。

实例

使 <h2> 元素不可见：

h2
{
visibility:hidden;
}

尝试一下 »

CSS width 属性

属性定义及使用说明

width属性设置元素的宽度。

注意： width属性不包括填充，边框和页边距！

默认值：	auto
继承：	no
版本：	CSS1
JavaScript 语法：	object.style.width="50px"

属性值

值	描述
auto	默认值。浏览器可计算出实际的宽度。
length	使用 px、cm 等单位定义宽度。
%	定义基于包含块（父元素）宽度的百分比宽度。
inherit	规定应该从父元素继承 width 属性的值。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
width	1.0	4.0	1.0	1.0	3.5

实例

设置一个段落的高度和宽度：

p.ex
{
height:100px;
width:100px;
}

尝试一下 »

CSS white-space 属性

属性定义及使用说明

white-space属性指定元素内的空白怎样处理。

默认值：	normal
继承：	yes
版本：	CSS1
JavaScript 语法：	object.style.whiteSpace="pre"

属性值

值	描述
normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
white-space	1.0	8.0	3.5	3.0	9.5

实例

规定段落中的文本不进行换行：

p
{
white-space:nowrap;
}

尝试一下 »

CSS 教程: CSS Text

CSS3 border-image-width 属性

属性定义及使用说明

border-image -width属性指定图像边界的宽度。

默认值:	1
继承:	no
版本:	CSS3
JavaScript 语法:	object.style.borderImageWidth="30 30"

语法

border-image-width: number|%|auto;

注意： border-image -width的4个值指定用于把border图像区域分为九个部分。他们代表上，右，底部，左，两侧向内距离。如果第四个值被省略，它和第二个是相同的。如果也省略了第三个，它和第一个是相同的。如果也省略了第二个，它和第一个是相同的。负值是不允许的。

值	说明
number	表示相应的border-width 的倍数
%	边界图像区域的大小：横向偏移的宽度的面积，垂直偏移的高度的面积
auto	如果指定了，宽度是相应的image slice的内在宽度或高度

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
border-image-width	15.0	11.0	13.0	6.0	15.0

实例

指定图像边界的宽度：

div
{
border-image-source: url(border.png);
border-image-width: 30 30;
}

定义和用法

word-break 属性规定自动换行的处理方法。

提示：通过使用 word-break 属性，可以让浏览器实现在任意位置的换行。

默认值：	normal
继承性：	yes
版本：	CSS3
JavaScript 语法：	object.style.wordBreak="keep-all"

语法

word-break: normal|break-all|keep-all;

值	描述
normal	使用浏览器默认的换行规则。
break-all	允许在单词内换行。
keep-all	只能在半角空格或连字符处换行。

浏览器支持

属性
word-break	4.0	5.5	15.0	3.1	15.0

所有主流浏览器都支持 word-break 属性。

实例

在恰当的断字点进行换行：

p.test {word-break:hyphenate;}

CSS word-spacing 属性

属性定义及使用说明

word-spacing属性增加或减少字与字之间的空白。

注意： 负值是允许的。

默认值：	normal
继承：	yes
版本：	CSS1
JavaScript 语法：	object.style.wordSpacing="10px"

属性值

值	描述
normal	默认。定义单词间的标准空间。
length	定义单词间的固定空间。
inherit	规定应该从父元素继承 word-spacing 属性的值。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
word-spacing	1.0	6.0	1.0	1.0	3.5

实例

指定段字之间的空间，应该是30像素：

p
{
word-spacing:30px;
}

尝试一下 »

CSS 教程: CSS Text

CSS3 word-wrap 属性

属性定义及使用说明

word-wrap属性允许长的内容可以自动换行。

默认值：	normal
继承：	yes
版本：	CSS3
JavaScript 语法：	object.style.wordWrap="break-word"

语法

word-wrap: normal|break-word;

值	描述
normal	只在允许的断字点换行（浏览器保持默认处理）。
break-word	在长单词或 URL 地址内部进行换行。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
word-wrap	4.0	5.5	3.5	3.1	10.5

实例

指定如果足够长得话，应该换行：

p.test {word-wrap:break-word;}

尝试一下 »

CSS3 教程: CSS3 Text Effects

CSS z-index 属性

属性定义及使用说明

z-index 属性指定一个元素的堆叠顺序。

拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注意： z-index 进行定位元素(position:absolute, position:relative, or position:fixed)。

默认值：	auto
继承：	no
版本：	CSS2
JavaScript 语法：	object.style.zIndex="1"

属性值

值	描述
auto	默认。堆叠顺序与父元素相等。
number	设置元素的堆叠顺序。
inherit	规定应该从父元素继承 z-index 属性的值。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
z-index	1.0	4.0	3.0	1.0	4.0

实例

设置图像的 z-index：

img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}

尝试一下 »

CSS 教程: CSS Positioning

什么是通用选择器？

CSS 通用选择器（*）是一种特殊的选择器，用于匹配页面中的所有元素。它不区分元素类型，适用于任何 HTML 元素。

语法

通用选择器的语法非常简单，只需使用一个星号（*）即可。

* {  /* 属性声明 */}

示例

/* 为所有元素设置文本颜色为绿色 */* {  color: green;}

命名空间支持

通用选择器支持命名空间，这在处理包含多种命名空间的文档（如 HTML 中嵌入的 SVG 或 MathML）时非常有用。

ns|* - 匹配命名空间 ns 中的所有元素。
*|* - 匹配所有元素。
|* - 匹配所有没有声明命名空间的元素。

示例代码

/* 选择所有带有 lang 属性以 "zh" 开头的元素 */* [lang^="zh"] {  color: green;}/* 选择所有 class 为 warning（警告） 的元素 */*.warning {  color: red;}/* 选择 id 为 maincontent（主要内容） 的元素 */*#maincontent {  border: 1px solid blue;}/* 为具有 floating（浮动） 类的元素设置左浮动 */.floating {  float: left;}/* 自动清除浮动元素的下一个兄弟元素 */.floating + * {  clear: left;}

HTML 示例

<p class="warning">  <span lang="zh-cn">一个绿色的 span</span> 在一个红色的段落中。</p><p id="maincontent" lang="zh-cn">
  <span class="warning">一个红色的 span</span> 在一个绿色的段落中。
</p>

命名空间示例

@namespace example url(http://www.example.com/);example|* {  color: blue;}

规范

Selectors Level 4: The Universal Selector

浏览器兼容性

通用选择器在所有现代浏览器中都得到了广泛支持，包括 Chrome、Firefox、Safari、Edge 和 Internet Explorer。

编程狮相关课程推荐

如果你想深入学习 CSS，可以查看编程狮上的 CSS 入门课程，这些课程涵盖了 CSS 的基础知识到高级技巧，帮助你全面提升 CSS 技能。

什么是后代选择器？

后代选择器又称为“子选择器”（Descendant Combinator）是 CSS 中的一种选择器，用于选择某个元素的后代元素。它通常用一个空格（" "）表示。如果第二个选择器匹配的元素具有与第一个选择器匹配的祖先元素（可以是父元素、祖父元素等），则后代选择器会选择这些元素。

语法

selector1 selector2 {  /* 属性声明 */}

示例

/* 选择 "my-things" 列表中的列表项 */ul.my-things li {  margin: 2em;}

HTML 示例

<ul>  <li>    <div>项目 1</div>    <ul>      <li>子项 A</li>      <li>子项 B</li>    </ul>  </li>  <li>    <div>项目 2</div>    <ul>      <li>子项 A</li>      <li>子项 B</li>    </ul>  </li></ul>

结果

在这个示例中，所有嵌套在 ul.my-things 列表中的 li 元素都会应用 margin: 2em; 样式。

后代选择器的使用场景

后代选择器在 CSS 中非常有用，特别是在需要为嵌套元素应用特定样式时。例如，你可能希望为列表中的子列表项应用不同的样式，而不会影响其他列表项。

示例代码

/* 为所有列表项设置圆点样式 */li {  list-style-type: disc;}/* 为嵌套的列表项设置圆形样式 */li li {  list-style-type: circle;}

规范

Selectors Level 4: Descendant combinators

浏览器兼容性

后代选择器在所有现代浏览器中都得到了广泛支持，包括 Chrome、Firefox、Safari、Edge 和 Internet Explorer。

CSS #id 选择器

CSS 选择器参考手册

实例

为 id="w3cschool01" 的元素设置样式：

#w3cschool01{ background-color:red;}

亲自试一试

浏览器支持

IE	Firefox	Chrome	Safari	Opera

所有主流浏览器都支持 #id 选择器。

定义与用法

#id 选择器用于为带有特定 id 属性的 HTML 元素设置样式。id 在文档中应唯一。

语法

#id {  property: value;}

示例

为 id="header" 的元素设置背景颜色：

#header {  background-color: red;}

优先级

#id 选择器优先级高于类选择器和元素选择器，低于内联样式。

示例

.class {  color: blue;}#id {  color: red;}

#id 的优先级更高，文本颜色为红色。

最佳实践

避免滥用 #id 选择器，优先使用类选择器以提高代码灵活性。
在大型项目中减少对 #id 的依赖，提升代码可维护性。

常见问题与注意事项

获取元素：使用 document.getElementById('id')。
样式冲突：使用更具体的选择器或调整加载顺序解决。
性能优化：#id 选择器在 CSS 和 JavaScript 中性能较高。

总结

#id 选择器功能强大，但应谨慎使用。遵循最佳实践可编写出高效、可维护的代码。