css参考手册速查表速查表快速通道€¦ · box-sizing resize ime-mode 用户界面...

CSS参考手册»速查表速查表快速通道

选

http://css.doyoe.com/

QuickSearch

QuickSearchQuickSearch

速查表

速查表速查表

提交问题

说明：本文档兼容性测试基础环境为：windows系统；IE6-IE10,Firefox9.0,Chrome16.0,Safari5.1,Opera11.60

position z-index top

right bottom left

定位Positioning

display float clear

visibility clip overflow

overflow-x overflow-y

布局Layout

box-orient box-pack box-align

box-flex box-flex-group box-ordinal-group

box-direction box-lines

弹性盒模型FlexibleBoxLayout

width min-width max-width

height min-height max-height

尺寸Dimension

margin margin-top margin-right

margin-bottom margin-left

外补白Margin

padding padding-top padding-right

padding-bottom padding-left

内补白Padding

border border-width border-style

border-color border-top border-top-width

border-top-style border-top-color border-right

border-right-width border-right-style border-right-color

border-bottom border-bottom-width border-bottom-style

border-bottom-color border-left border-left-width

border-left-style border-left-color border-image

border-radius border-top-left-radius border-top-right-radius

border-bottom-right-

radius

border-bottom-left-

radius

box-shadow

box-reflect

边框Border

background background-color background-image

background-repeat background-

attachment

background-position

background-origin

background-clip background-size Multiplebackground

背景Background

color opacity

颜色Color

font font-style font-variant

font-weight font-size font-family

font-stretch

字体Font

text-indent text-overflow text-align

text-transform text-decoration text-decoration-line

text-decoration-color text-decoration-style text-shadow

text-fill-color text-stroke text-stroke-width

text-stroke-color letter-spacing word-spacing

vertical-align word-wrap white-space

direction unicode-bidi line-height

tab-size

文本Text

list-style list-style-image list-style-position

list-style-type

列表List

table-layout border-collapse border-spacing

caption-side empty-cells

表格Table

content counter-increment counter-reset

quotes

内容Content

outline outline-width outline-style

outline-color outline-offset nav-index

nav-up nav-right nav-down

nav-left cursor zoom

box-sizing resize ime-mode

用户界面UserInterface

columns column-width column-count

column-gap column-rule column-rule-width

column-rule-style column-rule-color column-span

column-fill column-break-before column-break-after

column-break-inside

多列Multi-column

transform transform-origin

转换Transform

transition transition-property transition-duration

transition-timing-

function

transition-delay

过渡Transition

animation animation-name animation-duration

animation-timing-

function

animation-delay animation-iteration-

count

animation-direction animation-play-state animation-fill-mode

动画Animation

page page-break-before page-break-after

page-break-inside

打印Printing

width height device-width

device-height orientation aspect-ratio

device-aspect-ratio color color-index

monochrome resolution scan

grid

媒体查询MediaQueries

scrollbar-3dlight-color scrollbar-drakshadow-

color

scrollbar-highlight-

color

scrollbar-shadow-colorscrollbar-arrow-color scrollbar-face-color

scrollbar-track-color scrollbar-base-color filter

behavior

OnlyIE

border-colors border-top-colors border-right-colors

border-bottom-colors border-left-colors

OnlyFirefox

* E E#id

E.class

元素选择符ElementSelectors

EF E>F E+F

E~F

关系选择符RelationshipSelectors

E[att] E[att="val"] E[att~="val"]

E[att^="val"] E[att$="val"] E[att*="val"]

E[att|="val"]

属性选择符AttributeSelectors

E:link E:visited E:hover

E:active E:focus E:lang()

E:not() E:root E:first-child

E:last-child E:only-child E:nth-child(n)

E:nth-last-child(n) E:first-of-type E:last-of-type

E:only-of-type E:nth-of-type(n) E:nth-last-of-type(n)

E:empty E:checked E:enabled

E:disabled E:target @page:first

@page:left @page:right

伪类选择符Pseudo-ClassesSelectors

E:first-letter/E::first-

letter

E:first-line/E::first-lineE:before/E::before

E:after/E::after E::selection

伪对象选择符Pseudo-ElementSelectors

!important comment @import

@charset @media @font-face

@page @keyframes

语法与规则RulesandSyntax

ColorName HEX RGB

RGBA HSL HSLA

transparent

颜色类型取值ColorType

<string> <url> <identifier>

文本类型取值TextualDataType

counter() attr() calc()

min() max() cycle()

函数类型取值FunctionalNotationsType

linear-gradient() radial-gradient() repeating-linear-

gradient()

repeating-radial-

gradient()

图像类型取值ImageType

<number> <integer>

数字类型取值NumericDataType

<length> <percentage> <angle>

<time> <frequency> <fraction>

<grid>

其它数据类型取值OtherDataTypes

em ex ch

rem vw vh

vm cm mm

in pt pc

px

长度单位LengthUnits

deg grad rad

turn

角度单位AngleUnits

s ms

时间单位TimeUnits

Hz kHz

频率单位FrequencyUnits

fr gr

特殊布局单位Layout-specificUnits

颜色关键字(Color

Keywords)

媒体类型(Media

Types)

附录Appendix

条件Hack 属性级Hack 选择符级Hack

常用CSSHack

Bugs和解决方案技巧和经验其它经验

问题和经验

这种颜色的链接表示是CSS3新增的或者在CSS3中有所调整

提交问题


Copyright©2006-2012Doyoe.AllRightsReserved

http://www.doyoe.com/

CSS参考手册»CSS3速查表速查表快速通道

选


CSS3QuickSearch

CSS3QuickSearchCSS3QuickSearch

CSS3速查表

CSS3CSS3速查表速查表

提交问题


display overflow-x overflow-y

布局Layout

border-image border-radius border-top-left-radius

border-top-right-radiusborder-bottom-right-

radius

border-bottom-left-

radius

box-shadow box-reflect

边框Border

background-image background-repeat background-

attachment

background-position background-origin background-clip

background-size Multiplebackground

背景Background

opacity

颜色Color

font-stretch

字体Font

text-overflow text-align text-transform

text-decoration text-decoration-line text-decoration-color

text-decoration-style text-shadow text-fill-color

text-stroke text-stroke-width text-stroke-color

word-wrap tab-size

文本Text

outline-offset nav-index nav-up

nav-right nav-down nav-left







column-break-inside

多列Multi-column


转换Transform


transition-timing-

function

transition-delay

过渡Transition


animation-timing-

function


count


动画Animation





grid




OnlyFirefox

E~F


E:not() E:root E:last-child

E:only-child E:nth-child(n) E:nth-last-child(n)

E:first-of-type E:last-of-type E:only-of-type

E:nth-of-type(n) E:nth-last-of-type(n) E:empty

E:checked E:enabled E:disabled

E:target



letter




@import @media @font-face

@keyframes


RGBA HSL HSLA

transparent

颜色类型取值ColorType

attr() calc() min()

max() cycle()

函数类型取值FunctionalNotationsType


gradient()

repeating-radial-

gradient()

图像类型取值ImageType

<angle> <time> <frequency>

<fraction> <grid>

其它数据类型取值OtherDataTypes

ch rem vw

vh vm


deg grad rad

turn


s ms


Hz kHz


fr gr


这种颜色的链接表示是CSS3新增的或者在CSS3中有所调整

提交问题




web前端开发参考手册

系列之

CSS参考手册»简介

其它简介条目

选

CSS(ContainCSS3)速查总表QuickSearchCSS3速查表CSS3List简介Introduction属性Properties选择符Selectors语法与规则Rules取值Values单位Units附录AppendixCSSHack问题和经验

CSS参考手册

CSSCSS参考手册参考手册

web前端开发参考手册系列

webweb前端开发参考手册系列前端开发参考手册系列

当前版本：当前版本：v3.4.0v3.4.0 下载最新下载最新chmchm版版捐赠捐赠在线资源在线资源关于关于

©CopyrightDoyoe2006-2012 为CSS参考手册捐赠您的一份力量

http://blog.doyoe.com/

http://demo.doyoe.com/


http://weibo.com/doyoe

mailto:[email protected]



CSS参考手册»简介» 其它简介条目

选


AboutThisHandbook

AboutThisHandbookAboutThisHandbook

CSS参考手册简介

CSSCSS参考手册简介参考手册简介

提交问题


版权声明Copyright

本手册由飘零雾雨编写。版权所有者为飘零雾雨。

您可以免费的使用、分发本手册。但未经飘零雾雨的授权许

可不得擅自进行篡改、反编译，及将其全部或部分用于商业

用途。

本手册受著作权法和国际公约的保护，作者保留对本手册及

本声明的最终修改权。

本手册的部分内容参考了苏沈小雨版的CSS2.0手册及World

WideWebConsortium(W3C)公开的网络文档。

版本更新Update

本手册当前版本为：v3.4.0　更新时间为：2012.2.28　下载

chm版：CSS参考手册v3.4.0，如过下载后的chm无法查看页

面，请看阅读及使用指引最后一点。

您可以随时访问我的网站：CSS参考手册官网检查并获取更

新版本。

您也可以给我写电子邮件[email protected]或者QQ:

104589226咨询及洽谈商业合作。

由于个人的精力有限，手册内容难免出现错误和问题，望广

大网友不吝斧正。请将您发现的问题提交到CSS参考手册问

题反馈，将会在鸣谢页面列出您的名字，以表达对您的感

激。

如果您希望为手册的发展贡献一份力量，你也可以捐赠任意

金额，促使手册更加完善。



http://www.doyoe.com/suggestion/?sid=css

版本信息VersionInformation

CSS参考手册v3.4.0 UpdateTime:2012.2.28

新增了display的box和inline-box值；新增了CSSFlexibleBox

LayoutProperties参考；更新了text-decoration参考；新增了

text-decoration-line、text-decoration-color、text-decoration-

style参考；新增了ime-mode参考；新增了CSS3速查表参考；

新开了OnlyFirefox节点；补充修订了问题和经验列表；新增

了一些对本手册指出过Bug提出过建议的感谢名单；修订了

热心网友发现的部分错误描述、链接及Bug；


新增了text-stroke复合属性参考；新增了text-fill-color属性参

考；新增了box-reflect属性参考；新增了background-clip的text

属性值(感谢@FlashSoft)；新增了部分属性对Firefox9.0,

Chrome16.0,Opera11.60的支持参考；新增了手册的favicon

icon；修订了一些热心网友发现的错误链接和Bug；补充修订

了问题和经验列表；新增了一些对本手册指出过Bug提出过

建议的感谢名单；


在每页顶部的增加了面包屑及导航到相关内容；新增了

<identifier>Value参考；新增了cycle()Value参考；新增了ch

Unit参考；新增了Units下某些缺少的demo并完善了内容；新

增了animation-fill-mode属性参考；修订了一些错误链接；修

订了一些BUG；补充修订了问题和经验列表；


新增了动画速查表；新增了动画CSSAnimationsProperties参

考；新增了规则@keyframes参考；新增了部分属性的IE10支

持；修订了IE9对部分属性的支持问题；修订了一些BUG；

补充修订了问题和经验列表；


重新设计了浏览器支持的呈现方式；新增了更新的浏览器版

本支持；新增了浏览器对属性值支持的说明；新增了对CSS3

属性和含CSS3属性值的属性的标识；补充修订了问题和经验

列表；


补充修订了问题和经验列表；补充修订了部分缺失和错误的

链接；


新增了问题和经验章节；新增了手册阅读及使用说明；补充

修订了对float属性的脚本特性的说明；补充修订了Opera对

CSSGradientBackgroundMaker:linear-gradient(),repeating-

linear-gradient()的支持；


新增了CSSHack参考；MediaQueries参考；更新和完善了

@media和@import规则


更新了IE9对某些属性的兼容性；修复了一些错误的链接地址

CSS参考手册v2.0.0（未发布） UpdateTime:2011.3.17

手册三版，错误问题修订和演示实例编写，并接着编写未完

成的章节


手册再版，修订了很多遗留的问题和错误，并接着编写未完

成的章节


手册完成初版，有大量的无效链接和错误，并接着编写未完

成的章节

提交问题





选


IntroductionToCSS

IntroductionToCSSIntroductionToCSS

层叠样式表简介

层叠样式表简介层叠样式表简介

提交问题


说明：

本手册针对的是已有一定网页设计制作经验的读者。其目的

是提供最新的样式表内容的快速索引及注释。所以对于样式

表的基础知识，在此仅简单介绍，恕不赘述。

本手册的升级信息与版权声明请参阅关于本手册页面。

什么是层叠样式表：

CSS是CascadingStyleSheet（层叠样式表）的缩写。是用于

（增强）控制网页样式并允许将样式信息与网页内容分离的

一种标记性语言。

CSS不需要编译,可以直接由浏览器执行(属于浏览器解释型语

言)。

CSS2.1是目前被使用最广泛的版本，而目前还在开发中的

CSS3具有更吸引人的特性。

本手册除了CSS2.1外，还涵盖了大部分的CSS3内容。但由于

CSS3尚未定稿，不可避免会出现一些变动。

样式语法：

Selector{property:value}

如何将样式表加入您的网页：

你可以用以下三种方式将样式表加入您的网页。而最接近目

标的样式定义优先权越高。高优先权样式将继承低优先权样

式的未重叠定义但覆盖重叠的定义。例外请参阅!important声

明。

内联方式InlineStyles

内联定义即是在对象的标记内使用对象的style属性定义适用

其的样式表属性。

示例代码：

<pstyle="color:#f00">这一行的字体颜色将显示为红色</p>

内部样式块对象EmbeddingaStyleBlock

你可以在你的HTML文档的<head>标记里插入一个<style>块

对象。

示例代码：

<style>

body{background:#fff;color:#000;}

p{font-size:14px;}

</style>

外部样式表LinkingtoaStyleSheet

你可以先建立外部样式表文件*.css，然后使用HTML的link对

象。

示例代码：

<linkrel="stylesheet"href="*.css"/>

提交问题





选


About飘零雾雨

AboutAbout飘零雾雨飘零雾雨

作者简介

作者简介作者简介

提交问题


基本信息BasicInformation

中文名：杜瑶

英文名：JoyDu

网　名：飘零雾雨

博　客：CSS探索之旅

http://blog.doyoe.com

自述Intro

精通CSS、HTML、JavaScript等技术。

始终致力于web前端开发技术，关注高性能的web开发。

有丰富的大型门户网站开发经验；熟悉团队项目流程并具备

资源调配的能力。

2010.11-至今

2009.04-2010.11

2008.09-2009.04

2007.09-2008.09

2006.07-2007.09

履历Vita

Achievo（深圳证券交易所部门）

Epro(易宝集团)

Achievo（YahooOSP部门）

太平洋网络科技

江西青铜文化传媒有限公司

个人站点MyWebsite

飘雨社区

我的个人门户网站，关注一些有趣的资讯信息。从设计、制

作到开发都由我个人完成。

web前端实验室

随手扔一些平时的前端实验示例

CSS参考手册

CSS参考手册，含CSS2及CSS3大部分内容。本手册的内容在

一段时间内将持续更新，请密切关注本站并随时获取最新版

本。


http://demo.doyoe.com/


联系方式ContactMe

邮箱：[email protected]

电话：15012755326

QQ：104589226

提交问题






选


TheUseGuides

TheUseGuidesTheUseGuides

阅读及使用指引

阅读及使用指引阅读及使用指引

提交问题


手册使用说明TheInstruction

关于本手册一些特定阅读方式的说明

关于本手册存在的一些问题说明及解决方法

浅绿

=支持红色

=不支持

墨绿

=部分支持橙色

=实验性质

阅读指引TheReadGuides

兼容性：

手册在所有参考页的头部和底部都有对浏览器兼容

性测试基础环境的说明。如无特别说明，所有文档

页均不考虑IE6以下版本。

兼容性表格解读：

支持版本\类型

IE Firefox Safari Chrome

较早版本

6.0-7.0

4.0-6.0 5.1 13.0 11.50较新版本

8.0

最近版本

9.0

假设上述表格是对某属性x的兼容性说明：那即表示

IE6和IE7不支持该属性，IE8对该属性的支持还处在

实验性质阶段，IE9及后续版本已支持该属性；

Firefox4.0-6.0对该属性的支持还处在实验性质阶

段；Safari、Chrome、Opera支持该属性。

如果是处在“实验性质”状态，则各浏览器的私有写

法为：IE加-ms-；Firefox加-moz-；Safari和Chrome

加-webkit-；Opera加-o-

脚本特性：

每个CSS属性参考页所指定的该属性的脚本特性，

是指js如何访问该CSS属性。如：float属性的脚本特

性为styleFloat或cssFloat，那么js这样写：

js代码：

IE：　DOM.style.styleFloat

非IE：DOM.style.cssFloat

示例：

每个CSS参考页的示例都可以点击“运行”按钮，直

接查看效果。

目前已知在win7下，本手册的chm版下的示例点

击“运行”会出错，在未修复该问题前，如需查看某

个示例，请将该示例代码拷贝到本地进行浏览。

问题指引TheQuestionGuides

在win7下，本手册的chm版下的示例点击“运行”出错

问题未被修复。在未修复该问题前，如需查看某个示例，请

将该示例代码拷贝到本地进行浏览。

chm版下载后打开出现网页无法访问的情况

在chm上右键选择“属性”，勾选最下面的“解除锁定”并应用确

定，再次打开就可以了。

提交问题





选


Thanks

ThanksThanks

鸣谢

鸣谢鸣谢

提交问题


dh20156(风之石) Laurie JK

johnhax FlashSoft mokson

keelii cloud xishao

wuxiaolan9 shaphone 修远兮

wgsuxin KennyLuck 貘

周裕波愚人码头 aoao

舒思卫封凌云

特别鸣谢(排名不分先后)：

衷心感谢上述朋友对本手册提出的意见和建议，以及发现的Bug，正

是有了你们，本手册才会越来越完善。

我也发现了问题，CSS参考手册问题反馈，以上名单大部分来自该列

表，如信息不准确，请联系我。

提交问题



http://weibo.com/dh20156

http://hi.baidu.com/jkisjk/

http://weibo.com/haxy

http://weibo.com/sinaria

http://weibo.com/bai80

http://weibo.com/kennyluck

http://weibo.com/itapir

http://weibo.com/itchina100

http://weibo.com/148246293

http://weibo.com/2222342

http://www.doyoe.com/suggestion/?sid=css



选


Contribute

ContributeContribute

捐赠

捐赠捐赠

提交问题


贡献Contribute

该手册完全由个人编写和维护，如果手册给您带来了帮助，且您愿意

帮助提升手册的更新速度和质量，您可以通过以下方式为手册捐献：

Payment支付方式

Account账户

备　注捐赠金额不限

支付宝 [email protected]

财付通 104589226

姓　名杜瑶

衷心感谢您为CSS参考手册作出的贡献，正是有了您，手册才会越来

越完善。

提交问题




CSS参考手册»属性列表»定位属性» 其它定位属性参

考

选


position版本：CSS2继承性：无

提交问题


语法：

position：static|relative|absolute|fixed

默认值：static

static：

relative：

absolute：

fixed：

取值：

无特殊定位，对象遵循正常文档流。top，right，bottom，left

等属性不会被应用。

对象遵循正常文档流，但将依据top，right，bottom，left等

属性在正常文档流中偏移位置。

对象脱离正常文档流，使用top，right，bottom，left等属性

进行绝对定位。而其层叠通过z-index属性定义。

对象脱离正常文档流，使用top，right，bottom，left等属性以窗

口为参考点进行定位，当出现滚动条时，对象不会随着滚动。IE6及以

下不支持此参数值

说明：

检索对象的定位方式。

对应的脚本特性为position。

=支持 =不支持 =部分支持 =实验性质

兼容性：

支持版本\类型

较早版本 6.0#14.0 5.1 13.0 11.50

较新版本 7.0

1. IE6及更早浏览器不支持position属性的fixed参数值。

示例：

<!DOCTYPEhtml><htmllang="zh-cn"><head>

<title>position_CSS参考手册_web前端开发参考手册</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>#position{position:absolute;top:50%;left:50%;width:150px;height:40px;margin:-20px00-75px;padding:010px;background:#eee;line-height:2.4;}</style></head><body><divid="position">水平垂直居中的对象</div></body></html>

运行

提交问题





考

选


z-index版本：CSS2继承性：无

提交问题


语法：

z-index:auto|<integer>

默认值：auto

auto：

<integer>：

取值：

遵从其父对象的定位

用整数值来定义堆叠级别。可以为负值。

说明：

检索或设置对象的层叠顺序。

并级的对象，此属性参数值越大，则被层叠在最上面。

如两个对象的此属性具有同样的值，那么将依据它们在HTML文档中

流的顺序层叠，写在后面的将会覆盖前面的。

必须定义position属性值为absolute、relative或fixed，此取值方可生

效。

对应的脚本特性为zIndex。


兼容性：

支持版本\类型

版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>z-index_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.z1,.z2,.z3{position:absolute;width:200px;height:100px;padding:5px10px;color:#fff;text-align:right;}.z1{z-index:1;background:#000;}.z2{z-index:2;top:30px;left:30px;background:#C00;}.z3{z-index:3;top:60px;left:60px;background:#999;}</style></head><body><divclass="z1">z-index:1</div><divclass="z2">z-index:2</div><divclass="z3">z-index:3</div></body></html>

运行

提交问题





考

选


top版本：CSS2继承性：无

提交问题


语法：

top:<length>|<percentage>|auto

默认值：auto

auto：

<length>：

<percentage>：

取值：

无特殊定位，根据HTML定位规则在文档流中分配

用长度值来定义距离顶部的偏移量。可以为负值。

用百分比来定义距离顶部的偏移量。可以为负值。

说明：

检索或设置对象与其最近一个定位的父对象顶部相关的位置。


效。

对应的脚本特性为top。


兼容性：

支持版本\类型

版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>top_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{position:absolute;top:-100px;width:200px;height:200px;padding:5px10px;background:#c00;color:#fff;line-height:12;}</style></head><body><divclass="test">我将出现在浏览器顶部</div></body></html>

运行

提交问题





考

选


right版本：CSS2继承性：无

提交问题


语法：

right：<length>|<percentage>|auto

默认值：auto

auto：

<length>：

<percentage>：

取值：


用长度值来定义距离右边的偏移量。可以为负值。

用百分比来定义距离右边的偏移量。可以为负值。

说明：

检索或设置对象与其最近一个定位的父对象右边相关的位置。


效。

对应的脚本特性为right。


兼容性：

支持版本\类型

版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>right_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{position:absolute;right:0;width:200px;height:200px;padding:5px10px;background:#c00;color:#fff;line-height:12;}</style></head><body><divclass="test">我将出现在浏览器右上角</div></body></html>

运行

提交问题





考

选


bottom版本：CSS2继承性：无

提交问题


语法：

bottom:<length>|<percentage>|auto

默认值：auto

auto：

<length>：

<percentage>：

取值：


用长度值来定义距离底部的偏移量。可以为负值。

用百分比来定义距离底部的偏移量。可以为负值。

说明：

检索或设置对象与其最近一个定位的父对象底边相关的位置。


效。

对应的脚本特性为bottom。


兼容性：

支持版本\类型

版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>bottom_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{position:absolute;bottom:0;width:200px;height:200px;padding:5px10px;background:#c00;color:#fff;line-height:12;}</style></head><body><divclass="test">我将出现在浏览器底部</div></body></html>

运行

提交问题





考

选


left版本：CSS2继承性：无

提交问题


语法：

left:<length>|<percentage>|auto

默认值：auto

auto：

<length>：

<percentage>：

取值：


用长度值来定义距离左边的偏移量。可以为负值。

用百分比来定义距离左边的偏移量。可以为负值。

说明：

检索或设置对象与其最近一个定位的父对象左边相关的位置。


效。

对应的脚本特性为left。


兼容性：

支持版本\类型

版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>left_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{position:absolute;left:-50px;width:200px;height:200px;padding:5px10px;background:#c00;color:#fff;line-height:12;}</style></head><body><divclass="test">我将出现在浏览器左上角</div></body></html>

运行

提交问题




CSS参考手册»属性列表»布局属性» 其它布局属性参

考

选


display版本：CSS1/CSS2/CSS3

继承性：无

提交问题


none：

inline：

block：

list-item：

inline-block：

table：

inline-table：

table-caption：

table-cell：

table-row：

table-row-group：

table-column：

table-column-group：

table-header-group：

table-footer-group：

compact：

取值：

隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对

象保留其物理空间

指定对象为内联元素。

指定对象为块元素。

指定对象为列表项目。

指定对象为内联块元素。（CSS2）

指定对象作为块元素级的表格。类同于html标签

<table>（CSS2）

指定对象作为内联元素级的表格。类同于html标签

<table>（CSS2）

指定对象作为表格标题。类同于html标签

<caption>（CSS2）

指定对象作为表格单元格。类同于html标签<td>（CSS2）

指定对象作为表格行。类同于html标签<tr>（CSS2）

指定对象作为表格行组。类同于html标签

<tbody>（CSS2）

指定对象作为表格列。类同于html标签<col>（CSS2）

指定对象作为表格列组显示。类同于html标签

<colgroup>（CSS2）

指定对象作为表格标题组。类同于html标签

<thead>（CSS2）

指定对象作为表格脚注组。类同于html标签

<tfoot>（CSS2）

分配对象为块对象或基于内容之上的内联对象（CSS3）

run-in：

ruby：

ruby-base：

ruby-text：

ruby-base-group：

ruby-text-group：

box：

inline-box：

分配对象为块对象或基于内容之上的内联对象（CSS3）

将对象作为表格脚注组显示（CSS3）





将对象作为弹性盒模型显示（CSS3）

将对象作为内联块级弹性盒模型显示（CSS3）

说明：

设置或检索对象是否及如何显示。

IE7及以下浏览器不支持table相关的参数值，如：table,inline-table,

table-caption,table-cell,table-row,table-row-group,table-column,table-

column-group,table-footer-group,table-header-group

写本文档时尚无浏览器支持ruby相关的参数值，如：ruby,ruby-base,

ruby-text,ruby-base-group,ruby-text-group

对应的脚本特性为display。

示例：


<title>display_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>body{font:14px/1.5georgia,simsun,arial;}h1{margin:10px0;font-size:20px;}ul{margin:0;padding:0;list-style:none;}.table{display:table;border-collapse:collapse;border:1pxsolid#ccc;}.table-caption{display:table-caption;margin:0;padding:0;font-size:16px;}.table-column-group{display:table-column-group;}.table-column{display:table-column;width:100px;}.table-row-group{display:table-row-group;}.table-row{display:table-row;}.table-row-group.table-row:hover,.table-footer-group.table-row:hover{background:#f6f6f6;}.table-cell{display:table-cell;padding:05px;border:1pxsolid#ccc;}.table-header-group{display:table-header-group;background:#eee;font-weight:bold;}.table-footer-group{display:table-footer-group;}</style></head><body><h1>display构造的table小例子，IE7及以下浏览器不支持本示例</h1><divclass="table"> <h2class="table-caption">花名册：</h2> <divclass="table-column-group"> <divclass="table-column"></div> <divclass="table-column"></div> <divclass="table-column"></div> </div> <divclass="table-header-group"> <ulclass="table-row"> <liclass="table-cell">序号</li> <liclass="table-cell">姓名</li> <liclass="table-cell">年龄</li>

运行

提交问题





考

选


float版本：CSS1继承性：无

提交问题


语法：

float：none|left|right

默认值：none

none：

left：

right：

取值：

设置对象不浮动

设置对象浮在左边

设置对象浮在右边

说明：

该属性的值指出了对象是否及如何浮动。请参阅clear属性

当该属性不等于none引起对象浮动时，对象将被视作块对象(block-

level)，即display属性等于block。也就是说，浮动对象的display特性将

被忽略。

该属性可以被应用在非绝对定位的任何元素上。

对应的脚本特性为styleFloat（IE）或cssFloat（非IE）。(注意这里为

styleFloat或cssFloat，而不是float)


兼容性：

支持版本\类型

版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>float_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{float:right;background:#eee;}</style></head><body><divclass="test">我将出现在屏幕右方</div></body></html>

运行

提交问题





考

选


clear版本：CSS1继承性：无

提交问题


语法：

clear：none|left|right|both

默认值：none

none：

both：

left：

right：

取值：

允许两边都可以有浮动对象

不允许有浮动对象

不允许左边有浮动对象

不允许右边有浮动对象

说明：

该属性的值指出了不允许有浮动对象的边。请参阅float属性

对应的脚本特性为clear。


兼容性：

支持版本\类型

版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>clear_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{float:right;background:#eee;}.test2{clear:right;background:#ddd;}</style></head><body><divclass="test">我将出现在屏幕右方</div><divclass="test2">注意我出现的位置</div></body></html>

运行

提交问题





考

选


visibility版本：CSS2继承性：无

提交问题


语法：

visibility：visible|hidden|collapse

默认值：visible

visible：

hidden：

collapse：

取值：

设置对象可视

设置对象隐藏

主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容

使用。对于表格外的其他对象，其作用等同于hidden。IE6及以下不支

持此参数值

说明：

设置或检索是否显示对象。与display属性不同，此属性为隐藏的对象

保留其占据的物理空间

如果希望对象为可视，其父对象也必须是可视的。

对应的脚本特性为visibility。


兼容性：

支持版本\类型

较早版本 6.0#14.0 5.1 13.0 11.50

较新版本 7.0

1. IE6及更早浏览器不支持visibility属性的collapse参数值。

示例：


<title>visibility_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{visibility:hidden;}</style></head><body><divclass="test">我不会出现在屏幕上</div></body></html>

运行

提交问题





考

选


clip版本：CSS2继承性：无

提交问题


auto：

rect(<number>|auto<number>|auto<number>|auto

<number>|auto)：

取值：

对象无剪切

依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移

数值，其中任一数值都可用auto替换，即此边不剪切。

示例：clip:rect(auto50px20pxauto);

说明：上边不剪切，右边从第50个像素开始剪切直至最右边，下边从

第20个像素开始剪切直至最底部，左边不剪切

IE7及以下浏览器只支持rect(<number><number><number><number>)

的方式，其它浏览器还支持rect(<number>,<number>,<number>,

<number>)加逗号的方式。

说明：

检索或设置对象的可视区域。区域外的部分是透明的。

必须将position的值设为absolute，此属性方可使用。

对应的脚本特性为clip。


兼容性：

支持版本\类型

较早版本 6.0-7.0#14.0 5.1 13.0 11.50

较新版本 8.0

1. IE7及更早浏览器只支持rect()内部的数值以空格分隔的方式，不

支持以逗号分隔。

示例：


<title>clip_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{position:absolute;height:50px;line-height:50px;clip:rect(0auto35px10px);background:#eee;}</style></head><body><divclass="test">看看被剪切后的效果</div></body></html>

运行

提交问题





考

选


overflow版本：CSS2继承性：无

提交问题


语法：

overflow：<overflow-style>{1,2}

<overflow-style>=visible|hidden|scroll|auto

默认值：visible

visible：

hidden：

scroll：

auto：

取值：

不剪切内容。

将超出对象尺寸的内容进行裁剪，将不出现滚动条。

将超出对象尺寸的内容进行裁剪，并以滚动条的方式显示超出

的内容。

在需要时剪切内容并添加滚动条，此为body对象和textarea的默

认值。

说明：

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。参

阅overflow-x、overflow-y属性

对于table来说，假如table-layout属性设置为fixed，则td对象支持带有

默认值为hidden的overflow属性。如果设为hidden，scroll或者auto，那

么超出td尺寸的内容将被剪切。如果设为visible，将导致额外的文本溢

出到右边或左边（视direction属性设置而定）的单元格。

对应的脚本特性为overflow。


兼容性：

支持版本\类型

较早版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>overflow_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{overflow:auto;width:200px;height:100px;background:#eee;}</style></head><body><divclass="test"> <p>苏打速度</p> <p>苏打速度</p> <p>苏打速度</p> <p>苏打速度</p> <p>苏打速度</p></div></body></html>

运行

提交问题





考

选


overflow-x版本：CSS3继承性：无

提交问题


语法：

overflow-x：<overflow-style>


默认值：visible

visible：

hidden：

scroll：

auto：

取值：

不剪切内容。

将超出对象宽度的内容进行裁剪，将不出现滚动条。

将超出对象宽度的内容进行裁剪，并以滚动条的方式显示超出

的内容。


认值。

说明：

检索或设置当对象的内容超过其指定宽度时如何管理内容。参

阅overflow、overflow-y属性

对应的脚本特性为overflowX。


兼容性：

支持版本\类型

较早版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>overflow-x_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{overflow-x:auto;width:200px;white-space:nowrap;}</style></head><body><divclass="test">当内容超出设定的宽度时自动出现横向滚动条</div></body></html>

运行

提交问题





考

选


overflow-y版本：CSS3继承性：无

提交问题


语法：

overflow-y：<overflow-style>


默认值：visible

visible：

hidden：

scroll：

auto：

取值：

不剪切内容。

将超出对象高度的内容进行裁剪，将不出现滚动条。

将超出对象高度的内容进行裁剪，并以滚动条的方式显示超出

的内容。


认值。

说明：

检索或设置当对象的内容超过其指定高度时如何管理内容。参

阅overflow、overflow-x属性

对应的脚本特性为overflowY。


兼容性：

支持版本\类型

较早版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>overflow-y_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{overflow-y:auto;width:200px;height:100px;}</style></head><body><divclass="test"> <ul> <li>新闻列表</li> <li>新闻列表</li> <li>新闻列表</li> <li>新闻列表</li> <li>新闻列表</li> <li>新闻列表</li> </ul></div></body></html>

运行

提交问题




CSS参考手册»属性列表»弹性盒模型属性» 弹性盒模型属性

参考

选


box-orient版本：CSS3继承性：无

提交问题


语法：

box-orient：horizontal|vertical

默认值：horizontal

horizontal：

vertical：

取值：

设置弹性盒模型对象的子元素为水平排列

设置弹性盒模型对象的子元素为纵向排列

说明：

设置或检索弹性盒模型对象的子元素的排列方式。

对应的脚本特性为boxOrient。


兼容性：

支持版本\类型

较早版本 6.0-9.04.0-9.0 5.1 13.0-16.0 11.50-11.60

较新版本 10.0

示例：


<title>box-orient_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>h1{font:bold20px/1.5georgia,simsun,sans-serif;}.box{display:-webkit-box;display:-moz-box;display:-o-box;display:-ms-box;display:box;width:600px;height:180px;margin:0;padding:0;list-style:none;}#box{-webkit-box-orient:horizontal;-moz-box-orient:horizontal;-o-box-orient:horizontal;-ms-box-orient:horizontal;box-orient:horizontal;}#box2{-webkit-box-orient:vertical;-moz-box-orient:vertical;-o-box-orient:vertical;-ms-box-orient:vertical;box-orient:vertical;}.boxli:nth-child(1){-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;-ms-box-flex:1;box-flex:1;background:#666;}.boxli:nth-child(2){-webkit-box-flex:2;-moz-box-flex:2;-o-box-flex:2;-ms-box-flex:2;box-flex:2;background:#999;}.boxli:nth-child(3){-webkit-box-flex:3;-moz-box-flex:3;-o-box-flex:3;-ms-box-flex:3;box-flex:3;background:#ccc;}</style></head><body><h1>子元素横向排列box-orient:horizontal;</h1><ulid="box"class="box"> <li>1</li> <li>2</li> <li>3</li></ul><h1>子元素纵向排列box-orient:horizontal;</h1><ulid="box2"class="box"> <li>1</li> <li>2</li> <li>3</li></ul></body></html>

运行

提交问题





参考

选


box-pack版本：CSS3继承性：无

提交问题


语法：

box-pack：start|center|end|justify

默认值：start

start：

center：

end：

justify：

取值：

设置弹性盒模型对象的子元素从开始位置对齐（大部分情况等

同于左对齐）

设置弹性盒模型对象的子元素居中对齐

设置弹性盒模型对象的子元素从结束位置对齐（大部分情况等

同于右对齐）

设置或弹性盒模型对象的子元素两端对齐

说明：

设置或检索弹性盒模型对象的子元素的对齐方式。查看其兄弟属

性box-align，两者的效果正好（相反）互补

box-pack的对齐方式受box-orient影响；

默认情况下（即box-orient设置为horizontal）start和end所呈现的效果等

同于左对齐和右对齐；

当box-orient设置为vertical时，start和end所呈现的效果等同于顶部对齐

和底部对齐；

对应的脚本特性为boxPack。


兼容性：

支持版本\类型

较早版本 6.0-9.04.0-9.0#1 5.1 13.0-16.0 11.50-11.60

较新版本 10.0

1. Firefox4.0-9.0不支持box-pack的justify属性值。

示例：


<title>box-pack_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>h1{font:bold20px/1.5georgia,simsun,sans-serif;}.box,.box2{display:-webkit-box;display:-moz-box;display:-o-box;display:-ms-box;display:box;margin:0;padding:10px;background:#000;list-style:none;}.box{-webkit-box-orient:horizontal;-moz-box-orient:horizontal;-o-box-orient:horizontal;-ms-box-orient:horizontal;box-orient:horizontal;width:260px;height:100px;}.box2{-webkit-box-orient:vertical;-moz-box-orient:vertical;-o-box-orient:vertical;-ms-box-orient:vertical;box-orient:vertical;width:100px;height:260px;}#box,#box5{-webkit-box-pack:start;-moz-box-pack:start;-o-box-pack:start;-ms-box-pack:start;box-pack:start;}#box2,#box6{-webkit-box-pack:center;-moz-box-pack:center;-o-box-pack:center;-ms-box-pack:center;box-pack:center;}#box3,#box7{-webkit-box-pack:end;-moz-box-pack:end;-o-box-pack:end;-ms-box-pack:end;box-pack:end;}#box4,#box8{-webkit-box-pack:justify;-moz-box-pack:justify;-o-box-pack:justify;-ms-box-pack:justify;box-pack:justify;}.boxli{width:50px;}.box2li{height:50px;}.boxli:nth-child(1),.box2li:nth-child(1){background:#666;}.boxli:nth-child(2),.box2li:nth-child(2){background:#999;}.boxli:nth-child(3),.box2li:nth-child(3){background:#ccc;}</style></head><body><h1>横向排列时子元素从起始位置对齐box-pack:start;</h1><ulid="box"class="box"> <li>1</li> <li>2</li> <li>3</li></ul><h1>横向排列时子元素居中对齐box-pack:center;</h1><ulid="box2"class="box"> <li>1</li> <li>2</li>

运行

提交问题





参考

选


box-align版本：CSS3继承性：无

提交问题


语法：

box-align：start|end|center|baseline|stretch

默认值：stretch

start：

center：

end：

baseline：

stretch：

取值：

设置弹性盒模型对象的子元素从开始位置对齐

设置弹性盒模型对象的子元素居中对齐

设置弹性盒模型对象的子元素从结束位置对齐

设置弹性盒模型对象的子元素基线对齐

设置弹性盒模型对象的子元素自适应父元素尺寸

说明：

设置或检索弹性盒模型对象的子元素的对齐方式。查看其兄弟属

性box-pack，两者的效果正好（相反）互补

box-align的对齐方式受box-orient影响；

默认情况下（即box-orient设置为horizontal）start和end所呈现的效果等

同于顶部对齐和底部对齐；

当box-orient设置为vertical时，start和end所呈现的效果等同于左对齐和

右对齐；

对应的脚本特性为boxAlign。


兼容性：

支持版本\类型

较早版本 6.0-9.04.0-9.0 5.1 13.0-16.0 11.50-11.60

较新版本 10.0

示例：


<title>box-align_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>h1{font:bold20px/1.5georgia,simsun,sans-serif;}.box,.box2{display:-webkit-box;display:-moz-box;display:-o-box;display:-ms-box;display:box;margin:0;padding:10px;background:#000;list-style:none;}.box{-webkit-box-orient:horizontal;-moz-box-orient:horizontal;-o-box-orient:horizontal;-ms-box-orient:horizontal;box-orient:horizontal;width:260px;height:100px;}.box2{-webkit-box-orient:vertical;-moz-box-orient:vertical;-o-box-orient:vertical;-ms-box-orient:vertical;box-orient:vertical;width:100px;height:260px;}#box,#box6{-webkit-box-align:start;-moz-box-align:start;-o-box-align:start;-ms-box-align:start;box-align:start;}#box2,#box7{-webkit-box-align:center;-moz-box-align:center;-o-box-align:center;-ms-box-align:center;box-align:center;}#box3,#box8{-webkit-box-align:end;-moz-box-align:end;-o-box-align:end;-ms-box-align:end;box-align:end;}#box4,#box9{-webkit-box-align:baseline;-moz-box-align:baseline;-o-box-align:baseline;-ms-box-align:baseline;box-align:baseline;}#box5,#box10{-webkit-box-align:stretch;-moz-box-align:stretch;-o-box-align:stretch;-ms-box-align:stretch;box-align:stretch;}.boxli,.box2li{padding:10px;}.boxli:nth-child(1),.box2li:nth-child(1){background:#666;}.boxli:nth-child(2),.box2li:nth-child(2){background:#999;}.boxli:nth-child(3),.box2li:nth-child(3){background:#ccc;}</style></head><body><h1>横向排列时子元素从起始位置对齐box-align:start;</h1><ulid="box"class="box"> <li>1</li> <li>2</li> <li>3</li></ul><h1>横向排列时子元素居中对齐box-align:center;</h1><ulid="box2"class="box">

运行

提交问题





参考

选


box-flex版本：CSS3继承性：无

提交问题


语法：

box-flex：<number>

默认值：0

<number>：

取值：

使用浮点数指定对象所分配其父元素剩余空间的比例。

说明：

设置或检索弹性盒模型对象的子元素如何分配其剩余空间。

示例：将一个容器分成6份，子对象a分1份，b分2份，c分3份

HTMLCode：

<ulid="box">

<li>a</li>

<li>b</li>

<li>c</li>

</ul>

CSSCode：

#box{display:box;width:240px;height:100px;margin:0;padding:10px;list-style:none;}

#boxli:nth-child(1){box-flex:1;}



上面代码请自行加上-moz-,-webkit-之类的。box-flex生效需定义

其父元素display为box或inline-box

误区：注意box-flex只是动态分配父元素的剩余空间，而不是整个父元

素的空间。如上例，父元素#box的宽度为240px，如果你认为a,b,c的宽

度分别为60,60,120那么就错了，因为box-flex只是分配父元素的剩余

空间而已，所以a,b,c所分到的应该是除内容外所剩余下来的宽度

为了清晰所谓的剩余空间分配，对上例稍作修改，HTMLCode不变

CSSCode：

#box{display:box;width:240px;height:100px;margin:0;padding:10px;list-style:none;}

.boxli{width:50px;padding:7px;}




从上面的代码，我们可以知道a,b,c的宽度分别为50+7*2=64px，

三者加起来即192px，所以剩下的240-192=48px才是父元素的剩余

空间，于是a,b,c按照设定的1:1:2来分配这48px，a分得12px，b分

得12px，c分得24px，所以最终a=64+12=76px，b=64+12=76px，

c=64+24=88px

对应的脚本特性为boxFlex。


兼容性：

支持版本\类型

较早版本 6.0-9.04.0-9.0 5.1 13.0-16.0 11.50-11.60

较新版本 10.0

示例：


<title>box-flex_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>h1{font:bold20px/1.5georgia,simsun,sans-serif;}.box{display:-webkit-box;display:-moz-box;display:-o-box;display:-ms-box;display:box;background:#000;width:240px;height:100px;margin:0;padding:10px;list-style:none;vertical-align:top;}#boxli:nth-child(1){-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;-ms-box-flex:1;box-flex:1;background:#666;}#boxli:nth-child(2){-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;-ms-box-flex:1;box-flex:1;background:#999;}#boxli:nth-child(3){-webkit-box-flex:2;-moz-box-flex:2;-o-box-flex:2;-ms-box-flex:2;box-flex:2;background:#ccc;}</style></head><body><h1>box-flex示例：</h1><ulid="box"class="box"> <li>a</li> <li>b</li> <li>c</li></ul></body></html>

运行

提交问题





参考

选


box-flex-group版本：CSS3继承性：无

提交问题


语法：

box-flex-group：<integer>

默认值：1

<integer>：

取值：

用整数值来定义弹性盒模型对象的子元素所在的组。

说明：

设置或检索弹性盒模型对象的子元素的所属组。

动态给数值较大的组分配其内容所需的实际空间（如无内容、

padding、border则不占空间），剩余空间则均分给数值最小的那个组

（可能有1个或多个元素）

对应的脚本特性为boxFlexGroup。


兼容性：

支持版本\类型

较早版本 6.0-9.04.0-9.0 5.1 13.0-16.0 11.50-11.60

较新版本 10.0

示例：


<title>box-flex-group_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>h1{font:bold20px/1.5georgia,simsun,sans-serif;}.box{display:-webkit-box;display:-moz-box;display:-o-box;display:-ms-box;display:box;background:#000;width:240px;height:100px;margin:0;padding:10px;list-style:none;vertical-align:top;}.boxli:nth-child(1){-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;-ms-box-flex:1;box-flex:1;-webkit-box-flex-group:1;-moz-box-flex-group:1;-o-box-flex-group:1;-ms-box-flex-group:1;box-flex-group:1;background:#666;}.boxli:nth-child(2){-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;-ms-box-flex:1;box-flex:1;-webkit-box-flex-group:2;-moz-box-flex-group:2;-o-box-flex-group:2;-ms-box-flex-group:2;box-flex-group:2;background:#999;}.boxli:nth-child(3){-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;-ms-box-flex:1;box-flex:1;-webkit-box-flex-group:1;-moz-box-flex-group:1;-o-box-flex-group:1;-ms-box-flex-group:1;box-flex-group:1;background:#ccc;}</style></head><body><h1>box-flex-group</h1><ulid="box"class="box"> <li>a</li> <li>b</li> <li>c</li></ul></body></html>

运行

提交问题





参考

选


box-ordinal-group版本：CSS3继承性：无

提交问题


语法：

box-ordinal-group：<integer>

默认值：1

<integer>：

取值：

用整数值来定义弹性盒模型对象的子元素显示顺序。

说明：

设置或检索弹性盒模型对象的子元素的显示顺序。

数值较低的元素显示在数值较高的元素前面；

相同数值的元素，它们的显示顺序取决于它们的代码顺序；

对应的脚本特性为boxOrdinalGroup。


兼容性：

支持版本\类型

较早版本 6.0-9.04.0-9.0 5.1 13.0-16.0 11.50-11.60

较新版本 10.0

示例：


<title>box-ordinal-group_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>h1{font:bold20px/1.5georgia,simsun,sans-serif;}.box{display:-webkit-box;display:-moz-box;display:-o-box;display:-ms-box;display:box;background:#000;width:240px;height:100px;margin:0;padding:10px;list-style:none;vertical-align:top;}.boxli{padding:20px;}.boxli:nth-child(1){-webkit-box-ordinal-group:3;-moz-box-ordinal-group:3;-o-box-ordinal-group:3;-ms-box-ordinal-group:3;box-ordinal-group:3;background:#666;}.boxli:nth-child(2){background:#999;}.boxli:nth-child(3){background:#ccc;}</style></head><body><h1>box-radinal-group</h1><ulid="box"class="box"> <li>a</li> <li>b</li> <li>c</li></ul></body></html>

运行

提交问题





参考

选


box-direction版本：CSS3继承性：无

提交问题


语法：

box-direction：normal|reverse

默认值：normal

normal：

reverse：

取值：

设置弹性盒模型对象的子元素按正常顺序排列

反转弹性盒模型对象的子元素的排列顺序

说明：

设置或检索弹性盒模型对象的子元素的排列顺序是否反转。

Firefox设置box-direction为reverse时，在将元素的排列顺序反转的同时

也将元素的对齐方式逆转了；Safari和Chrome则只是反转元素排列顺

序

对应的脚本特性为boxDirection。


兼容性：

支持版本\类型

较早版本 6.0-9.04.0-9.0 5.1 13.0-16.0 11.50-11.60

较新版本 10.0

示例：


<title>box-direction_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>h1{font:bold20px/1.5georgia,simsun,sans-serif;}.box{display:-webkit-box;display:-moz-box;display:-o-box;display:-ms-box;display:box;background:#000;width:240px;height:100px;margin:0;padding:10px;list-style:none;vertical-align:top;}.boxli{width:60px;}.boxli:nth-child(1){background:#666;}.boxli:nth-child(2){background:#999;}.boxli:nth-child(3){background:#ccc;}#box{-webkit-box-direction:normal;-moz-box-direction:normal;-o-box-direction:normal;-ms-box-direction:normal;box-direction:normal;}#box2{-webkit-box-direction:reverse;-moz-box-direction:reverse;-o-box-direction:reverse;-ms-box-direction:reverse;box-direction:reverse;}</style></head><body><h1>box-direction:normal;</h1><ulid="box"class="box"> <li>a</li> <li>b</li> <li>c</li></ul><h1>box-direction:reverse;</h1><ulid="box2"class="box"> <li>a</li> <li>b</li> <li>c</li></ul></body></html>

运行

提交问题





参考

选


box-lines版本：CSS3继承性：无

提交问题


语法：

box-lines：single|multiple

默认值：single

single：

multiple：

取值：

弹性盒模型对象的子元素只在一行内显示

弹性盒模型对象的子元素超出父元素的空间时换行显示

说明：

设置或检索弹性盒模型对象的子元素是否可以换行显示。

Safari和Chrome已经支持box-lines，但没有实现该属性的效果

对应的脚本特性为boxLines。


兼容性：

支持版本\类型

较早版本 6.0-9.04.0-9.0 5.1 13.0-16.0 11.50-11.60

较新版本 10.0

示例：


<title>box-lines_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>h1{font:bold20px/1.5georgia,simsun,sans-serif;}.box{display:-webkit-box;display:-moz-box;display:-o-box;display:-ms-box;display:box;background:#000;width:240px;height:100px;margin:0;padding:10px;list-style:none;vertical-align:top;}.boxli{width:160px;}.boxli:nth-child(1){background:#666;}.boxli:nth-child(2){background:#999;}.boxli:nth-child(3){background:#ccc;}#box{-webkit-box-lines:single;-moz-box-lines:single;-o-box-lines:single;-ms-box-lines:single;box-lines:single;}#box2{-webkit-box-lines:multiple;-moz-box-lines:multiple;-o-box-lines:multiple;-ms-box-lines:multiple;box-lines:multiple;}</style></head><body><h1>box-lines:single;</h1><ulid="box"class="box"> <li>a</li> <li>b</li> <li>c</li></ul><h1>box-lines:multiple;</h1><ulid="box2"class="box"> <li>a</li> <li>b</li> <li>c</li></ul></body></html>

运行

提交问题




CSS参考手册»属性列表»尺寸属性» 其它尺寸属性参

考

选


width版本：CSS1继承性：无

提交问题


语法：

width：<length>|<percentage>|auto

默认值：auto

auto：

<length>：

<percentage>：

取值：

无特定宽度值，取决于其它属性值

用长度值来定义宽度。不允许负值

用百分比来定义宽度。不允许负值

说明：

检索或设置对象的宽度。

对于img对象来说，仅指定此属性，其height值将根据图片源尺寸等比

例缩放。

对于盒模型规则，请参阅box-sizing属性。

对应的脚本特性为width。


兼容性：

支持版本\类型

较早版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>width_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{width:200px;background:#eee;}</style></head><body><divclass="test">我的宽度为200</div></body></html>

运行

提交问题





考

选


min-width版本：CSS2继承性：无

提交问题


语法：

min-width：<length>|<percentage>

默认值：0

<length>：

<percentage>：

取值：

用长度值来定义最小宽度。不允许负值

用百分比来定义最小宽度。不允许负值

说明：

设置或检索对象的最小宽度。

如果min-width属性的值大于max-width属性的值，max-width将会自动

以min-width的值作为自己的值。

IE6尚不支持此属性

对应的脚本特性为minWidth。


兼容性：

支持版本\类型

较早版本 6.04.0 5.1 13.0 11.50

较新版本 7.0

示例：


<title>min-width_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{float:left;min-width:200px;background:#eee;}</style></head><body><divclass="test">我的最小宽度为200</div></body></html>

运行

提交问题





考

选


max-width版本：CSS2继承性：无

提交问题


语法：

max-width：<length>|<percentage>|none

默认值：none

none：

<length>：

<percentage>：

取值：

无最大宽度限制

用长度值来定义最大宽度。不允许负值

用百分比来定义最大宽度。不允许负值

说明：

设置或检索对象的最大宽度。

如果max-width属性的值小于min-width属性的值，max-width将会自动

以min-width的值作为自己的值。


对应的脚本特性为maxWidth。


兼容性：

支持版本\类型

较早版本 6.04.0 5.1 13.0 11.50

较新版本 7.0

示例：


<title>max-width_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{max-width:200px;background:#eee;}</style></head><body><divclass="test">我的最大宽度为200</div></body></html>

运行

提交问题





考

选


height版本：CSS1继承性：无

提交问题


语法：

height：<length>|<percentage>|auto

默认值：auto

auto：

<length>：

<percentage>：

取值：

无特定高度值，取决于其它属性值

用长度值来定义高度。不允许负值

用百分比来定义高度。不允许负值

说明：

检索或设置对象的高度。

对于img对象来说，仅指定此属性，其width值将根据图片源尺寸等比

例缩放。

对于盒模型规则，请参阅box-sizing属性。

对应的脚本特性为height。


兼容性：

支持版本\类型

较早版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>height_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{height:200px;background:#eee;}</style></head><body><divclass="test">我的高度为200</div></body></html>

运行

提交问题





考

选


min-height版本：CSS2继承性：无

提交问题


语法：

min-height：<length>|<percentage>

默认值：0

<length>：

<percentage>：

取值：

用长度值来定义最小高度。不允许负值

用百分比来定义最小高度。不允许负值

说明：

检索或设置对象的最小高度。

如果min-height属性的值大于max-height属性的值，max-height将会自动

以min-height的值作为自己的值。

IE6尚不支持此属性。IE6的变通实现方法请参与CSS探索之旅的相关

文章。

对应的脚本特性为minHeight。

http://blog.doyoe.com/


兼容性：

支持版本\类型

较早版本 6.04.0 5.1 13.0 11.50

较新版本 7.0

示例：


<title>min-height_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{min-height:200px;background:#eee;}</style></head><body><divclass="test">我的最小高度为200</div></body></html>

运行

提交问题





考

选


max-height版本：CSS2继承性：无

提交问题


语法：

max-height：<length>|<percentage>|none

默认值：none

none：

<length>：

<percentage>：

取值：

无最小高度限制

用长度值来定义最大高度。不允许负值

用百分比来定义最大高度。不允许负值

说明：

检索或设置对象的最大高度。

如果max-height属性的值小于min-height属性的值，max-height将会自动

以min-height的值作为自己的值。


对应的脚本特性为maxHeight。


兼容性：

支持版本\类型

较早版本 6.04.0 5.1 13.0 11.50

较新版本 7.0

示例：


<title>max-height_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{max-height:30px;background:#eee;}</style></head><body><divclass="test"> <p>我的最大高度为30</p> <p>灰色背景区域以外不是我的领土</p></div></body></html>

运行

提交问题




CSS参考手册»属性列表»外补白属性» 其它外补白属性

参考

选


margin版本：CSS1继承性：无

提交问题


语法：

margin：[<length>|<percentage>|auto]{1,4}

默认值：看每个独立属性

相关属性：[margin-top]||[margin-right]||[margin-bottom]||[margin-

left]

auto：

<length>：

<percentage>：

取值：

值被设置为相对边的值

用长度值来定义外补白。可以为负值

用百分比来定义外补白。可以为负值

说明：

检索或设置对象四边的外延边距。

如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。

如果只提供一个，将用于全部的四边。

如果提供两个，第一个用于上、下，第二个用于左、右。

如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。

内联对象可以使用该属性设置左、右两边的外补丁；若要设置上、下

两边的外补丁，必须先使该对象表现为块级或内联块级。

外延边距始终透明。

对应的脚本特性为margin。


兼容性：

支持版本\类型

较早版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>margin_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{margin:20px;background:#eee;}</style></head><body><divclass="test">注意我距上、右、下、左的距离</div></body></html>

运行

提交问题





参考

选


margin-top版本：CSS1继承性：无

提交问题


语法：

margin-top：[<length>|<percentage>|auto]{1,4}

默认值：0

相关属性：[margin]||[margin-right]||[margin-bottom]||[margin-left

]

auto：

<length>：

<percentage>：

取值：




说明：

检索或设置对象顶边的外延边距。

内联对象要使用该属性必须先使该对象表现为块级或内联块级。


对应的脚本特性为marginTop。


兼容性：

支持版本\类型

较早版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>margin-top_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{margin-top:50px;background:#eee;}</style></head><body><divclass="test">注意我距顶边的距离</div></body></html>

运行

提交问题





参考

选


margin-right版本：CSS1继承性：无

提交问题


语法：

margin-right：[<length>|<percentage>|auto]{1,4}

默认值：0

相关属性：[margin]||[margin-top]||[margin-bottom]||[margin-left]

auto：

<length>：

<percentage>：

取值：




说明：

检索或设置对象右边的外延边距。

内联对象可以使用该属性设置右边距。


对应的脚本特性为marginRight。


兼容性：

支持版本\类型

较早版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>margin-right_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{float:right;margin-right:50px;background:#eee;}</style></head><body><divclass="test">注意我距右边的距离</div></body></html>

运行

提交问题





参考

选


margin-bottom版本：CSS1继承性：无

提交问题


语法：

margin-bottom：[<length>|<percentage>|auto]{1,4}

默认值：0

相关属性：[margin]||[margin-top]||[margin-right]||[margin-left]

auto：

<length>：

<percentage>：

取值：




说明：

检索或设置对象底边的外延边距。



对应的脚本特性为marginBottom。


兼容性：

支持版本\类型

较早版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>margin-bottom_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{position:absolute;bottom:0;margin-bottom:50px;background:#eee;}</style></head><body><divclass="test">注意我距底边的距离</div></body></html>

运行

提交问题





参考

选


margin-left版本：CSS1继承性：无

提交问题


语法：

margin-left：[<length>|<percentage>|auto]{1,4}

默认值：0

相关属性：[margin]||[margin-top]||[margin-right]||[margin-bottom

]

auto：

<length>：

<percentage>：

取值：




说明：

检索或设置对象左边的外延边距。

内联对象可以使用该属性设置左边距。


对应的脚本特性为marginLeft。


兼容性：

支持版本\类型

较早版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>margin-left_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{margin-left:50px;background:#eee;}</style></head><body><divclass="test">注意我距左边的距离</div></body></html>

运行

提交问题




CSS参考手册»属性列表»内补白属性» 其它内补白属性

参考

选


padding版本：CSS1继承性：无

提交问题


语法：

padding：[<length>|<percentage>]{1,4}


相关属性：[padding-top]||[padding-right]||[padding-bottom]||[

padding-left]

<length>：

<percentage>：

取值：

用长度值来定义内补白。不允许负值

用百分比来定义内补白。不允许负值

说明：

检索或设置对象四边的内部边距。





内联对象可以使用该属性设置左、右两边的内补丁；若要设置上、下

两边的内补丁，必须先使该对象表现为块级或内联块级。

对应的脚本特性为padding。


兼容性：

支持版本\类型

较早版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>padding_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{float:left;padding:10px;border:1pxsolid#000;}</style></head><body><divclass="test">注意我离4条边框线的距离</div></body></html>

运行

提交问题





参考

选


padding-top版本：CSS1继承性：无

提交问题


语法：

padding-top：[<length>|<percentage>]{1,4}

默认值：0

相关属性：[padding]||[padding-right]||[padding-bottom]||[padding-

left]

<length>：

<percentage>：

取值：



说明：

检索或设置对象顶边的内补白。


对应的脚本特性为paddingTop。


兼容性：

支持版本\类型

较早版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>padding-top_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{float:left;padding-top:10px;border:1pxsolid#000;}</style></head><body><divclass="test">注意我离顶部边框线的距离</div></body></html>

运行

提交问题





参考

选


padding-right版本：CSS1继承性：无

提交问题


语法：

padding-right：[<length>|<percentage>]{1,4}

默认值：0

相关属性：[padding]||[padding-top]||[padding-bottom]||[padding-

left]

<length>：

<percentage>：

取值：



说明：

检索或设置对象右边的内补白。

内联对象可以使用该属性设置内补白。

对应的脚本特性为paddingRight。


兼容性：

支持版本\类型

较早版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>padding-right_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{float:left;padding-right:10px;border:1pxsolid#000;}</style></head><body><divclass="test">注意我离右边边框线的距离</div></body></html>

运行

提交问题





参考

选


padding-bottom版本：CSS1继承性：无

提交问题


语法：

padding-bottom：[<length>|<percentage>]{1,4}

默认值：0

相关属性：[padding]||[padding-top]||[padding-right]||[padding-left

]

<length>：

<percentage>：

取值：



说明：

检索或设置对象底边的内补白。


对应的脚本特性为paddingBottom。


兼容性：

支持版本\类型

较早版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>padding-bottom_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{float:left;padding-bottom:10px;border:1pxsolid#000;}</style></head><body><divclass="test">注意我离底部边框线的距离</div></body></html>

运行

提交问题





参考

选


padding-left版本：CSS1继承性：无

提交问题


语法：

padding-left：[<length>|<percentage>]{1,4}

默认值：0

相关属性：[padding]||[padding-top]||[padding-right]||[padding-

bottom]

<length>：

<percentage>：

取值：



说明：

检索或设置对象左边的内补白。

内联对象可以使用该属性设置左边内补白。

对应的脚本特性为paddingLeft。


兼容性：

支持版本\类型

较早版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>padding-left_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{float:left;padding-left:10px;border:1pxsolid#000;}</style></head><body><divclass="test">注意我离左边边框线的距离</div></body></html>

运行

提交问题




CSS参考手册»属性列表»边框属性» 其它边框属性参

考

选


border版本：CSS1继承性：无

提交问题


语法：

border：[border-width]||[border-style]||[border-color]


相关属性：[border-top]||[border-right]||[border-bottom]||[border-

left]

[border-width]：

[border-style]：

[border-color]：

取值：

设置或检索对象边框宽度。

设置或检索对象边框样式。

设置或检索对象边框颜色。

说明：

复合属性。设置对象边框的特性。参阅outline属性。

如使用该复合属性定义其单个参数，则其他参数的默认值将无条件覆

盖各自对应的单个属性设置。

对应的脚本特性为border。


兼容性：

支持版本\类型

较早版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>border_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{border:5pxsolid#000;}.test2{margin-top:10px;border:5pxsolid;color:#f00;}</style></head><body><divclass="test">定义边框特性</div><divclass="test2">边框颜色默认使用文本颜色</div></body></html>

运行

提交问题





考

选


border-width版本：CSS1继承性：无

提交问题


语法：

border-width：<border-width>{1,4}

<border-width>=<length>|thin|medium|thick


相关属性：[border-top-width]||[border-right-width]||[border-bottom-

width]||[border-left-width]

<length>：

medium：

thin：

thick：

取值：

用长度值来定义边框的厚度。不允许负值

定义默认厚度的边框。

定义比默认厚度细的边框。

定义比默认厚度粗的边框。

说明：

设置或检索对象的边框宽度。





如果border-style设置为none，本属性将失去作用。

对应的脚本特性为borderWidth。


兼容性：

支持版本\类型

较早版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>border-width_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{padding:10px;border-width:1px;border-style:solid;border-color:#000;}.test2{margin-top:10px;padding:10px;border-width:1px5px;border-style:solid;border-color:#000#f00;}.test3{margin-top:10px;padding:10px;border-width:1px5px10px;border-style:solid;border-color:#000#f00#090;}.test4{margin-top:10px;padding:10px;border-width:1px5px10px15px;border-style:solid;border-color:#000#f00#090#0ff;}</style></head><body><divclass="test">提供1个参数</div><divclass="test2">提供2个参数</div><divclass="test3">提供3个参数</div><divclass="test4">提供4个参数</div></body></html>

运行

提交问题





考

选


border-style版本：CSS1继承性：无

提交问题


语法：

border-style：<border-style>{1,4}

<border-style>=none|hidden|dotted|dashed|solid|double|groove|

ridge|inset|outset


相关属性：[border-top-style]||[border-right-style]||[border-bottom-

style]||[border-left-style]

none：

hidden：

dotted：

dashed：

solid：

double：

groove：

ridge：

inset：

outset：

取值：

无轮廓。border-color与border-width将被忽略

隐藏边框。IE7及以下尚不支持

点状轮廓。IE6下显示为dashed效果

虚线轮廓。

实线轮廓

双线轮廓。两条单线与其间隔的和等于指定的border-width值

3D凹槽轮廓。

3D凸槽轮廓。

3D凹边轮廓。

3D凸边轮廓。

说明：

设置或检索对象的边框样式。





如果border-width等于0，本属性将失去作用。

对应的脚本特性为borderStyle。


兼容性：

支持版本\类型

较早版本 6.0#1

4.0 5.1 13.0 11.50较新版本 7.0#2

最近版本 8.0

1. IE6及更早浏览器不支持hidden属性值，且会将dotted属性值显示

为dashed的效果。

2. IE7及更早浏览器不支持hidden属性值。

示例：


<title>border-style_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>div{float:left;margin-right:5px;}.none{padding:10px;border:0none;background:#eee;}.hidden{padding:10px;border:3pxhidden#000;background:#eee;}.dotted{padding:10px;border:3pxdotted#000;background:#eee;}.dashed{padding:10px;border:3pxdashed#000;background:#eee;}.solid{padding:10px;border:3pxsolid#000;background:#eee;}.double{padding:10px;border:3pxdouble#000;background:#eee;}.groove{padding:10px;border:3pxgroove#000;background:#eee;}.ridge{padding:10px;border:3pxridge#000;background:#eee;}.inset{padding:10px;border:3pxinset#000;background:#eee;}.outset{padding:10px;border:3pxoutset#000;background:#eee;}</style></head><body><divclass="none">none</div><divclass="hidden">hidden</div><divclass="dotted">dotted</div><divclass="dashed">dashed</div><divclass="solid">solid</div><divclass="double">double</div><divclass="groove">groove</div><divclass="ridge">ridge</div><divclass="inset">inset</div><divclass="outset">outset</div></body></html>

运行

提交问题





考

选


border-color版本：CSS1继承性：无

提交问题


语法：

border-color：<color>{1,4}


相关属性：[border-top-color]||[border-right-color]||[border-bottom-

color]||[border-left-color]

<color>：

取值：

指定颜色。

说明：

设置或检索对象的边框颜色。参阅border-colors属性。





如果border-width等于0或border-style设置为none，本属性将被忽略。

对应的脚本特性为borderColor。


兼容性：

支持版本\类型

较早版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>border-color_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{padding:10px;border-width:1px;border-style:solid;border-color:#000;}.test2{margin-top:10px;padding:10px;border-width:1px;border-style:solid;border-color:#000#f00;}.test3{margin-top:10px;padding:10px;border-width:1px;border-style:solid;border-color:#000#f00#090;}.test4{margin-top:10px;padding:10px;border-width:1px;border-style:solid;border-color:#000#f00#090#0ff;}</style></head><body><divclass="test">提供1个参数</div><divclass="test2">提供2个参数</div><divclass="test3">提供3个参数</div><divclass="test4">提供4个参数</div></body></html>

运行

提交问题





考

选


border-top版本：CSS1继承性：无

提交问题


语法：

border-top：[border-top-width]||[border-top-style]||[border-top-color

]


相关属性：[border]||[border-right]||[border-bottom]||[border-left]

[border-top-width]：

[border-top-style]：

[border-top-color]：

取值：

设置或检索对象的顶部边框宽度。

设置或检索对象的顶部边框样式。

设置或检索对象的顶部边框颜色。

说明：

复合属性。设置对象顶部边框的特性。参阅border属性。



对应的脚本特性为borderTop。


兼容性：

支持版本\类型

较早版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>border-top_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{border-top:5pxsolid#000;}</style></head><body><divclass="test">定义顶部边框特性</div></body></html>

运行

提交问题





考

选


border-top-width版本：CSS1继承性：无

提交问题


语法：

border-top-width：<border-width>


默认值：medium

相关属性：[border-width]||[border-right-width]||[border-bottom-

width]||[border-left-width]

<length>：

medium：

thin：

thick：

取值：





说明：

设置或检索对象的顶部边框宽度。


对应的脚本特性为borderTopWidth。


兼容性：

支持版本\类型

较早版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>border-top-width_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{padding:10px;border-top-width:5px;border-top-style:solid;border-top-color:#000;}</style></head><body><divclass="test">设置顶部边框宽度为5px</div></body></html>

运行

提交问题





考

选


border-top-style版本：CSS1继承性：无

提交问题


语法：

border-top-style：<border-style>


ridge|inset|outset

默认值：none

相关属性：[border-style]||[border-right-style]||[border-bottom-style]

||[border-left-style]

none：

hidden：

dotted：

dashed：

solid：

double：

groove：

ridge：

inset：

outset：

取值：




虚线轮廓。

实线轮廓


3D凹槽轮廓。

3D凸槽轮廓。

3D凹边轮廓。

3D凸边轮廓。

说明：

设置或检索对象的顶部边框样式。


对应的脚本特性为borderTopStyle。


兼容性：

支持版本\类型

较早版本 6.0#1

4.0 5.1 13.0 11.50较新版本 7.0#2

最近版本 8.0




示例：


<title>border-top-style_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{border-top-width:5px;border-top-style:dashed;border-top-color:#630;}</style></head><body><divclass="test">顶部边框样式</div></body></html>

运行

提交问题





考

选


border-top-color版本：CSS1继承性：无

提交问题


语法：

border-top-color：<color>

默认值：采用文本颜色

相关属性：[border-color]||[border-right-color]||[border-bottom-color

]||[border-left-color]

<color>：

取值：

指定颜色。

说明：

设置或检索对象的顶部边框颜色。参阅border-top-colors属性。


对应的脚本特性为borderTopColor。


兼容性：

支持版本\类型

较早版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>border-top-color_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{padding:10px;border-top-width:1px;border-top-style:solid;border-top-color:#000;}</style></head><body><divclass="test">设置顶部边框颜色</div></body></html>

运行

提交问题





考

选


border-right版本：CSS1继承性：无

提交问题


语法：

border-right：[border-right-width]||[border-right-style]||[border-

right-color]


相关属性：[border]||[border-top]||[border-bottom]||[border-left]

[border-right-width]：

[border-right-style]：

[border-right-color]：

取值：

设置或检索对象的右边边框宽度。

设置或检索对象的右边边框样式。

设置或检索对象的右边边框颜色。

说明：

复合属性。设置对象右边边框的特性。参阅border属性。



对应的脚本特性为borderRight。


兼容性：

支持版本\类型

较早版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>border-right_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{border-right:5pxsolid#000;}</style></head><body><divclass="test">定义右边边框特性</div></body></html>

运行

提交问题





考

选


border-right-width版本：CSS1继承性：无

提交问题


语法：

border-right-width：<border-width>


默认值：medium

相关属性：[border-width]||[border-top-width]||[border-bottom-width

]||[border-left-width]

<length>：

medium：

thin：

thick：

取值：





说明：

设置或检索对象的右边边框宽度。


对应的脚本特性为borderRightWidth。


兼容性：

支持版本\类型

较早版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>border-right-width_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{padding:10px;border-right-width:5px;border-right-style:solid;border-right-color:#000;}</style></head><body><divclass="test">设置右边边框宽度为5px</div></body></html>

运行

提交问题





考

选


border-right-style版本：CSS1继承性：无

提交问题


语法：

border-right-style：<border-style>


ridge|inset|outset

默认值：none

相关属性：[border-style]||[border-top-style]||[border-bottom-style]||

[border-left-style]

none：

hidden：

dotted：

dashed：

solid：

double：

groove：

ridge：

inset：

outset：

取值：




虚线轮廓。

实线轮廓


3D凹槽轮廓。

3D凸槽轮廓。

3D凹边轮廓。

3D凸边轮廓。

说明：

设置或检索对象的右边边框样式。


对应的脚本特性为borderRightStyle。


兼容性：

支持版本\类型

较早版本 6.0#1

4.0 5.1 13.0 11.50较新版本 7.0#2

最近版本 8.0




示例：


<title>border-right-style_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{border-right-width:5px;border-right-style:solid;border-right-color:#630}</style></head><body><divclass="test">右边边框样式</div></body></html>

运行

提交问题





考

选


border-right-color版本：CSS1继承性：无

提交问题


语法：

border-right-color：<color>


相关属性：[border-color]||[border-top-color]||[border-bottom-color]

||[border-left-color]

<color>：

取值：

指定颜色。

说明：

设置或检索对象的右边边框颜色。参阅border-right-colors属性。


对应的脚本特性为borderRightColor。


兼容性：

支持版本\类型

较早版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>border-right-color_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{padding:10px;border-right-width:1px;border-right-style:solid;border-right-color:#000;}</style></head><body><divclass="test">设置右边边框颜色</div></body></html>

运行

提交问题





考

选


border-bottom版本：CSS1继承性：无

提交问题


语法：

border-bottom：[border-bottom-width]||[border-bottom-style]||[

border-bottom-color]


相关属性：[border]||[border-top]||[border-right]||[border-left]

[border-bottom-width]：

[border-bottom-style]：

[border-bottom-color]：

取值：

设置或检索对象的底部边框宽度。

设置或检索对象的底部边框样式。

设置或检索对象的底部边框颜色。

说明：

复合属性。设置对象底部边框的特性。参阅border属性。



对应的脚本特性为borderBottom。


兼容性：

支持版本\类型

较早版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>border-bottom_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{border-bottom:5pxsolid#000;}</style></head><body><divclass="test">定义底部边框特性</div></body></html>

运行

提交问题





考

选


border-bottom-width版本：CSS1继承性：无

提交问题


语法：

border-bottom-width：<border-width>


默认值：medium

相关属性：[border-width]||[border-top-width]||[border-right-width]||

[border-left-width]

<length>：

medium：

thin：

thick：

取值：





说明：

设置或检索对象的底部边框宽度。


对应的脚本特性为borderBottomWidth。


兼容性：

支持版本\类型

较早版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>border-bottom-width_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{padding:10px;border-bottom-width:5px;border-bottom-style:solid;border-bottom-color:#000;}</style></head><body><divclass="test">设置底部边框宽度为5px</div></body></html>

运行

提交问题





考

选


border-bottom-style版本：CSS1继承性：无

提交问题


语法：

border-bottom-style：<border-style>


ridge|inset|outset

默认值：none

相关属性：[border-style]||[border-top-style]||[border-right-style]||[

border-left-style]

none：

hidden：

dotted：

dashed：

solid：

double：

groove：

ridge：

inset：

outset：

取值：




虚线轮廓。

实线轮廓


3D凹槽轮廓。

3D凸槽轮廓。

3D凹边轮廓。

3D凸边轮廓。

说明：

设置或检索对象的底部边框样式。


对应的脚本特性为borderBottomStyle。


兼容性：

支持版本\类型

较早版本 6.0#1

4.0 5.1 13.0 11.50较新版本 7.0#2

最近版本 8.0




示例：


<title>border-bottom-style_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{border-bottom-width:5px;border-bottom-style:solid;border-bottom-color:#630}</style></head><body><divclass="test">底部边框样式</div></body></html>

运行

提交问题





考

选


border-bottom-color版本：CSS1继承性：无

提交问题


语法：

border-bottom-color：<color>


相关属性：[border-color]||[border-top-color]||[border-right-color]||[

border-left-color]

<color>：

取值：

指定颜色。

说明：

设置或检索对象的底部边框颜色。参阅border-bottom-colors属性。


对应的脚本特性为borderBottomColor。


兼容性：

支持版本\类型

较早版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>border-bottom-color_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{padding:10px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#000;}</style></head><body><divclass="test">设置底部边框颜色</div></body></html>

运行

提交问题





考

选


border-left版本：CSS1继承性：无

提交问题


语法：

border-left：[border-left-width]||[border-left-style]||[border-left-color

]


相关属性：[border]||[border-top]||[border-right]||[border-bottom]

[border-left-width]：

[border-left-style]：

[border-left-color]：

取值：

设置或检索对象的左边边框宽度。

设置或检索对象的左边边框样式。

设置或检索对象的左边边框颜色。

说明：

复合属性。设置对象左边边框的特性。参阅border属性。



对应的脚本特性为borderLeft。


兼容性：

支持版本\类型

较早版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>border-left_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{border-left:5pxsolid#000;}</style></head><body><divclass="test">定义左边边框特性</div></body></html>

运行

提交问题





考

选


border-left-width版本：CSS1继承性：无

提交问题


语法：

border-left-width：<border-width>


默认值：medium

相关属性：[border-width]||[border-top-width]||[border-right-width]||

[border-bottom-width]

<length>：

medium：

thin：

thick：

取值：





说明：

设置或检索对象的左边边框宽度。


对应的脚本特性为borderLeftWidth。


兼容性：

支持版本\类型

较早版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>border-left-width_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{padding:10px;border-left-width:5px;border-left-style:solid;border-left-color:#000;}</style></head><body><divclass="test">设置底左边框宽度为5px</div></body></html>

运行

提交问题





考

选


border-left-style版本：CSS1继承性：无

提交问题


语法：

border-left-style：<border-style>


ridge|inset|outset

默认值：none

相关属性：[border-style]||[border-top-style]||[border-right-style]||[

border-bottom-style]

none：

hidden：

dotted：

dashed：

solid：

double：

groove：

ridge：

inset：

outset：

取值：




虚线轮廓。

实线轮廓


3D凹槽轮廓。

3D凸槽轮廓。

3D凹边轮廓。

3D凸边轮廓。

说明：

设置或检索对象的左边边框样式。


对应的脚本特性为borderLeftStyle。


兼容性：

支持版本\类型

较早版本 6.0#1

4.0 5.1 13.0 11.50较新版本 7.0#2

最近版本 8.0




示例：


<title>border-left-style_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{border-left-width:5px;border-left-style:solid;border-left-color:#630}</style></head><body><divclass="test">左边边框样式</div></body></html>

运行

提交问题





考

选


border-left-color版本：CSS1继承性：无

提交问题


语法：

border-left-color：<color>


相关属性：[border-color]||[border-top-color]||[border-right-color]||[

border-bottom-color]

<color>：

取值：

指定颜色。

说明：

设置或检索对象的左边边框颜色。参阅border-left-colors属性。


对应的脚本特性为borderLeftColor。


兼容性：

支持版本\类型

较早版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>border-left-color_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{padding:10px;border-left-width:1px;border-left-style:solid;border-left-color:#000;}</style></head><body><divclass="test">设置左边边框颜色</div></body></html>

运行

提交问题





考

选


border-image版本：CSS3继承性：无

提交问题


语法：

border-image：<border-image-source>||<border-image-slice>[/

<border-image-width>?[/<border-image-outset>]?]?||<border-image-

repeat>

为了方便理解border-image的取值，可将border-image理解成由

以下5个伪属性组成：

border-image-source:none|<url>

默认值：none

该属性用于指定是否用图像定义边框样式或图像来源路径。

border-image-slice:[<number>|<percentage>]{1,4}&&fill?

默认值：100%

该属性用于指定对边框背景图的分割方式

写本文档时尚无浏览器支持参数值fill关键字

border-image-width:[<length>|<percentage>|<number>|auto]

{1,4}

默认值：1

该属性用于指定边框宽度。该属性可省略，由外部的border-

width来定义

写本文档时所有浏览器只支持<length>类型的参数值

也可以省略此属性，在外部用border-width属性来设置该值

border-image-outset:[<length>|<number>]{1,4}

默认值：0

该属性用于指定对边框背景图的扩展

写本文档时尚无浏览器支持该属性

border-image-repeat:[stretch|repeat|round|space]{1,2}

默认值：stretch

该属性用于指定边框背景图的填充方式。可定义0-2个参数值，

即水平和垂直方向。如果2个值相同，可合并成1个，表示水平

和垂直方向都用相同的方式填充边框背景图；如果2个值都为

stretch，则可省略不写。

写本文档时Opera尚不支持该属性，但却默认使用了stretch的效

果

none：

<url>：

<number>：

<percentage>：

<length>：

stretch：

repeat：

round：

取值：

无背景图片。

使用绝对或相对地址指定图像。

用浮点数指定宽度。不允许负值。

用百分比指定宽度。不允许负值。

用长度值指定宽度。不允许负值。

指定用拉伸方式来填充边框背景图。

指定用平铺方式来填充边框背景图。当图片碰到边界时，如

果超过则被截断。

指定用平铺方式来填充边框背景图。图片会根据边框的尺寸

动态调整图片的大小直至正好可以铺满整个边框。写本文档时仅

Firefox能看到该效果

说明：

设置或检索对象的边框样式使用图像来填充。

使用图像替代border-style去定义边框样式。当border-image为none或图

像不可见时，将会显示border-style所定义的边框样式效果。

对应的脚本特性为borderImage。


兼容性：

支持版本\类型

版本 6.0-10.0 4.0-9.0 5.1 13.0-16.0 11.50-11.60

写法：

内核类型写法(border-image)

Webkit(Chrome/Safari) -webkit-border-image

Gecko(Firefox) -moz-border-image

Presto(Opera) -o-border-image

Trident(IE)

示例：


<title>border-image_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{padding:10px;-moz-border-image:url(skin/border.png)27/27pxstretch;-webkit-border-image:url(skin/border.png)27/27pxstretch;-o-border-image:url(skin/border.png)27/27pxstretch;border-image:url(skin/border.png)27/27px;}</style></head><body><divclass="test">用图片来做边框<br>border-image:url(skin/border.png)27/27pxstretch;</div></body></html>

运行

提交问题





考

选


border-radius版本：CSS3继承性：无

提交问题


语法：

border-radius：[<length>|<percentage>]{1,4}[/[<length>|

<percentage>]{1,4}]?

默认值：0

<length>：

<percentage>：

取值：

用长度值设置对象的圆角半径长度。不允许负值

用百分比设置对象的圆角半径长度。不允许负值

说明：

设置或检索对象使用圆角边框。提供2个参数，2个参数以“/”分隔，每

个参数允许设置1~4个参数值，第1个参数表示水平半径，第2个参数

表示垂直半径，如第2个参数省略，则默认等于第1个参数

水平半径：如果提供全部四个参数值，将按上左(top-left)、上右(top-

right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角。

如果只提供一个，将用于全部的于四个角。

如果提供两个，第一个用于上左(top-left)、下右(bottom-right)，第二个

用于上右(top-right)、下左(bottom-left)。

如果提供三个，第一个用于上左(top-left)，第二个用于上右(top-

right)、下左(bottom-left)，第三个用于下右(bottom-right)。

垂直半径也遵循以上4点。

对应的脚本特性为borderRadius。


兼容性：

支持版本\类型

较早版本 6.0-8.04.0 5.1 13.0 11.50

较新版本 9.0

示例：


<title>border-radius_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>ul{margin:0;padding:0;}li{list-style:none;margin:10px000;padding:10px;background:#bbb;}.test.one{border-radius:10px;}.test.two{border-radius:10px20px;}.test.three{border-radius:10px20px30px;}.test.four{border-radius:10px20px30px40px;}.test2.one{border-radius:10px/5px;}.test2.two{border-radius:10px20px/5px10px;}.test2.three{border-radius:10px20px30px/5px10px15px;}.test2.four{border-radius:10px20px30px40px/5px10px15px20px;}</style></head><body><h2>水平与垂直半径相同时：</h2><ulclass="test"> <liclass="one">提供1个参数<br>border-radius:10px;</li> <liclass="two">提供2个参数<br>border-radius:10px20px;</li> <liclass="three">提供3个参数<br>border-radius:10px20px30px;</li> <liclass="four">提供4个参数<br>border-radius:10px20px30px40px;</li></ul><h2>水平与垂直半径不同时：</h2><ulclass="test2"> <liclass="one">提供1个参数<br>border-radius:10px/5px;</li> <liclass="two">提供2个参数<br>border-radius:10px20px/5px10px;</li> <liclass="three">提供3个参数<br>border-radius:10px20px30px/5px10px15px;</li> <liclass="four">提供4个参数<br>border-radius:10px20px30px40px/5px10px15px20px;</li></ul></body></html>

运行

提交问题





考

选


border-top-left-radius版本：CSS3继承性：无

提交问题


语法：

border-top-left-radius：[<length>|<percentage>][<length>|

<percentage>]?

默认值：0

<length>：

<percentage>：

取值：

用长度值设置对象的左上角(top-left)圆角半径长度。不允许

负值

用百分比设置对象的左上角(top-left)圆角半径长度。不

允许负值

说明：

设置或检索对象的左上角圆角边框。提供2个参数，2个参数以空格分

隔，每个参数允许设置1个参数值，第1个参数表示水平半径，第2个参

数表示垂直半径，如第2个参数省略，则默认等于第1个参数

如设置border-top-left-radius:5px10px;表示top-left这个角的水平圆角半

径为5px，垂直圆角半径为10px。

对应的脚本特性为borderTopLeftRadius。


兼容性：

支持版本\类型

较早版本 6.0-8.04.0 5.1 13.0 11.50

较新版本 9.0

示例：


<title>border-top-left-radius_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>ul{margin:0;padding:0;}li{list-style:none;margin:10px000;padding:10px;background:#bbb;}.test.one{border-top-left-radius:30px;}.test.two{border-top-left-radius:10px30px;}</style></head><body><ulclass="test"> <liclass="one">水平与垂直半径相同时<br>border-top-left-radius:30px;</li> <liclass="two">水平与垂直半径不同时<br>border-top-left-radius:10px30px;</li></ul></body></html>

运行

提交问题





考

选


border-top-right-radius版本：CSS3继承性：无

提交问题


语法：

border-top-right-radius：[<length>|<percentage>][<length>|

<percentage>]?

默认值：0

<length>：

<percentage>：

取值：

用长度值设置对象的右上角(top-right)圆角半径长度。不允

许负值

用百分比设置对象的右上角(top-right)圆角半径长度。

不允许负值

说明：

设置或检索对象的右上角圆角边框。提供2个参数，2个参数以空格分



如设置border-top-right-radius:5px10px;表示top-right这个角的水平圆角

半径为5px，垂直圆角半径为10px。

对应的脚本特性为borderTopRightRadius。


兼容性：

支持版本\类型

较早版本 6.0-8.04.0 5.1 13.0 11.50

较新版本 9.0

示例：


<title>border-top-right-radius_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>ul{margin:0;padding:0;}li{list-style:none;margin:10px000;padding:10px;background:#bbb;}.test.one{border-top-right-radius:30px;}.test.two{border-top-right-radius:10px30px;}</style></head><body><ulclass="test"> <liclass="one">水平与垂直半径相同时<br>border-top-right-radius:30px;</li> <liclass="two">水平与垂直半径不同时<br>border-top-right-radius:10px30px;</li></ul></body></html>

运行

提交问题





考

选


border-bottom-right-radius版本：CSS3继承性：无

提交问题


语法：

border-bottom-right-radius：[<length>|<percentage>][<length>|

<percentage>]?

默认值：0

<length>：

<percentage>：

取值：

用长度值设置对象的右下角(bottom-right)圆角半径长度。

不允许负值

用百分比设置对象的右下角(bottom-right)圆角半径长

度。不允许负值

说明：

设置或检索对象的右下角圆角边框。提供2个参数，2个参数以空格分



如设置border-bottom-right-radius:5px10px;表示bottom-right这个角的水

平圆角半径为5px，垂直圆角半径为10px。

对应的脚本特性为borderBottomRightRadius。


兼容性：

支持版本\类型

较早版本 6.0-8.04.0 5.1 13.0 11.50

较新版本 9.0

示例：


<title>border-bottom-right-radius_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>ul{margin:0;padding:0;}li{list-style:none;margin:10px000;padding:10px;background:#bbb;}.test.one{border-bottom-right-radius:30px;}.test.two{border-bottom-right-radius:10px30px;}</style></head><body><ulclass="test"> <liclass="one">水平与垂直半径相同时<br>border-bottom-right-radius:30px;</li> <liclass="two">水平与垂直半径不同时<br>border-bottom-right-radius:10px30px;</li></ul></body></html>

运行

提交问题





考

选


border-bottom-left-radius版本：CSS3继承性：无

提交问题


语法：

border-bottom-left-radius：[<length>|<percentage>][<length>|

<percentage>]?

默认值：0

<length>：

<percentage>：

取值：

用长度值设置对象的左下角(bottom-left)圆角半径长度。不

允许负值

用百分比设置对象的左下角(bottom-left)圆角半径长

度。不允许负值

说明：

设置或检索对象的左下角圆角边框。提供2个参数，2个参数以空格分



如设置border-bottom-left-radius:5px10px;表示bottom-left这个角的水平

圆角半径为5px，垂直圆角半径为10px。

对应的脚本特性为borderBottomLeftRadius。


兼容性：

支持版本\类型

较早版本 6.0-8.04.0 5.1 13.0 11.50

较新版本 9.0

示例：


<title>border-bottom-left-radius_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>ul{margin:0;padding:0;}li{list-style:none;margin:10px000;padding:10px;background:#bbb;}.test.one{border-bottom-left-radius:30px;}.test.two{border-bottom-left-radius:10px30px;}</style></head><body><ulclass="test"> <liclass="one">水平与垂直半径相同时<br>border-bottom-left-radius:30px;</li> <liclass="two">水平与垂直半径不同时<br>border-bottom-left-radius:10px30px;</li></ul></body></html>

运行

提交问题





考

选


box-shadow版本：CSS3继承性：无

提交问题


语法：

box-shadow：none|<shadow>[,<shadow>]*

<shadow>=inset?&&[<length>{2,4}&&<color>?]

默认值：none

none：

<length>①：

<length>②：

<length>③：

<length>④：

<color>：

inset：

取值：

无阴影

第1个长度值用来设置对象的阴影水平偏移值。可以为负

值

第2个长度值用来设置对象的阴影垂直偏移值。可以为负

值

如果提供了第3个长度值则用来设置对象的阴影模糊值。

不允许负值

如果提供了第4个长度值则用来设置对象的阴影外延值。

不允许负值

设置对象的阴影的颜色。

设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类

型为外阴影

说明：

设置或检索对象阴影。参阅text-shadow属性

可以设定多组效果，每组参数值以逗号分隔。

对应的脚本特性为boxShadow。


兼容性：

支持版本\类型

较早版本 6.0-8.04.0 5.1 13.0 11.50

较新版本 9.0

示例：


<title>box-shadow_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.testli{margin-top:20px;list-style:none;}.test.outset{width:400px;padding:10px;background:#eee;-webkit-box-shadow:5px5pxrgba(0,0,0,.6);box-shadow:5px5pxrgba(0,0,0,.6);}.test.outset-blur{width:400px;padding:10px;background:#eee;-webkit-box-shadow:5px5px5pxrgba(0,0,0,.6);box-shadow:5px5px5pxrgba(0,0,0,.6);}.test.outset-extension{width:400px;padding:10px;background:#eee;-webkit-box-shadow:5px5px5px10pxrgba(0,0,0,.6);box-shadow:5px5px5px10pxrgba(0,0,0,.6);}.test.inset{width:400px;padding:10px;background:#eee;-webkit-box-shadow:2px2px5px1pxrgba(0,0,0,.6)inset;box-shadow:2px2px5px1pxrgba(0,0,0,.6)inset;}.test.multiple-shadow{width:400px;padding:10px;background:#eee;-webkit-box-shadow:005px3pxrgba(255,0,0,.6),005px6pxrgba(0,182,0,.6),005px10pxrgba(255,255,0,.6);box-shadow:005px3pxrgba(255,0,0,.6),005px6pxrgba(0,182,0,.6),005px10pxrgba(255,255,0,.6);}</style></head><body><ulclass="test"> <liclass="outset">外阴影常规效果<br>box-shadow:5px5pxrgba(0,0,0,.6);</li> <liclass="outset-blur">外阴影模糊效果<br>box-shadow:5px5px5pxrgba(0,0,0,.6);</li> <liclass="outset-extension">外阴影模糊外延效果<br>box-shadow:5px5px5px10pxrgba(0,0,0,.6);</li> <liclass="inset">内阴影效果<br>box-shadow:2px2px5px1pxrgba(0,0,0,.6)inset;</li> <liclass="multiple-shadow">外阴影模糊效果<br>box-shadow:5px5px5pxrgba(0,0,0,.6);</li></ul></body></html>

运行

提交问题





考

选


box-reflect版本：CSS3继承性：无

提交问题


none：

above：

below：

left：

right：

<length>：

<percentage>：

none：

<url>：

<linear-gradient>：

<radial-gradient>：

<repeating-linear-gradient>：

<repeating-radial-gradient>：

取值：

无倒影

<direction>　Demo:简单图片倒影

指定倒影在对象的上边

指定倒影在对象的下边

指定倒影在对象的左边

指定倒影在对象的右边

<offset>　Demo:图片与倒影间隔

用长度值来定义倒影与对象之间的间隔。可以为负值

用百分比来定义倒影与对象之间的间隔。可以为负值

<mask-box-image>　Demo:更真实的图片倒影文字倒影与渐变

无遮罩图像

使用绝对或相对地址指定遮罩图像。

使用线性渐变创建遮罩图像。

使用径向(放射性)渐变创建遮罩图像。

使用重复的线性渐变创建背遮罩像。

使用重复的径向(放射性)渐变创建遮罩

图像。

http://demo.doyoe.com/css3/box-reflect/reflect-direction.htm

http://demo.doyoe.com/css3/box-reflect/reflect-offset.htm

http://demo.doyoe.com/css3/box-reflect/reflect-image.htm

http://demo.doyoe.com/css3/box-reflect/reflect-text.htm

说明：

设置或检索对象倒影。

对应的脚本特性为boxReflect。


兼容性：

支持版本\类型

版本 6.0-10.0 4.0-9.0 5.1 13.0 11.50-11.60

示例：


<title>box-reflect_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>html,body{ margin:50px0;}.reflect{ width:950px; margin:0auto; -webkit-box-reflect:below0-webkit-linear-gradient(transparent,transparent50%,rgba(255,255,255,.3)); font:bold100px/1.231georgia,sans-serif; text-transform:uppercase;}</style></head><body><divclass="reflect">你看到倒影了么？</div></body></html>

运行

提交问题




CSS参考手册»属性列表»背景属性» 其它背景属性参

考

选


background版本：CSS1继承性：无

提交问题


语法：

background：[background-color]||[background-image]||[

background-repeat]||[background-attachment]||[background-position]


相关属性：[background-origin]||[background-clip]||[background-size

]

[background-color]：

[background-image]：

[background-repeat]：

[background-attachment]：

[background-position]：

[background-origin]：

[background-clip]：

[background-size]：

取值：

指定对象的背景颜色。

指定对象的背景图像。可以是真实图片路径或

使用渐变创建的“背景图像”

指定对象的背景图像如何铺排填充。

指定对象的背景图像是随对象内容滚动还

是固定的。

指定对象的背景图像位置。

指定对象的背景图像显示的原点。

指定对象的背景图像向外裁剪的区域。

指定对象的背景图像的尺寸大小。

说明：

复合属性。设置对象的背景特性。



对应的脚本特性为background。


兼容性：

支持版本\类型

版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>background_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{height:300px;background:#eeeurl(skin/p_103x196_1.jpg)no-repeatscroll50px30px;}</style></head><body><divclass="test">定义单一背景图像</div></body></html>

运行

提交问题





考

选


background-color版本：CSS1继承性：无

提交问题


语法：

background-color：<color>

默认值：transparent

<color>：

取值：

指定颜色。

说明：

设置或检索对象的背景颜色。

当同时定义了背景颜色和背景图像时，背景图像覆盖在背景颜色之

上。

如果设置了background-image，同时也建议作者设置background-color

用于当背景图像不可见时保持与文本一定的对比。

对应的脚本特性为backgroundColor。


兼容性：

支持版本\类型

版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>background-color_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{padding:10px;border:1pxsolid#000;background-color:#808080;}</style></head><body><divclass="test">灰色背景</div></body></html>

运行

提交问题





考

选


background-image版本：CSS1/CSS3继承性：无

提交问题


none：

<url>：

<linear-gradient>：

<radial-gradient>：

<repeating-linear-gradient>：

<repeating-radial-gradient>：

取值：

无背景图。

使用绝对或相对地址指定背景图像。

使用线性渐变创建背景图像。（CSS3）

使用径向(放射性)渐变创建背景图像。（CSS3）

使用重复的线性渐变创建背景图像。

（CSS3）

使用重复的径向(放射性)渐变创建背景

图像。（CSS3）

说明：

设置或检索对象的背景图像。

如果设置了background-image，同时也建议作者设置background-color

用于当背景图像不可见时保持与文本一定的对比。

对应的脚本特性为backgroundImage。


兼容性：

支持版本\类型

版本 6.0-8.0#1

4.0 5.1 13.011.50-11.51#3

版本 9.0#2

版本 10.0 11.60

1. IE8及更早浏览器不支持CSS3background-image，即不支持多背景

和使用渐变作为背景图像。

2. IE9不支持CSS3新增参数值：<linear-gradient>|<radial-gradient>|

<repeating-linear-gradient>|<repeating-radial-gradient>作为背景图

像。

3. Opera11.50-11.51不支持CSS3新增参数值：<radial-gradient>|

<repeating-radial-gradient>作为背景图像。

示例：


<title>background-image_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.teststrong{font-size:16px;}.test.urlp{padding-top:200px;background-image:url(skin/p_103x196_1.jpg);background-repeat:no-repeat;}.test.gradientp{height:100px;background-image:-moz-linear-gradient(top,#45B5DA,#0382AD);background-image:-webkit-gradient(linear,50%0%,50%100%,from(#45B5DA),to(#0382AD));background-image:-o-linear-gradient(top,#45B5DA,#0382AD);}.test.multiplep{padding-top:200px;background-image:url(skin/p_103x196_1.jpg),url(skin/p_103x196_2.jpg),url(skin/p_103x196_3.jpg);background-repeat:no-repeat;background-position:00,100px0,200px0;}</style></head><body><ulclass="test"> <liclass="url"> <strong>使用url()引入背景图像</strong> <p>使用url()可以是绝对或相对路径</p> </li> <liclass="gradient"> <strong>使用渐变绘制背景图像</strong> <p>渐变种类有:linear-gradient,radial-gradient,repeating-linear-gradient,repeating-radial-gradient</p> </li> <liclass="multiple"> <strong>多重背景图</strong> <p>多重背景图可以是url()或gradient的混合方式</p> </li></ul></body></html>

运行

提交问题





考

选


background-repeat版本：CSS1/CSS3继承性：无

提交问题


语法：

background-repeat：<repeat-style>[,<repeat-style>]*

<repeat-style>=repeat-x|repeat-y|[repeat|space|round|no-repeat]

{1,2}

默认值：repeat

repeat-x：

repeat-y：

repeat：

no-repeat：

round：

space：

取值：

背景图像在横向上平铺

背景图像在纵向上平铺

背景图像在横向和纵向平铺

背景图像不平铺

背景图像自动缩放直到适应且填充满整个容器。（CSS3）

背景图像以相同的间距平铺且填充满整个容器或某个方向。

（CSS3）

说明：

设置或检索对象的背景图像如何铺排填充。必须先指定background-

image属性。

允许提供2个参数，如果提供全部2个参数，第1个用于横向，第二个用

于纵向。

如果只提供1个参数，则用于横向和纵向。特殊值repeat-x和repeat-y除

外，因为repeat-x相当于repeatno-repeat，repeat-y相当于no-repeat

repeat，即其实repeat-x和repeat-y等价于提供了2个参数值

对应的脚本特性为backgroundRepeat。


兼容性：

支持版本\类型

版本6.0-8.0#1 4.0-8.0

#25.1#3 13.0-16.0#4 11.50

版本 9.0

1. IE8及更早浏览器不支持为background-repeat定义2个参数值；不支

持CSS3新增参数值round|space。

2. Firefox4.0-8.0不支持为background-repeat定义2个参数值；不支持

CSS3新增参数值round|space。

3. Safari5.1已接受CSS3新增参数值round|space，但还未实现支持。

4. Chrome13.0-16.0已接受CSS3新增参数值round|space，但还未实

现支持。

示例：


<title>background-repeat_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{padding-top:200px;background-image:url(skin/p_103x196_1.jpg);background-repeat:repeat-x;}</style></head><body><divclass="test">横向平铺背景图片</div></body></html>

运行

提交问题





考

选


background-attachment版本：CSS1/CSS3继承性：无

提交问题


语法：

background-attachment：<attachment>[,<attachment>]*

<attachment>=fixed|local|scroll

默认值：scroll

fixed：

scroll：

local：

取值：

背景图像相对于窗体固定。

背景图像相对于元素固定，也就是说当元素内容滚动时背景图

像不会跟着滚动，因为背景图像总是要跟着元素本身。但会随元素的

祖先元素或窗体一起滚动。

背景图像相对于元素内容固定，也就是说当元素随元素滚动时

背景图像也会跟着滚动，因为背景图像总是要跟着内容。（CSS3）

说明：

设置或检索背景图像是随对象内容滚动还是固定的。必须先指定

background-image属性。

对应的脚本特性为backgroundAttachment。


兼容性：

支持版本\类型

版本 6.0-8.0#14.0-8.0#2 5.1 13.0 11.50

版本 9.0

1. IE8及更早浏览器不支持CSS3新增参数值：local。

2. Firefox4.0-8.0不支持CSS3新增参数值：local。

示例：


<title>background-attachment_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>body{background-image:url(skin/p_103x196_1.jpg);background-repeat:no-repeat;background-position:50%200px;background-attachment:fixed;}</style></head><body> <p>背景图像不随窗体内容滚动始终固定</p> <p>文字内容</p> <p>文字内容</p> <p>文字内容</p> <p>文字内容</p> <p>文字内容</p> <p>文字内容</p> <p>文字内容</p> <p>文字内容</p> <p>文字内容</p> <p>文字内容</p> <p>文字内容</p> <p>文字内容</p> <p>文字内容</p> <p>文字内容</p> <p>文字内容</p> <p>文字内容</p> <p>文字内容</p> <p>文字内容</p> <p>文字内容</p> <p>文字内容</p> <p>文字内容</p> <p>文字内容</p> <p>文字内容</p>

运行

提交问题





考

选


background-position版本：CSS1继承性：无

提交问题


<percentage>：

<length>：

center：

left：

right：

top：

bottom：

取值：

用百分比指定背景图像填充的位置。可以为负值。

用长度值指定背景图像填充的位置。可以为负值。

背景图像横向和纵向居中。

背景图像在横向上填充从左边开始。

背景图像在横向上填充从右边开始。

背景图像在纵向上填充从顶部开始。

背景图像在纵向上填充从底部开始。

说明：

设置或检索对象的背景图像位置。必须先指定background-image属

性。

该属性提供2个参数值。

如果提供两个，第一个用于横坐标，第二个用于纵坐标。

如果只提供一个，该值将用于横坐标；纵坐标将默认为50%。

对应的脚本特性为backgroundPosition。


兼容性：

支持版本\类型

版本 6.0-8.0#14.0 5.1 13.0 11.50

版本 9.0

1. IE8及更早浏览器不支持CSS3Background-position定义多组位置，

只支持单组。

示例：


<title>background-repeat_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{border:1pxsolid#000;width:400px;height:500px;background-image:url(skin/p_103x196_1.jpg);background-repeat:no-repeat;background-position:center;}</style></head><body><divclass="test">背景图水平垂直居中</div></body></html>

运行

提交问题





考

选


background-origin版本：CSS3继承性：无

提交问题


语法：

background-origin：<box>[,<box>]*

<box>=border-box|padding-box|content-box

默认值：padding-box

padding-box：

border-box：

content-box：

取值：

从padding区域（含padding）开始显示背景图像。

从border区域（含border）开始显示背景图像。

从content区域开始显示背景图像。

说明：

设置或检索对象的背景图像计算background-position时的参考原点(位

置)。

对应的脚本特性为backgroundOrigin。


兼容性：

支持版本\类型

版本 6.0-8.04.0 5.1 13.0 11.50

版本 9.0

示例：


<title>background-origin_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>h1{font-size:20px;}h2{font-size:16px;}p{border:10pxdashed#666;width:200px;height:200px;padding:20px;background:#aaaurl(skin/p_103x196_1.jpg)no-repeat;}.border-boxp{background-origin:border-box;}.padding-boxp{background-origin:padding-box;}.content-boxp{background-origin:content-box;}</style></head><body><h1>background-origin</h1><ulclass="test"> <liclass="border-box"> <h2>border-box</h2> <p>从border区域（含border）开始显示背景图像</p> </li> <liclass="padding-box"> <h2>padding-box</h2> <p>从padding区域（含padding）开始显示背景图像</p> </li> <liclass="content-box"> <h2>content-box</h2> <p>从content区域开始显示背景图像</p> </li></ul></body></html>

运行

提交问题





考

选


background-clip版本：CSS3继承性：无

提交问题


语法：

background-clip：<box>[,<box>]*

<box>=border-box|padding-box|content-box|text

默认值：border-box

padding-box：

border-box：

content-box：

text：

取值：

从padding区域（不含padding）开始向外裁剪背景。

从border区域（不含border）开始向外裁剪背景。

从content区域开始向外裁剪背景。

从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此

即可实现使用背景作为填充色之类的遮罩效果。遮罩效果

http://demo.doyoe.com/css3/background-clip/mask-text2.htm

说明：


对应的脚本特性为backgroundClip。


兼容性：

支持版本\类型

版本 6.0-8.04.0-9.0#1 5.1 13.0 11.50-11.60#1

版本 9.0#1

1. IE9,Firefox4.0-9.0,Opera11.50-11.60尚未支持text属性值，目前为

webkitonly[1] [2] 。

http://www.webkit.org/blog/164/background-clip-text/

http://www.css3.info/webkit-introduces-background-cliptext/

示例：


<title>background-clip_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>h1{font-size:20px;}h2{font-size:16px;}p{width:200px;height:200px;margin:0;padding:20px;border:10pxdashed#666;background:#aaaurl(skin/p_103x196_1.jpg)no-repeat;}.border-boxp{background-clip:border-box;}.padding-boxp{background-clip:padding-box;}.content-boxp{background-clip:content-box;}.textp{width:auto;height:auto;background-repeat:repeat;-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:bold;font-size:120px;}</style></head><body><h1>background-clip</h1><ulclass="test"> <liclass="border-box"> <h2>border-box</h2> <p>从border区域（不含border）开始向外裁剪背景</p> </li> <liclass="padding-box"> <h2>padding-box</h2> <p>从padding区域（不含padding）开始向外裁剪背景</p> </li> <liclass="content-box"> <h2>content-box</h2> <p>从content区域开始向外裁剪背景</p> </li> <liclass="text"> <h2>text</h2> <p>从前景内容的形状作为裁剪区域向外裁剪背景</p>

运行

提交问题





考

选


background-size版本：CSS3继承性：无

提交问题


语法：

background-size：<bg-size>[,<bg-size>]*

<bg-size>=[<length>|<percentage>|auto]{1,2}|cover|contain

默认值：auto

<length>：

<percentage>：

auto：

cover：

contain：

取值：

用长度值指定背景图像大小。不允许负值。

用百分比指定背景图像大小。不允许负值。

背景图像的真实大小。

将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容

器。

将背景图像等比缩放到宽度或高度与容器的宽度或高度相

等，背景图像始终被包含在容器内。

说明：

检索或设置对象的背景图像的尺寸大小。

该属性提供2个参数值(特性值cover和contain除外)。

如果提供两个，第一个用于定义背景图像的宽度，第二个用于定义背

景图像的高度。

如果只提供一个，该值将用于定义背景图像的宽度，第2个值默认为

auto，即高度为auto，此时背景图以提供的宽度作为参照来进行等比缩

放。

对应的脚本特性为backgroundSize。


兼容性：

支持版本\类型

版本 6.0-8.04.0 5.1 13.0 11.50

版本 9.0

示例：


<title>background-size_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>h1{font-size:20px;}h2{font-size:16px;}p{border:10pxdashed#666;width:300px;height:300px;padding:20px;background:url(skin/p_103x196_1.jpg)no-repeat;}.coverp{background-size:cover;}.containp{background-size:contain;}.lengthp{background-size:100px140px;}</style></head><body><h1>background-size</h1><ulclass="test"> <liclass="cover"> <h2>cover</h2> <p>将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。</p> </li> <liclass="contain"> <h2>contain</h2> <p>将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。</p> </li> <liclass="length"> <h2>length</h2> <p>自定义背景图像大小</p> </li></ul></body></html>

运行

提交问题





考

选


Multiplebackground版本：CSS3继承性：无

提交问题


语法：

background：[background-image]||[background-repeat]||[

background-attachment]||[background-position]

相关属性：[background-origin]||[background-clip]||[background-size

]

[background-image]：

[background-repeat]：

[background-attachment]：

[background-position]：

[background-origin]：

[background-clip]：

[background-size]：

取值：

指定对象的背景图像。可以是真实图片路径或

使用渐变创建的“背景图像”

指定对象的背景图像如何铺排填充。

指定对象的背景图像是随对象内容滚动还

是固定的。

指定对象的背景图像位置。

指定对象的背景图像显示的原点。


指定对象的背景图像的尺寸大小。

说明：

复合属性。检索或设置对象的多重背景图像（背景色background-

color不能设置多重）。

一个元素可以设置多重背景图像。

每组属性间使用逗号分隔。

如果设置的多重背景图之间存在着交集（即存在着重叠关系），前面

的背景图会覆盖在后面的背景图之上。

示例：假设要在同一个元素上定义3个背景图像

缩写方式：

background:url(test1.jpg)no-repeatscroll10px20px,url(test2.jpg)no-repeatscroll50px60px,url(test3.jpg)no-repeatscroll90px100px;

background-origin:content-box,content-box,content-box;

background-clip:padding-box,padding-box,padding-box;

background-size:50px60px,50px60px,50px60px;

拆分方式：

background-image:url(test1.jpg),url(test2.jpg),url(test3.jpg);

background-repeat:no-repeat,no-repeat,no-repeat;

background-attachment:scroll,scroll,scroll;

background-repeat:10px20px,50px60px,90px100px;

background-origin:content-box,content-box,content-box;

background-clip:padding-box,padding-box,padding-box;

background-size:50px60px,50px60px,50px60px;

如果定义了多个背景图片，而其他属性只有一个参数值，则表明所有

背景图片的该属性都应用同一个参数值。据此可以对上面的例子进行

缩写：

缩写方式：

background:url(test1.jpg)no-repeatscroll10px20px,url(test2.jpg)no-repeatscroll50px60px,url(test3.jpg)no-repeatscroll90px100px;

background-origin:content-box;

background-clip:padding-box;

background-size:50px60px;

拆分方式：

background-image:url(test1.jpg),url(test2.jpg),url(test3.jpg);

background-repeat:no-repeat;

background-attachment:scroll;

background-repeat:10px20px,50px60px,90px100px;

background-origin:content-box;

background-clip:padding-box;

background-size:50px60px;


兼容性：

支持版本\类型

版本 6.0-8.04.0 5.1 13.0 11.50

版本 9.0

示例：


<title>Multiplebackgrounds_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{height:300px;background:url(skin/p_103x196_1.jpg)no-repeatscroll10px20px,url(skin/p_103x196_1.jpg)no-repeatscroll50px60px,url(skin/p_103x196_1.jpg)no-repeatscroll90px100px;background-origin:content-box;background-clip:padding-box;background-size:100px120px;}</style></head><body><divclass="test">定义多重背景图像</div></body></html>

运行

提交问题




CSS参考手册»属性列表»颜色属性» 其它颜色属性参

考

选


color版本：CSS1继承性：有

提交问题


语法：

color：<color>

<color>：

取值：

指定颜色。

说明：

检索或设置对象的文本颜色。无默认值

可以使用ColorName(颜色名称),HEX,RGB,RGBA,HSL,HSLA,

transparent来指定color。

注意，用颜色名称指定color可能不被一些浏览器接受。

对应的脚本特性为color。


兼容性：

支持版本\类型

版本 6.0-8.0#14.0 5.1 13.0 11.50

版本 9.0

1. IE8及更早浏览器不支持color的RGBA,HSL,HSLA及transparent

值。

示例：


<title>color_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.colornamep{color:green;}.hexp{color:#ff0000;}.rgbp{color:rgb(0,0,0);}.rgbap{color:rgba(0,0,0,.5);}.hslp{color:hsl(240,50%,50%);}.hslap{color:hsla(240,50%,50%,.5);}.transparentp{color:transparent;}</style></head><body><ulclass="test"> <liclass="colorname"> <strong>ColorName(用颜色名称表示法)</strong> <p>看看我的颜色　{color:green;}</p> </li> <liclass="hex"> <strong>HEX(十六进制数值表示法)</strong> <p>看看我的颜色　{color:#ff0000;}</p> </li> <liclass="rgb"> <strong>RGB</strong> <p>看看我的颜色　{color:rgb(0,0,0);}</p> </li> <liclass="rgba"> <strong>RGBA</strong>-IE8及以下浏览器不支持这种写法 <p>看看我的颜色　{color:rgba(0,0,0,.5);}</p> </li> <liclass="hsl"> <strong>HSL</strong>-IE8及以下浏览器不支持这种写法

运行

提交问题




CSS参考手册»属性列表»颜色属性» 其它颜色属性参

考

选


opacity版本：CSS3继承性：无

提交问题


语法：

opacity：<number>

默认值：1

<number>：

取值：

使用浮点数指定对象的不透明度。值被约束在[0.0-1.0]范

围内，如果超过了这个范围，其计算结果将截取到与之最相近的值。

说明：

检索或设置对象的不透明度。

对于尚不支持opacity属性的IE浏览器可以使用IE私有的滤镜属性来实

现与opacity相同的效果

示例代码：

div{filter:alpha(opacity=50);}/*forIE8andearlier*/

div{opacity:.5;}/*forIE9andotherbrowsers*/

以上2段代码的效果相同

对应的脚本特性为opacity。


兼容性：

支持版本\类型

版本 6.0-8.04.0 5.1 13.0 11.50

版本 9.0

示例：


<title>opacity_CSS参考手册_web前端开发参考手册</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>h1{margin:10px0;font-size:16px;}.test{width:300px;height:150px;padding:10px;background:#050;}.test2{width:300px;height:150px;margin:-120px0050px;padding:10px;background:#000;filter:alpha(opacity=50);opacity:.5;color:#fff;}</style></head><body><h1>下例是一个半透明的效果：</h1><divclass="test">不透明度为100%的box</div><divclass="test2">不透明度为50%的box</div></body></html>

运行

提交问题




CSS参考手册»属性列表»字体属性» 其它字体属性参

考

选


font版本：CSS1/CSS2继承性：有

提交问题


语法：

font：[[<font-style>||<font-variant>||<font-weight>]?<font-size>[/

<line-height>]?<font-family>]|caption|icon|menu|message-box|

small-caption|status-bar

默认值：看独立属性自身

<font-style>：

<font-variant>：

<font-weight>：

<font-size>：

<line-height>：

<font-family>：

caption：

icon：

menu：

message-box：

small-caption：

status-bar：

取值：

指定文本字体样式

指定文本是否为小型的大写字母

指定文本字体的粗细

指定文本字体尺寸

指定文本字体的行高

指定文本使用某个字体或字体序列

使用有标题的系统控件的文本字体（如按钮，菜单等）

（CSS2）

使用图标标签的字体（CSS2）

使用菜单的字体（CSS2）

使用信息对话框的文本字体（CSS2）

使用小控件的字体（CSS2）

使用窗口状态栏的字体（CSS2）

说明：

设置或检索对象中的文本特性。该属性是复合属性。

使用第一种声明方式参数必须按照如上的排列顺序，且font-size和font-

family是不可忽略的。每个参数仅允许有一个值。忽略的将使用其参

数对应的独立属性的默认值。

对于如何使用客户端系统可能没有的字体，可以参阅@font-face规

则。

对应的脚本特性为font。


兼容性：

支持版本\类型

版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>font_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.testp{margin:15px0;border:1pxsolid#000;}.font1p{font:18pxSimsun,arial,sans-serif;}.font2p{font:italic18pxSimsun,arial,sans-serif;}.font3p{font:italicsmall-caps18pxSimsun,arial,sans-serif;}.font4p{font:italicsmall-capsbold18pxSimsun,arial,sans-serif;}.font5p{font:italicsmall-capsbold18px/2Simsun,arial,sans-serif;}.captionp{font:caption;}.iconp{font:icon;}.menup{font:menu;}.message-boxp{font:message-box;}.small-captionp{font:small-caption;}.status-barp{font:status-bar;}</style></head><body><ulclass="test"> <liclass="font1"> <strong>只指定字体大小和字体：</strong> <p>本段文字将显示为18px宋体。</p> </li> <liclass="font2"> <strong>只指定字体样式、大小和字体：</strong> <p>本段文字将显示为斜体的18px宋体。</p> </li> <liclass="font3"> <strong>只指定字体样式、小型大写字母、大小和字体：</strong> <p>本段文字将显示为斜体的带小型大写字母的18px宋体。大小型大写字母对比：AaBbCcDdEeFfGg</p> </li> <liclass="font4">

运行

提交问题





考

选


font-style版本：CSS1继承性：有

提交问题


语法：

font-style：normal|italic|oblique

默认值：normal

normal：

italic：

oblique：

取值：

指定文本字体样式为正常的字体

指定文本字体样式为斜体。对于没有斜体变量的特殊字体，将

应用oblique

指定文本字体样式为倾斜的字体

说明：

设置或检索对象中的文本字体样式。

对应的脚本特性为fontStyle。


兼容性：

支持版本\类型

版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>font-style_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.testp{margin:15px0;border:1pxsolid#000;}.normalp{font-style:normal;}.italicp{font-style:italic;}.obliquep{font-style:oblique;}</style></head><body><ulclass="test"> <liclass="normal"> <strong>正常的字体：</strong> <p>本段文字将显示为正常的字体。</p> </li> <liclass="italic"> <strong>斜体：</strong> <p>本段文字将显示为斜体。</p> </li> <liclass="oblique"> <strong>倾斜的字体：</strong> <p>本段文字将显示为倾斜的字体。</p> </li></ul></body></html>

运行

提交问题





考

选


font-variant版本：CSS1继承性：有

提交问题


语法：

font-variant：normal|small-caps

默认值：normal

normal：

small-caps：

取值：

正常的字体

小型的大写字母字体

说明：

设置或检索对象中的文本是否为小型的大写字母。

对应的脚本特性为fontVariant。


兼容性：

支持版本\类型

版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>font-variant_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.testp{margin:15px0;border:1pxsolid#000;}.variantspan{font-variant:small-caps;}</style></head><body><ulclass="test"> <li> <strong>将文本转换为小型的大写字母</strong> <div>原　文：HOWDOYOUDO&<span>howdoyoudo.</span></div> <divclass="variant">转换后：HOWDOYOUDO&<span>howdoyoudo.</span></div> </li></ul></body></html>

运行

提交问题





考

选


font-weight版本：CSS1继承性：有

提交问题


语法：

font-weight：normal|bold|bolder|lighter|<integer>

默认值：normal

normal：

bold：

bolder：

lighter：

<integer>：

取值：

正常的字体。相当于number为400

粗体。相当于number为700。

特粗体。也相当于strong和b对象的作用

细体

用数字表示文本字体粗细。取值范围：100|200|300|400

|500|600|700|800|900

说明：

设置或检索对象中的文本字体的粗细。

作用由客户端系统安装的字体的特定字体变量映射决定。系统选择最

近的匹配。也就是说，用户可能看不到不同值之间的差异。

对应的脚本特性为fontWeight。


兼容性：

支持版本\类型

版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>font-weight_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.testp{margin:15px0;border:1pxsolid#000;}.normalp{font-weight:normal;}.boldp{font-weight:bold;}.bolderp{font-weight:bolder;}.lighterp{font-weight:lighter;}.numberp{font-weight:700;}</style></head><body><ulclass="test"> <liclass="normal"> <strong>正常的字体：</strong> <p>本段文字将显示为正常的字体。</p> </li> <liclass="bold"> <strong>粗体：</strong> <p>本段文字将显示为粗体。</p> </li> <liclass="bolder"> <strong>特粗体：</strong> <p>本段文字将显示为特粗体。</p> </li> <liclass="lighter"> <strong>细体：</strong> <p>本段文字将显示为细体。</p> </li> <liclass="number"> <strong>用number值表示粗体：</strong> <p>本段文字将显示为粗体。</p>

运行

提交问题





考

选


font-size版本：CSS1继承性：有

提交问题


语法：

font-size：<absolute-size>|<relative-size>|<length>|<percentage>

默认值：medium

说明：

设置或检索对象中的字体尺寸。

对应的脚本特性为fontSize。


兼容性：

支持版本\类型

版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>font-size_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.testp{margin:15px0;border:1pxsolid#000;}.xx-smallp{font-size:xx-small;}.x-smallp{font-size:x-small;}.smallp{font-size:small;}.mediump{font-size:medium;}.largep{font-size:large;}.x-largep{font-size:x-large;}.xx-largep{font-size:xx-large;}.smallerp{font-size:smaller;}.largerp{font-size:larger;}.floatp{font-size:20px;}.percentage{font-size:20px;}.percentagespan{font-size:60%;}</style></head><body><ulclass="test"> <liclass="xx-small"> <strong>尺寸大小为xx-small：</strong> <p>xx-small尺寸的文字。</p> </li> <liclass="x-small"> <strong>尺寸大小为x-small：</strong> <p>x-small尺寸的文字。</p> </li> <liclass="small"> <strong>尺寸大小为small：</strong> <p>small尺寸的文字。</p> </li>

运行

提交问题





考

选


font-family版本：CSS1继承性：有

提交问题


<family-name>：

<generic-family>：

取值：

字体名称。按优先顺序排列。以逗号隔开。如果字

体名称包含空格或中文，则应使用引号括起

字体序列名称。

说明：

设置或检索用于对象中文本的字体名称序列。

序列可包含嵌入字体。请参阅@font-face规则。

对应的脚本特性为fontFamily。


兼容性：

支持版本\类型

版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>font-family_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{font-family:'宋体',arial,georgia,verdana,helvetica,sans-serif;}</style></head><body><divclass="test">使用字体名称和字体序列名称定义字体。</div></body></html>

运行

提交问题





考

选


font-stretch版本：CSS3继承性：有

提交问题


ultra-condensed：

extra-condensed：

condensed：

semi-condensed：

normal：

semi-expanded：

expanded：

extra-expanded：

ultra-expanded：

取值：

比正常文字宽度窄4个基数。




正常文字宽度

比正常文字宽度宽1个基数。




说明：

设置或检索对象中的文字是否横向拉伸变形。

文字的拉伸是相对于浏览器显示的字体的正常宽度。

对应的脚本特性为fontStretch。


兼容性：

支持版本\类型

版本 6.0-9.0#1 4.0-6.0#1 5.1 13.0 11.50-11.51

1. IE及Firefox已支持font-stretch，但显示效果与正常文字并无不同。

示例：


<title>font-stretch_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>p{margin:0;font-size:80px;font-weight:bold;background:#ddd;width:30px;}.test.normalp{font-stretch:normal;}.test.condensedp{font-stretch:condensed;}.test.ultra-condensedp{font-stretch:ultra-condensed;}.test.extra-condensedp{font-stretch:extra-condensed;}.test.semi-expandedp{font-stretch:semi-expanded;}.test.expandedp{font-stretch:expanded;}.test.ultra-expandedp{font-stretch:ultra-expanded;}.test.extra-expandedp{font-stretch:extra-expanded;}.test.semi-condensedp{font-stretch:semi-condensed;}</style></head><body><ulclass="test"> <liclass="normal"> <strong>normal</strong> <p>a</p> </li> <liclass="condensed"> <strong>condensed</strong> <p>a</p> </li> <liclass="ultra-condensed"> <strong>ultra-condensed</strong> <p>a</p> </li> <liclass="extra-condensed"> <strong>extra-condensed</strong> <p>a</p>

运行

提交问题




CSS参考手册»属性列表»文本属性» 其它文本属性参

考

选


text-indent版本：CSS1继承性：有

提交问题


语法：

text-indent：<length>|<percentage>

默认值：0

<length>：

<percentage>：

取值：

用长度值指定文本的缩进。可以为负值。

用百分比指定文本的缩进。可以为负值。

说明：

检索或设置对象中的文本的缩进。


对应的脚本特性为textIndent。


兼容性：

支持版本\类型

版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>text-indent_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.testp{border:1pxsolid#000;}.inlinespan{text-indent:30px;}.inline-blockspan{display:inline-block;text-indent:30px;}.blockspan{display:block;text-indent:30px;}</style></head><body><ulclass="test"> <liclass="inline"> <strong>内联元素span</strong> <p><span>看看我的左边有没有30px的缩进　span{text-indent:30px;}</span></p> </li> <liclass="inline-block"> <strong>被设置为内联块级元素的span</strong> <p><span>看看我的左边有没有30px的缩进　span{display:inline-block;text-indent:30px;}</span></p> </li> <liclass="block"> <strong>被设置为块级元素的span</strong> <p><span>看看我的左边有没有30px的缩进　span{display:block;text-indent:30px;}</span></p> </li></ul></body></html>

运行

提交问题





考

选


text-overflow版本：CSS3继承性：无

提交问题


语法：

text-overflow：clip|ellipsis

默认值：clip

clip：

ellipsis：

取值：

当对象内文本溢出时不显示省略标记（...），而是将溢出的部分

裁切掉。

当对象内文本溢出时显示省略标记（...）。

说明：

设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。

对应的脚本特性为textOverflow。


兼容性：

支持版本\类型

版本6.0

4.0-6.05.1 13.0 11.50

版本 7.0

示例：


<title>text-overflow_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.testli{margin-top:10px;}.test.clipp{overflow:hidden;width:200px;white-space:nowrap;text-overflow:clip;}.test.ellipsisp{overflow:hidden;width:200px;white-space:nowrap;text-overflow:ellipsis;}</style></head><body><ulclass="test"> <liclass="clip"> <strong>clip:直接将溢出的文字裁剪</strong> <p>测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字</p> </li> <liclass="ellipsis"> <strong>ellipsis:将溢出的文字显示省略标记（...）</strong> <p>测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字</p> </li></ul></body></html>

运行

提交问题





考

选


text-align版本：CSS1/CSS3继承性：有

提交问题


left：

center：

right：

justify：

start：

end：

取值：

内容左对齐。

内容居中对齐。

内容右对齐。

内容两端对齐。写本文档时仅Firefox能看到正确效果

内容对齐开始边界。（CSS3）

内容对齐结束边界。（CSS3）

说明：

设置或检索对象中内容的水平对齐方式。

对应的脚本特性为textAlign。


兼容性：

支持版本\类型

版本6.0-9.0#1

4.0 5.1#2

13.0-16.0#3

11.50-11.60#4

1. IE9及更早浏览器不支持justify；不支持CSS3新增参数值start|

end。

2. Safari5.1不支持justify。

3. Chrome13.0-16.0不支持justify。

4. Opera11.50-11.60不支持justify；不支持CSS3新增参数值start|

end。

示例：


<title>text-align_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.testp{border:1pxsolid#000;}.leftp{text-align:left;}.centerp{text-align:center;}.rightp{text-align:right;}.justifyp{width:200px;text-align:justify;}.startp{text-align:start;}.endp{text-align:end;}</style></head><body><ulclass="test"> <liclass="left"> <strong>左对齐</strong> <p>我是左对齐内容</p> </li> <liclass="center"> <strong>居中对齐</strong> <p>我是居中对齐内容</p> </li> <liclass="right"> <strong>右对齐</strong> <p>我是右对齐内容</p> </li> <liclass="justify"> <strong>两端对齐</strong> <p>我是两端对齐内容，除了最后一行外，我的每行文字两端都是对齐的。你将在Firefox中看到效果。</p> </li> <liclass="start">

运行

提交问题





考

选


text-transform版本：CSS1/CSS3继承性：有

提交问题


语法：

text-transform：none|[[capitalize|uppercase|lowercase]||full-width||

full-size-kana]

默认值：none

none：

capitalize：

uppercase：

lowercase：

full-width：

full-size-kana：

取值：

无转换

将每个单词的第一个字母转换成大写

转换成大写

转换成小写

??（CSS3）

??（CSS3）

说明：

检索或设置对象中的文本的大小写。

对应的脚本特性为textTransform。


兼容性：

支持版本\类型

版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>text-transform_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.capitalizespan{text-transform:capitalize;}.uppercasespan{text-transform:uppercase;}.lowercasespan{text-transform:lowercase;}</style></head><body><ulclass="test"> <li> <strong>将每个单词的首字母转换成大写</strong> <div>原　文：<span>howdoyoudo.</span></div> <divclass="capitalize">转换后：<span>howdoyoudo.</span></div> </li> <li> <strong>转换成大写</strong> <div>原　文：<span>howdoyoudo.</span></div> <divclass="uppercase">转换后：<span>howdoyoudo.</span></div> </li> <li> <strong>转换成小写</strong> <div>原　文：<span>HOWAREYOU.</span></div> <divclass="lowercase">转换后：<span>HOWAREYOU.</span></div> </li></ul></body></html>

运行

提交问题





考

选


text-decoration版本：CSS1继承性：无

提交问题


语法：

text-decoration：[text-decoration-line]||[text-decoration-style]||[text-

decoration-color]||blink


[text-decoration-line]：

[text-decoration-style]：

[text-decoration-color]：

blink：

取值：

指定文本装饰的种类。相当于CSS1时的text-

decoration属性

指定文本装饰的样式。

指定文本装饰的颜色。

指定文字的装饰是闪烁。写本文档时仅Firefox和Opera支持该

参数值

说明：

复合属性。检索或设置对象中的文本的装饰。

对应的脚本特性为textDecoration。


兼容性：

支持版本\类型

版本6.0-9.0#1

4.0-9.0#2

5.1#3

13.0-16.0#4

11.50-11.60#5

1. IE9及更早浏览器不支持blink，且不支持CSS3下的text-decoration

复合属性属写法。

2. Firefox4.0-9.0不支持CSS3下的text-decoration复合属性属写法。

3. Safari5.1不支持blink，且不支持CSS3下的text-decoration复合属性

属写法。

4. Chrome13.0不支持blink，且不支持CSS3下的text-decoration复合属

性属写法。

5. Opera11.50-11.60不支持CSS3下的text-decoration复合属性属写

法。

示例：


<title>text-decoration_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.testli{margin-top:10px;}.test.none{text-decoration:none;}.test.underline{text-decoration:underline;}.test.overline{text-decoration:overline;}.test.line-through{text-decoration:line-through;}.test.blink{text-decoration:blink;}.test.text-decoration-css3{ text-decoration:#f00dottedunderline;}</style></head><body><ulclass="test"> <liclass="none">无装饰文字</li> <liclass="underline">带下划线文字</li> <liclass="overline">带上划线文字</li> <liclass="line-through">带贯穿线文字</li> <liclass="blink">带闪烁文字</li> <liclass="text-decoration-css3">如果你的浏览器支持text-decoration在CSS3下的改变，将会看到本行文字有一条红色的下划虚线</li></ul></body></html>

运行

提交问题





考

选


text-decoration-line版本：CSS3继承性：无

提交问题


语法：

text-decoration-line：none|[underline||overline||line-through]

默认值：none

none：

underline：

overline：

line-through：

取值：

指定文字无装饰

指定文字的装饰是下划线

指定文字的装饰是上划线

指定文字的装饰是贯穿线

说明：

检索或设置对象中的文本装饰线条的位置。

text-decoration-line的作用类同于CSS1时的text-decoration

对应的脚本特性为textDecorationLine。


兼容性：

支持版本\类型

版本 6.0-9.0 4.0-9.0 5.1 13.0-16.0 11.50-11.60

示例：


<title>text-decoration-line_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.testli{margin-top:10px;}.testli:nth-child(1){ -moz-text-decoration-style:solid; -moz-text-decoration-color:#000; -moz-text-decoration-line:underline; -o-text-decoration-style:solid; -o-text-decoration-color:#000; -o-text-decoration-line:underline;}.testli:nth-child(2){ -moz-text-decoration-style:solid; -moz-text-decoration-color:#f00; -moz-text-decoration-line:underline;}.testli:nth-child(3){ -moz-text-decoration-style:dashed; -moz-text-decoration-color:#f00; -moz-text-decoration-line:underline;}.testli:nth-child(4){ -moz-text-decoration-style:dashed; -moz-text-decoration-color:#f00; -moz-text-decoration-line:overline;}.testli:nth-child(5){ -moz-text-decoration-style:dashed; -moz-text-decoration-color:#f00; -moz-text-decoration-line:line-through;}

运行

提交问题





考

选


text-decoration-color版本：CSS3继承性：无

提交问题


语法：

text-decoration-color：<color>


<color>：

取值：

指定颜色。

说明：

检索或设置对象中的文本装饰线条的颜色。

对应的脚本特性为textDecorationColor。


兼容性：

支持版本\类型

版本 6.0-9.0 4.0-9.0 5.1 13.0-16.0 11.50-11.60

示例：


<title>text-decoration-color_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.testli{margin-top:10px;}.testli:nth-child(1){ -moz-text-decoration-style:solid; -moz-text-decoration-color:#f00; -moz-text-decoration-line:underline;}.testli:nth-child(2){ -moz-text-decoration-style:dotted; -moz-text-decoration-color:#090; -moz-text-decoration-line:underline;}.testli:nth-child(3){ -moz-text-decoration-style:dashed; -moz-text-decoration-color:#999; -moz-text-decoration-line:underline;}.testli:nth-child(4){ -moz-text-decoration-style:double; -moz-text-decoration-color:#000; -moz-text-decoration-line:underline;}.testli:nth-child(5){ -moz-text-decoration-style:wavy; -moz-text-decoration-color:#00f; -moz-text-decoration-line:underline;}</style></head><body>

运行

提交问题





考

选


text-decoration-style版本：CSS3继承性：无

提交问题


语法：

text-decoration-style：solid|double|dotted|dashed|wavy

默认值：solid

solid：

double：

dotted：

dashed：

wavy：

取值：

实线

双线

点状线条

虚线

波浪线

说明：

检索或设置对象中的文本装饰线条的形状。

对应的脚本特性为textDecorationStyle。


兼容性：

支持版本\类型

版本 6.0-9.0 4.0-9.0 5.1 13.0-16.0 11.50-11.60

示例：


<title>text-decoration-style_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.testli{margin-top:10px;}.testli:nth-child(1){ -moz-text-decoration-style:solid; -moz-text-decoration-color:#f00; -moz-text-decoration-line:underline;}.testli:nth-child(2){ -moz-text-decoration-style:dotted; -moz-text-decoration-color:#f00; -moz-text-decoration-line:underline;}.testli:nth-child(3){ -moz-text-decoration-style:dashed; -moz-text-decoration-color:#f00; -moz-text-decoration-line:underline;}.testli:nth-child(4){ -moz-text-decoration-style:double; -moz-text-decoration-color:#f00; -moz-text-decoration-line:underline;}.testli:nth-child(5){ -moz-text-decoration-style:wavy; -moz-text-decoration-color:#f00; -moz-text-decoration-line:underline;}</style></head><body>

运行

提交问题





考

选


text-shadow版本：CSS3继承性：有

提交问题


语法：

text-shadow：none|<shadow>[,<shadow>]*

<shadow>=<length>{2,3}&&<color>?

默认值：none

none：

<length>①：

<length>②：

<length>③：

<color>：

取值：

无阴影

第1个长度值用来设置对象的阴影水平偏移值。可以为负

值

第2个长度值用来设置对象的阴影垂直偏移值。可以为负

值

如果提供了第3个长度值则用来设置对象的阴影模糊值。

不允许负值

设置对象的阴影的颜色。

说明：

设置或检索对象中文本的文字是否有阴影及模糊效果。参阅box-

shadow属性。

可以设定多组效果，每组参数值以逗号分隔。

对应的脚本特性为textShadow。


兼容性：

支持版本\类型

版本 6.0-9.04.0 5.1 13.0 11.50

版本 10.0

示例：


<title>text-shadow_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.testli{margin-top:10px;}.test.mormalp{text-shadow:1px1pxrgba(0,0,0,.3);}.test.blurp{text-shadow:1px1px1pxrgba(0,0,0,.3);}.test.groupp{text-shadow:1px1px0rgba(255,255,255,1),1px1px2pxrgba(0,85,0,.8);}</style></head><body><ulclass="test"> <liclass="mormal"> <strong>普通文字阴影</strong> <p>测试普通文字阴影效果</p> </li> <liclass="blur"> <strong>模糊文字阴影效果</strong> <p>测试模糊文字阴影效果</p> </li> <liclass="group"> <strong>多重模糊文字阴影效果</strong> <p>测试多重模糊文字阴影效果</p> </li></ul></body></html>

运行

提交问题





考

选


text-fill-color版本：CSS3继承性：有

提交问题


语法：

text-fill-color：<color>

<color>：

取值：

指定文字的填充颜色。

说明：

检索或设置对象中的文字填充颜色。

若同时设置text-fill-color和color，text-fill-color定义的颜色将覆盖color

属性；

通过text-fill-color属性，可以做出一些例如渐变文字和镂空文字的效

果。Demo:渐变文字镂空文字

对应的脚本特性为textFillColor。

http://demo.doyoe.com/css3/text-fill-color/gradient-text.htm

http://demo.doyoe.com/css3/text-fill-color/hollow-text.htm


兼容性：

支持版本\类型

版本 6.0-10.0 4.0-9.0.1 5.1 13.0 11.50-11.60

写法：

内核类型写法

Webkit(Chrome/Safari) -webkit-text-fill-color

Gecko(Firefox)

Presto(Opera)

Trident(IE)

W3C text-fill-color

示例：


<title>text-fill-color_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>html,body{ margin:50px0;}.text-fill-color{ width:950px; margin:0auto; background:-webkit-linear-gradient(top,#eee,#aaa50%,#33351%,#000); -webkit-background-clip:text; -webkit-text-fill-color:transparent; font:bold95px/1.231georgia,sans-serif; text-transform:uppercase;}</style></head><body><divclass="text-fill-color">text-fill-color</div></body></html>

运行

提交问题





考

选


text-stroke版本：CSS3继承性：有

提交问题


语法：

text-stroke：[text-stroke-width]||[text-stroke-color]


[text-stroke-width]：

[text-stroke-color]：

取值：

设置或检索对象中的文字的描边厚度

设置或检索对象中的文字的描边颜色

说明：

复合属性。设置或检索对象中的文字的描边。

对应的脚本特性为textStroke。


兼容性：

支持版本\类型

版本 6.0-10.0 4.0-9.0.1 5.1 13.0 11.50-11.60

写法：

内核类型写法

Webkit(Chrome/Safari) -webkit-text-stroke

Gecko(Firefox)

Presto(Opera)

Trident(IE)

W3C text-stroke

示例：


<title>text-stroke_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>html,body{font:bold14px/1.5georgia,simsun,sans-serif;text-align:center;}.strokeh1{margin:0;padding:10px00;}.strokep{ margin:50pxauto100px;font-size:100px; -webkit-text-stroke:1px#f00;}.copyright,.info{font-style:italic;}</style></head><body><body><divclass="stroke"> <h1>描边的文字：</h1> <p>我是被描了1像素红边的文字</p></div></body></html>

运行

提交问题





考

选


text-stroke-width版本：CSS3继承性：有

提交问题


语法：

text-stroke-width：<length>

默认值：0

<length>：

取值：

用长度值指定描边厚度。不允许负值

说明：

设置或检索对象中的文字的描边厚度

对应的脚本特性为textStrokeWidth。


兼容性：

支持版本\类型

版本 6.0-10.0 4.0-9.0.1 5.1 13.0 11.50-11.60

写法：

内核类型写法

Webkit(Chrome/Safari) -webkit-text-stroke-width

Gecko(Firefox)

Presto(Opera)

Trident(IE)

W3C text-stroke-width

示例：


<title>text-stroke-width_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>html,body{font:bold14px/1.5georgia,simsun,sans-serif;text-align:center;}.strokeh1{margin:0;padding:10px00;}.strokep{ margin:50pxauto100px;font-size:100px; -webkit-text-stroke-width:2px; -webkit-text-stroke-color:#ff0;}.copyright,.info{font-style:italic;}</style></head><body><body><divclass="stroke"> <h1>描边的文字：</h1> <p>我是被描了2像素黄边的文字</p></div></body></html>

运行

提交问题





考

选


text-stroke-color版本：CSS3继承性：有

提交问题


语法：

text-stroke-color：<color>


<color>：

取值：

指定文字的描边颜色。

说明：

设置或检索对象中的文字的描边颜色

对应的脚本特性为textStrokeColor。


兼容性：

支持版本\类型

版本 6.0-10.0 4.0-9.0.1 5.1 13.0 11.50-11.60

写法：

内核类型写法

Webkit(Chrome/Safari) -webkit-text-stroke-color

Gecko(Firefox)

Presto(Opera)

Trident(IE)

W3C text-stroke-color

示例：


<title>text-stroke-color_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>html,body{font:bold14px/1.5georgia,simsun,sans-serif;text-align:center;}.strokeh1{margin:0;padding:10px00;}.strokep{ margin:50pxauto100px;font-size:100px; -webkit-text-stroke-width:2px; -webkit-text-stroke-color:#ff0;}.copyright,.info{font-style:italic;}</style></head><body><body><divclass="stroke"> <h1>描边的文字：</h1> <p>我是被描了2像素黄边的文字</p></div></body></html>

运行

提交问题





考

选


letter-spacing版本：CSS1继承性：有

提交问题


语法：

letter-spacing：normal|<length>

默认值：normal

相关属性：[word-spacing]

normal：

<length>：

取值：

默认间隔

用长度值指定间隔。可以为负值。

说明：

检索或设置对象中的文字之间的间隔。

该属性将指定的间隔添加到每个文字(包括单词内的每个字母)之后。

对应的脚本特性为letterSpacing。


兼容性：

支持版本\类型

版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>letter-spacing_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.testp{border:1pxsolid#000;}.normalp{letter-spacing:normal;}.lengthp{letter-spacing:10px;}</style></head><body><ulclass="test"> <liclass="normal"> <strong>默认间隔</strong> <p>默认情况下的文字间间隔</p> </li> <liclass="length"> <strong>自定义的间隔大小</strong> <p>自定义的文字间隔大小Helloworld</p> </li></ul></body></html>

运行

提交问题





考

选


word-spacing版本：CSS1继承性：有

提交问题


语法：

word-spacing：normal|<length>

默认值：normal

相关属性：[letter-spacing]

normal：

<length>：

取值：

默认间隔

用长度值指定间隔。可以为负值。

说明：

检索或设置对象中的单词之间间隔。

该属性将指定的间隔添加到每个单词(词内不发生)之后，但最后一个

字将被排除在外。

判断是否为单词的依据是单词间是否有空格。

对应的脚本特性为wordSpacing。


兼容性：

支持版本\类型

版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>word-spacing_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.testp{border:1pxsolid#000;}.normalp{word-spacing:normal;}.lengthp{word-spacing:50px;}</style></head><body><ulclass="test"> <liclass="normal"> <strong>默认间隔</strong> <p>howareyou!</p> </li> <liclass="length"> <strong>自定义的间隔大小</strong> <p>howareyou!</p> </li></ul></body></html>

运行

提交问题





考

选


vertical-align版本：CSS1/CSS2继承性：无

提交问题


baseline：

sub：

super：

top：

text-top：

middle：

bottom：

text-bottom：

<percentage>：

<length>：

取值：

将支持valign特性的对象的内容与基线对齐

垂直对齐文本的下标

垂直对齐文本的上标

将支持valign特性的对象的内容与对象顶端对齐

将支持valign特性的对象的文本与对象顶端对齐

将支持valign特性的对象的内容与对象中部对齐

将支持valign特性的对象的文本与对象底端对齐

将支持valign特性的对象的文本与对象顶端对齐

用百分比指定由基线算起的偏移量。可以为负值。基

线对于百分数来说就是0%。

用长度值指定由基线算起的偏移量。可以为负值。基线对

于数值来说为0。（CSS2）

说明：

设置或检索对象内容的垂直对其方式。

对应的脚本特性为verticalAlign。


兼容性：

支持版本\类型

版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>vertical-align_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.testp{border:1pxsolid#000;font-size:16px;line-height:2;}.testa{margin-left:5px;font-size:12px;}.baselinea{vertical-align:baseline;}.suba{vertical-align:sub;}.supera{vertical-align:super;}.topa{vertical-align:top;}.text-topa{vertical-align:text-top;}.middlea{vertical-align:middle;}.bottoma{vertical-align:bottom;}.text-bottoma{vertical-align:text-bottom;}.lengtha{vertical-align:10px;}</style></head><body><ulclass="test"> <liclass="baseline"> <strong>与基线对齐</strong> <p>参考内容<ahref="?">基线对齐</a></p> </li> <liclass="sub"> <strong>与参考内容的下标对齐</strong> <p>参考内容<ahref="?">下标对齐</a></p> </li> <liclass="super"> <strong>与参考内容的上标对齐</strong> <p>参考内容<ahref="?">上标对齐</a></p> </li> <liclass="top"> <strong>对象的内容与对象顶端对齐</strong>

运行

提交问题





考

选


word-wrap版本：CSS3继承性：有

提交问题


语法：

word-wrap：normal|break-word

默认值：normal

normal：

break-word：

取值：

允许内容顶开或溢出指定的容器边界。

内容将在边界内换行。如果需要，单词内部允许断行。

说明：

检索或设置对象中的单词之间间隔。

对应的脚本特性为wordWrap。


兼容性：

支持版本\类型

版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>word-wrap_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.testp{width:100px;border:1pxsolid#000;}.normalp{word-wrap:normal;}.break-wordp{word-wrap:break-word;}</style></head><body><ulclass="test"> <liclass="normal"> <strong>normal：</strong> <p>aaabbbcccdddeeefffggghhhiiijjjkkklllmmmnnn</p> </li> <liclass="break-word"> <strong>break-word：</strong> <p>aaabbbcccdddeeefffggghhhiiijjjkkklllmmmnnn</p> </li></ul></body></html>

运行

提交问题





考

选


white-space版本：CSS1继承性：有

提交问题


语法：

white-space：normal|pre|nowrap|pre-wrap|pre-line

默认值：normal

normal：

pre：

nowrap：

pre-wrap：

pre-line：

取值：

默认处理方式。

用等宽字体显示预先格式化的文本，不合并文字间的空白距离，

当文字超出边界时不换行。可查阅pre对象

强制在同一行内显示所有文本，直到文本结束或者遭遇br对

象。

用等宽字体显示预先格式化的文本，不合并文字间的空白

距离，当文字碰到边界时发生换行。

保持文本的换行，不保留文字间的空白距离，当文字碰到边

界时发生换行。

说明：

设置或检索对象内空格的处理方式。

对应的脚本特性为whiteSpace。


兼容性：

支持版本\类型

版本 7.0#14.0 5.1 13.0 11.50

版本 8.0

1. IE7及更早浏览器不支持pre-wrap|pre-line。

示例：


<title>white-space_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.testp{width:200px;border:1pxsolid#000;}.normalp{word-wrap:normal;}.prep{white-space:pre;}.pre-wrapp{white-space:pre-wrap;}.pre-linep{white-space:pre-line;}.nowrapp{white-space:nowrap;}</style></head><body><ulclass="test"> <liclass="normal"> <strong>normal：</strong> <p>轻轻地我走了正如我轻轻地来</p> </li> <liclass="pre"> <strong>pre：</strong> <p>轻轻地我走了（这里接很多测试文字）正如我轻轻地来</p> </li> <liclass="pre-wrap"> <strong>pre-wrap：</strong> <p>轻轻地我走了（这里接很多测试文字）正如我轻轻地来</p> </li> <liclass="pre-line"> <strong>pre-line</strong> <p>轻轻地我走了（这里接很多测试文字）正如我轻轻地来</p>

运行

提交问题





考

选


direction版本：CSS2继承性：有

提交问题


语法：

direction：ltr|rtl

默认值：ltr

ltr：

rtl：

取值：

文本流从左到右。

文本流从右到左。

说明：

检索或设置文本流的方向。

假如您想应用direction属性于内联元素的文本，您必须设定unicode-

bidi属性为embed或bidi-override。

对应的脚本特性为direction。


兼容性：

支持版本\类型

版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>direction_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.testp{width:320px;margin:15px0;border:1pxsolid#000;}.ltrp{direction:ltr;}.rtlp{direction:rtl;unicode-bidi:bidi-override;}</style></head><body><ulclass="test"> <liclass="ltr"> <strong>ltr：</strong> <p>本段文字将按照从左到右的方向进行流动。</p> </li> <liclass="rtl"> <strong>rtl：</strong> <p>本段文字将按照从右到左的方向进行流动。</p> </li></ul></body></html>

运行

提交问题





考

选


unicode-bidi版本：CSS2继承性：无

提交问题


语法：

unicode-bidi：normal|embed|bidi-override

默认值：normal

normal：

embed：

bidi-override：

取值：

对象不打开附加的嵌入层，对于内联要素，隐式重排序跨对

象边界进行工作。

对象打开附加的嵌入层，direction属性的值指定嵌入层，在对

象内部进行隐式重排序。

严格按照direction属性的值重排序。忽略隐式双向运算

规则。

说明：

用于同一个页面里存在从不同方向读进的文本显示。与direction属性

一起使用

假如您想应用direction属性于内联元素的文本，您必须设定unicode-

bidi属性为embed或bidi-override。

对应的脚本特性为unicodeBidi。


兼容性：

支持版本\类型

版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>unicode-bidi_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.testp{width:320px;margin:15px0;border:1pxsolid#000;}.ltrp{direction:ltr;}.rtlp{direction:rtl;unicode-bidi:bidi-override;}</style></head><body><ulclass="test"> <liclass="ltr"> <strong>ltr：</strong> <p>本段文字将按照从左到右的方向进行流动。</p> </li> <liclass="rtl"> <strong>rtl：</strong> <p>本段文字将按照从右到左的方向进行流动。</p> </li></ul></body></html>

运行

提交问题





考

选


line-height版本：CSS1继承性：有

提交问题


语法：

line-height：normal|<length>|<percentage>|<number>

默认值：normal

normal：

<length>：

<percentage>：

<number>：

取值：

允许内容顶开或溢出指定的容器边界。

用长度值指定行高。可以为负值。

用百分比指定行高，其百分比取值是基于字体的高度

尺寸。可以为负值。

用乘积因子指定行高。可以为负值。

说明：

检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离。

对应的脚本特性为lineHeight。


兼容性：

支持版本\类型

版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>line-height_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.testdiv{width:300px;margin:15px0;border:1pxsolid#000;}.testp{margin:0;font-size:30px;}.fixeddiv{line-height:20px;}.percentagediv{line-height:130%;}.genediv{line-height:1.5;}</style></head><body><ulclass="test"> <liclass="fixed"> <strong>固定数值方式：</strong>-{line-height:20px;} <div><p>使用固定数值的方式定义line-height，如设置行高为18px类似这样的固定数值，可能会引发文字重叠的现象。</p></div> </li> <liclass="percentage"> <strong>百分比方式：</strong>-{line-height:130%;} <div> 如果是这种情况 <p>使用百分比的方式定义line-height，与使用固定数值方式一样，也可能会引发文字重叠的现象。</p> </div> </li> <liclass="gene"> <strong>因子方式：</strong>-{line-height:1.5;} <div> 如果是这种情况 <p>使用因子方式定义line-height是非常安全的方式，将可以避免文字重叠的现象。</p> </div> </li>

运行

提交问题





考

选


tab-size版本：CSS3继承性：有

提交问题


语法：

tab-size：<integer>|<length>

默认值：8

<integer>：

<length>：

取值：

用整数值指定制表符的长度。不允许负值。

用长度值指定制表符的长度。不允许负值。

说明：

检索或设置对象中的制表符的长度。

对应的脚本特性为tabSize。


兼容性：

支持版本\类型

版本 6.0-10.0 4.0-6.0#1 5.1 13.0 11.50-11.51#1

1. Firefox4.0-6.0及Opera11.50-11.51还不支持<length>作为参数值。

示例：


<title>tab-size_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>pre{background:#eee;-moz-tab-size:4;-o-tab-size:4;}</style></head><body><pre>你站在桥上看风景，看风景的人在楼上看你。明月装饰了你的窗子，你装饰了别人的梦。</pre></body></html>

运行

提交问题




CSS参考手册»属性列表»列表属性» 其它列表属性参

考

选


list-style版本：CSS1继承性：有

提交问题


语法：

list-style：[list-style-image]||[list-style-position]||[list-style-type]

默认值：看独立属性自身

[list-style-image]：

[list-style-position]：

[list-style-type]：

取值：

设置或检索作为对象的列表项标记的图像

设置或检索作为对象的列表项标记如何根据文本

排列

设置或检索对象的列表项所使用的预设标记

说明：

复合属性。设置列表项目相关内容

对应的脚本特性为listStyle。


兼容性：

支持版本\类型

版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>list-style_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{list-style:upper-alphaoutsidenone;}</style></head><body><ulclass="test"> <liclass="colorname">列表项一</li> <liclass="colorname">列表项一</li> <liclass="colorname">列表项一</li> <liclass="colorname">列表项一</li></ul></body></html>

运行

提交问题





考

选


list-style-image版本：CSS1继承性：有

提交问题


语法：

list-style-image：none|<url>

默认值：none

none：

<url>：

取值：

不指定图像

使用绝对或相对地址指定列表项标记图像。

说明：

设置或检索作为对象的列表项标记的图像。

若list-style-image属性为none或指定图像不可用时，list-style-type属性

将发生作用。

对应的脚本特性为listStyleImage。


兼容性：

支持版本\类型

版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>list-style-image_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{list-style-image:url(skin/ico.png);}</style></head><body><h1>用list-style-image重置项目符号：</h1><ulclass="test"> <li>列表项一</li> <li>列表项一</li> <li>列表项一</li> <li>列表项一</li></ul></body></html>

运行

提交问题





考

选


list-style-position版本：CSS1继承性：有

提交问题


语法：

list-style-position：outside|inside

默认值：outside

outside：

inside：

取值：

列表项目标记放置在文本以外，且环绕文本不根据标记对齐

列表项目标记放置在文本以内，且环绕文本根据标记对齐

说明：

设置或检索作为对象的列表项标记如何根据文本排列。

仅作用于具有display值等于list-item的对象（如li对象）。

注意：ol对象和ul对象的type特性为其后的所有列表项目（如li对象）

指明列表属性。

对应的脚本特性为listStylePosition。


兼容性：

支持版本\类型

版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>list-style-position_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.outside{width:120px;list-style-position:outside;}.inside{width:120px;list-style-position:inside;}</style></head><body><h1>outside的项目符号：</h1><ulclass="outside"> <li>项目符号的位置是outside</li> <li>项目符号的位置是outside</li> <li>项目符号的位置是outside</li></ul><h1>inside的项目符号：</h1><ulclass="inside"> <li>项目符号的位置是inside</li> <li>项目符号的位置是inside</li> <li>项目符号的位置是inside</li></ul></body></html>

运行

提交问题





考

选


list-style-type版本：CSS1继承性：有

提交问题


disc：

circle：

square：

decimal：

lower-roman：

upper-roman：

lower-alpha：

upper-alpha：

none：

armenian：

cjk-ideographic：

georgian：

lower-greek：

hebrew：

hiragana：

hiragana-iroha：

katakana：

katakana-iroha：

lower-latin：

upper-latin：

取值：

实心圆(CSS1)

空心圆(CSS1)

实心方块(CSS1)

阿拉伯数字(CSS1)

小写罗马数字(CSS1)

大写罗马数字(CSS1)

小写英文字母(CSS1)

大写英文字母(CSS1)

不使用项目符号(CSS1)

传统的亚美尼亚数字(CSS2)

浅白的表意数字(CSS2)

传统的乔治数字(CSS2)

基本的希腊小写字母(CSS2)

传统的希伯莱数字(CSS2)

日文平假名字符(CSS2)

日文平假名序号(CSS2)

日文片假名字符(CSS2)

日文片假名序号(CSS2)

小写拉丁字母(CSS2)

大写拉丁字母(CSS2)

说明：

设置或检索对象的列表项所使用的预设标记。

若list-style-image属性为none或指定图像不可用时，list-style-type属性

将发生作用。

仅作用于具有display值等于list-item的对象（如li对象）。

注意：ol对象和ul对象的type特性为其后的所有列表项目（如li对象）

指明列表属性。

对应的脚本特性为listStyleType。


兼容性：

支持版本\类型

版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>list-style-type_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>h1{font-size:16px;font-family:Arial;}.disc{list-style-type:disc;}.circle{list-style-type:circle;}.square{list-style-type:square;}.decimal{list-style-type:decimal;}.lower-roman{list-style-type:lower-roman;}.upper-roman{list-style-type:upper-roman;}.lower-alpha{list-style-type:lower-alpha;}.upper-alpha{list-style-type:upper-alpha;}.none{list-style-type:none;}.armenian{list-style-type:armenian;}.cjk-ideographic{list-style-type:cjk-ideographic;}.georgian{list-style-type:georgian;}.lower-greek{list-style-type:lower-greek;}.hebrew{list-style-type:hebrew;}.hiragana{list-style-type:hiragana;}.hiragana-iroha{list-style-type:hiragana-iroha;}.katakana{list-style-type:katakana;}.katakana-iroha{list-style-type:katakana-iroha;}.lower-latin{list-style-type:lower-latin;}.upper-latin{list-style-type:upper-latin;}</style></head><body><h1>disc：</h1><ulclass="disc"> <li>这是一个项目列表</li> <li>这是一个项目列表</li> <li>这是一个项目列表</li>

运行

提交问题




CSS参考手册»属性列表»表格属性» 其它表格属性参

考

选


table-layout版本：CSS2继承性：无

提交问题


语法：

table-layout：auto|fixed

默认值：auto

auto：

fixed：

取值：

默认的自动算法。布局将基于各单元格的内容。表格在每一单

元格读取计算之后才会显示出来。速度很慢

固定布局的算法。在这算法中，水平布局是仅仅基于表格的宽

度，表格边框的宽度，单元格间距，列的宽度，而和表格内容无关。

也就是说，内容可能被裁切

说明：

设置或检索表格的布局算法。

对应的脚本特性为tableLayout。


兼容性：

支持版本\类型

版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>table-layout_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>h1{font-size:16px;font-family:Arial;}.auto{table-layout:auto;width:350px;}.fixed{table-layout:fixed;width:350px;}</style></head><body><h1>auto:表格自动算法</h1><tableborder="1"class="auto"><tbody> <tr> <td>表格自动算法，宽度将基于单元格的内容自动拉伸</td> <td>表格自动算法</td> <td>表格自动算法</td> </tr> <tr> <td>表格自动算法</td> <td>表格自动算法</td> <td>表格自动算法</td> </tr></tbody></table>

<h1>fixed:表格固定算法</h1><tableborder="1"class="fixed"><tbody> <tr> <td>表格固定算法布局</td> <td>表格固定算法</td> <td>表格固定算法</td>

运行

提交问题





考

选


border-collapse版本：CSS2继承性：有

提交问题


语法：

border-collapse：separate|collapse

默认值：separate

separate：

collapse：

取值：

边框独立

相邻边被合并

说明：

设置或检索表格的行和单元格的边是合并还是独立。

对应的脚本特性为borderCollapse。


兼容性：

支持版本\类型

版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>border-collapse_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>h1{font-size:16px;font-family:Arial;}.separate{border-collapse:separate;}.collapse{border-collapse:collapse;}</style></head><body><h1>separate:边框独立</h1><tableborder="1"class="separate"><tbody> <tr> <td>独立边框</td> <td>独立边框</td> <td>独立边框</td> </tr> <tr> <td>独立边框</td> <td>独立边框</td> <td>独立边框</td> </tr></tbody></table>

<h1>collapse:相邻边被合并</h1><tableborder="1"class="collapse"><tbody> <tr> <td>合并边框</td> <td>合并边框</td> <td>合并边框</td>

运行

提交问题





考

选


border-spacing版本：CSS2继承性：有

提交问题


语法：

border-spacing：<length>{1,2}

默认值：0

<length>：

取值：

用长度值来定义行和单元格的边框在横向和纵向上的间

距。不允许负值

说明：

设置或检索当表格边框独立时，行和单元格的边框在横向和纵向上的

间距

该属性作用等同于标签属性cellspacing。

只有当表格边框独立（即border-collapse属性等于separate时）此属性才

起作用。

如果提供全部两个length值时，第一个作用于横向间距，第二个作用于

纵向间距。

如果只提供一个length值时，这个值将作用于横向和纵向上的间距。

对应的脚本特性为borderSpacing。


兼容性：

支持版本\类型

版本 6.0-7.04.0 5.1 13.0 11.50

版本 8.0

示例：


<title>border-spacing_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>h1{font-size:16px;font-family:Arial;}.test1{border-collapse:separate;border-spacing:10px20px;}.test2{border-collapse:collapse;border-spacing:10px20px;}</style></head><body><h1>边框独立时border-spacing生效</h1><tableborder="1"class="test1"><tbody> <tr> <td>独立边框</td> <td>独立边框</td> <td>独立边框</td> </tr> <tr> <td>独立边框</td> <td>独立边框</td> <td>独立边框</td> </tr></tbody></table>

<h1>相邻边被合并时border-spacing无效</h1><tableborder="1"class="test2"><tbody> <tr> <td>合并边框</td> <td>合并边框</td> <td>合并边框</td>

运行

提交问题





考

选


caption-side版本：CSS2继承性：有

提交问题


语法：

caption-side：top|right|bottom|left

默认值：top

top：

bottom：

取值：

指定caption在表格上边

指定caption在表格下边

说明：

设置或检索表格的caption对象是在表格的那一边。

要在IE7及以下浏览器中实现top与bottom参数值的效果，可直接在

caption标签内定义标签属性valign为top和bottom。

对应的脚本特性为captionSide。


兼容性：

支持版本\类型

版本 6.0-7.04.0 5.1 13.0 11.50

版本 8.0

示例：


<title>caption-side_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>h1{font-size:16px;font-family:Arial;}.test1{caption-side:top;}.test2{caption-side:right;}.test3{caption-side:bottom;}.test4{caption-side:left;}</style></head><body><h1>caption在上边</h1><tableborder="1"class="test1"><caption>caption在上边</caption><tbody> <tr> <td>这是某一单元格</td> <td>这是某一单元格</td> </tr> <tr> <td>这是某一单元格</td> <td>这是某一单元格</td> </tr></tbody></table>

<h1>caption在右边</h1><tableborder="1"class="test2"><caption>caption在右边</caption><tbody> <tr> <td>这是某一单元格</td>

运行

提交问题





考

选


empty-cells版本：CSS2继承性：有

提交问题


语法：

empty-cells：hide|show

默认值：show

hide：

show：

取值：

指定当表格的单元格无内容时，隐藏该单元格的边框。

指定当表格的单元格无内容时，显示该单元格的边框。

说明：

设置或检索当表格的单元格无内容时，是否显示该单元格的边框。

IE7及以下浏览器中默认隐藏无内容的单元格边框，要想使其获得与

show参数值相同的效果，可以变相给该空单元格加个占位且不可见的

元素，例如全角空格或等等。

只有当表格边框独立（即border-collapse属性等于separate时）此属性才

起作用。

对应的脚本特性为emptyCells。


兼容性：

支持版本\类型

版本 6.0-7.04.0 5.1 13.0 11.50

版本 8.0

示例：


<title>empty-cells_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>h1{font-size:16px;font-family:Arial;}.test{empty-cells:show;}.test2{empty-cells:hide;}</style></head><body><h1>show:</h1><tableborder="1"class="test"><tbody> <tr> <td>序号</td> <td>姓名</td> <td>年龄</td> </tr> <tr> <td>1</td> <td>Joy</td> <td>26</td> </tr> <tr> <td>2</td> <td>Kate</td> <td></td> </tr></tbody></table>

<h1>hide:</h1><tableborder="1"class="test2">

运行

提交问题




CSS参考手册»属性列表»内容属性» 其它内容属性参

考

选


content版本：CSS2继承性：无

提交问题


normal：

none：

<attr>：

<url>：

<string>：

counter(name)：

counter(name,list-style-type)：

counters(name,string)：

counters(name,string,list-style-type)：

no-close-quote：

no-open-quote：

close-quote：

open-quote：

取值：

默认值。表现与none值相同

不生成任何值。

插入标签属性值

使用指定的绝对或相对地址插入一个外部资源（图像，声频，

视频或浏览器支持的其他任何资源）

插入字符串

使用已命名的计数器

使用已命名的计数器并遵从指定的list-

style-type属性

使用所有已命名的计数器

使用所有已命名的计数器并遵从

指定的list-style-type属性

并不插入quotes属性的后标记。但增加其嵌套级别

并不插入quotes属性的前标记。但减少其嵌套级别

插入quotes属性的后标记

插入quotes属性的前标记

说明：

用来和:after及:before伪元素一起使用，在对象前或后显示内容。

对应的脚本特性为content。


兼容性：

支持版本\类型

版本 6.0-7.04.0 5.1 13.0 11.50

版本 8.0

示例：


<title>content_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.stringp:after{margin-left:-16px;background:#fff;content:"是";color:#f00;}.attrp:after{content:attr(title);}.urlp:before{content:url(../../skin/ico.png);}.testol{margin:16px0;padding:0;list-style:none;}.counter1li{counter-increment:testname;}.counter1li:before{content:counter(testname);color:#f00;font-family:georgia,serif,sans-serif;}.counter2li{counter-increment:testname2;}.counter2li:before{content:counter(testname2,lower-roman);color:#f00;font-family:georgia,serif,sans-serif;}.counter3olol{margin:00028px;}.counter3li{padding:2px0;counter-increment:testname3;}.counter3li:before{content:counter(testname3,decimal)".";color:#f00;font-family:georgia,serif,sans-serif;}.counter3lili{counter-increment:testname4;}.counter3lili:before{content:counter(testname3,decimal)"."counter(testname4,decimal)".";}.counter3lilili{counter-increment:testname5;}.counter3lilili:before{content:counter(testname3,decimal)"."counter(testname4,decimal)"."counter(testname5,decimal)".";}</style></head><body><ulclass="test"> <liclass="string"> <strong>string：</strong> <p>你的浏览器是否支持content属性：否</p> </li> <liclass="attr"> <strong>attr：</strong> <ptitle="如果你看到我则说明你目前使用的浏览器支持content属性"></p> </li> <liclass="url">

运行

提交问题





考

选


counter-increment版本：CSS2继承性：无

提交问题


语法：

counter-increment：none|[<identifier><integer>]+

默认值：none

none：

<identifier>：

<integer>：

取值：

阻止计数器增加

identifier定义一个或多个将被增加的selector，id，或者

class

定义计算器每次增加的数值，可以为负值，默认值是1

说明：

设定当一个selector发生时计数器增加的值。

对应的脚本特性为counterIncrement。


兼容性：

支持版本\类型

版本 6.0-7.04.0 5.1 13.0 11.50

版本 8.0

示例：


<title>content-increment_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.testol{margin:16px0;padding:0;list-style:none;}.testlili:before{color:#f00;font-family:georgia,serif,sans-serif;}.counter1li{counter-increment:testname;}.counter1li:before{content:counter(testname)".";}.counter2li{counter-increment:testname22;}.counter2li:before{content:counter(testname2)".";}.counter3li{counter-increment:testname3-1;}.counter3li:before{content:counter(testname3)".";}</style></head><body><ulclass="test"> <liclass="counter1"> <strong>默认时的计数器：</strong> <ol> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ol> </li> <liclass="counter2"> <strong>修改计数器每次增加的值为2：</strong> <ol> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ol> </li> <liclass="counter3">

运行

提交问题





考

选


counter-reset版本：CSS2继承性：无

提交问题


语法：

counter-reset：none|[<identifier><integer>]+

默认值：none

none：

<identifier>：

<integer>：

取值：

阻止计数器复位

identifier定义一个或多个将被复位的selector，id，或者

class

定义被复位的数值，可以为负值，默认值是0

说明：

将指定selector的计数器复位。

对应的脚本特性为counterReset。


兼容性：

支持版本\类型

版本 6.0-7.04.0 5.1 13.0 11.50

版本 8.0

示例：


<title>content-reset_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.testol{margin:16px0;padding:0;list-style:none;}.testlili:before{color:#f00;font-family:georgia,serif,sans-serif;}.counter1li{counter-increment:testname;}.counter1li:before{content:counter(testname)".";counter-reset:testname;}.counter2li{counter-increment:testname2;}.counter2li:before{content:counter(testname2)".";counter-reset:testname220;}.counter3li{counter-increment:testname3;}.counter3li:before{content:counter(testname3)".";counter-reset:testname3-1;}</style></head><body><ulclass="test"> <liclass="counter1"> <strong>默认时被复位的计数器：</strong> <ol> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ol> </li> <liclass="counter2"> <strong>将计算器复位为20：</strong> <ol> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ol> </li> <liclass="counter3">

运行

提交问题





考

选


quotes版本：CSS2继承性：有

提交问题


语法：

quotes：none|[<string><string>]+

默认值：none

none：

<string>：

取值：

content属性的open-quote和close-quote值将不会生成任何标记

定义content属性的open-quote和close-quote值的标记，2个为

一组

说明：

设置或检索对象内使用的嵌套标记。

对应的脚本特性为quotes。


兼容性：

支持版本\类型

版本 6.0-7.04.0 5.1 13.0 11.50

版本 8.0

示例：


<title>quotes_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>q:lang(en){quotes:'['']'"<"">";}q:lang(zh-cn){quotes:"«""»"'"''"';}</style></head><body><plang="en"><q>Quoteme<q>Quoteme</q>Quoteme!</q></p><plang="zh-cn"><q>Quoteme<q>Quoteme</q>Quoteme!</q></p></body></html>

运行

提交问题




CSS参考手册»属性列表»用户界面属性» 其它用户界面属

性

选


outline版本：CSS2继承性：无

提交问题


语法：

outline：[outline-width]||[outline-style]||[outline-color]


相关属性:[outline-offset]

[outline-width]：

[outline-style]：

[outline-color]：

取值：

指定轮廓边框的宽度。

指定轮廓边框的样式。

指定轮廓边框的颜色。

说明：

复合属性。设置或检索对象外的线条轮廓。outline画在border外面

不允许类似border属性那样能将自身拆分为border-top,border-

right,border-bottom,border-left

IE8暂时还不支持outline-offset相关属性

对应的脚本特性为outline。


兼容性：

支持版本\类型

版本 6.0-7.04.0 5.1 13.0 11.50

版本 8.0

示例：


<title>outline_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{width:100px;padding:10px;outline:2pxsolid#f00;border:3pxsolid#333;}</style></head><body><divclass="test">注意边框线外面的红色轮廓</div></body></html>

运行

提交问题





性

选


outline-width版本：CSS2继承性：无

提交问题


语法：

outline-width：<length>|thin|medium|thick

默认值：medium

<length>：

medium：

thin：

thick：

取值：

用长度值来定义轮廓的厚度。不允许负值

定义默认宽度的轮廓。

定义比默认宽度细的轮廓。

定义比默认宽度粗的轮廓。

说明：

设置或检索对象外的线条轮廓的宽度。参阅outline属性。

不允许类似border-width属性那样能将自身拆分为border-top-

width,border-right-width,border-bottom-width,border-left-width

对应的脚本特性为outlineWidth。


兼容性：

支持版本\类型

版本 6.0-7.04.0 5.1 13.0 11.50

版本 8.0

示例：


<title>outline-width_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{width:200px;padding:10px;outline-width:10px;outline-style:solid;outline-color:#f00;border:3pxsolid#333;}</style></head><body><divclass="test">注意边框线外面的红色轮廓<br>outline-width:10px;</div></body></html>

运行

提交问题





性

选


outline-color版本：CSS2继承性：无

提交问题


语法：

outline-color：<color>|invert

默认值：invert

<color>：

invert：

取值：

指定颜色。

使用背景色的反色。该参数值目前仅在IE及Opera下有效

说明：

设置或检索对象外的线条轮廓的颜色。参阅outline属性。

不允许类似border-color属性那样能将自身拆分为border-top-

color,border-right-color,border-bottom-color,border-left-color

对应的脚本特性为outlineColor。


兼容性：

支持版本\类型

版本 6.0-7.04.0 5.1 13.0 11.50

版本 8.0

示例：


<title>outline-color_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{width:200px;padding:10px;outline-width:5px;outline-style:solid;outline-color:#f90;border:3pxsolid#333;}</style></head><body><divclass="test">注意边框线外面的橙色轮廓<br>outline-color:#f90;</div></body></html>

运行

提交问题





性

选


outline-style版本：CSS2继承性：无

提交问题


none：

dotted：

dashed：

solid：

double：

groove：

ridge：

inset：

outset：

取值：

无轮廓。与任何指定的outline-width值无关

点状轮廓。

虚线轮廓。

实线轮廓

双线轮廓。两条单线与其间隔的和等于指定的outline-width值

3D凹槽轮廓。

3D凸槽轮廓。

3D凹边轮廓。

3D凸边轮廓。

说明：

设置或检索对象外的线条轮廓的样式。参阅outline属性。

不允许类似border-style属性那样能将自身拆分为border-top-style,border-

right-style,border-bottom-style,border-left-style

对应的脚本特性为outlineStyle。


兼容性：

支持版本\类型

版本 6.0#14.0 5.1 13.0 11.50

版本 7.0

1. IE6及更早浏览器会将dotted属性值显示为dashed的效果。

示例：


<title>outline-style_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{width:200px;padding:10px;outline-width:1px;outline-style:dashed;outline-color:#f00;border:3pxsolid#333;}</style></head><body><divclass="test">注意边框线外面的虚线轮廓<br>outline-style:dashed;</div></body></html>

运行

提交问题





性

选


outline-offset版本：CSS3继承性：无

提交问题


语法：

outline-offset：<length>

<length>：

取值：

用长度值来定义轮廓偏移。不允许负值

说明：

设置或检索对象外的线条轮廓偏移容器的值。参阅outline属性。

对应的脚本特性为outlineOffset。


兼容性：

支持版本\类型

版本 6.0-10.0 4.0 5.1 13.0 11.50

示例：


<title>outline-offset_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{width:220px;padding:10px;outline:1pxdashed#333;outline-offset:4px;border:3pxsolid#333;}</style></head><body><divclass="test">注意虚线轮廓偏移容器的距离<br>outline-offset:4px;</div></body></html>

运行

提交问题





性

选


nav-index版本：CSS3继承性：无

提交问题


语法：

nav-index：auto|<number>

默认值：auto

相关属性:[nav-up]||[nav-right]||[nav-down]||[nav-left]

auto：

<number>：

取值：

元素的导航焦点顺序由客户端自动分配。

用浮点数来定义元素的导航焦点顺序。若某元素的该值

等于1则意味着该元素最先被导航。当若干个元素的nav-index值相同

时，则按照文档的先后顺序进行导航。

说明：

设置或检索对象的导航顺序。

该属性是HTML4/XHTML1中标签属性tabindex的替代品。

只有支持nav-index属性的元素才能参与导航排序。

被禁用的元素将不参与导航排序。

对应的脚本特性为navIndex。


兼容性：

支持版本\类型

版本 6.0-10.0 4.0 5.1 13.0 11.50-11.51

示例：


<title>nav-index_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>html,body{margin:0;}button{position:absolute;}button#b1{ top:0;left:50%; nav-index:1; nav-right:#b2;nav-left:#b4; nav-down:#b2;nav-up:#b4;}button#b2{ top:50%;right:0; nav-index:2; nav-right:#b3;nav-left:#b1; nav-down:#b3;nav-up:#b1;}button#b3{ left:50%;bottom:0; nav-index:3; nav-right:#b4;nav-left:#b2; nav-down:#b4;nav-up:#b2;}button#b4{ top:50%;left:0; nav-index:4; nav-right:#b1;nav-left:#b3; nav-down:#b1;nav-up:#b3;}</style></head><body>

运行

提交问题





性

选


nav-up版本：CSS3继承性：无

提交问题


语法：

nav-up：auto|<id>[current|root|<target-name>]?

默认值：auto

相关属性:[nav-index]||[nav-right]||[nav-down]||[nav-left]

auto：

<id>：

<target-name>：

取值：

默认顺序。

被导航元素的id。

框架目标页面之间的元素焦点导航。

说明：

设置或检索对象的导航方向。



对应的脚本特性为navUp。


兼容性：

支持版本\类型

版本 6.0-10.0 4.0 5.1 13.0 11.50-11.51

示例：



运行

提交问题





性

选


nav-right版本：CSS3继承性：无

提交问题


语法：

nav-right：auto|<id>[current|root|<target-name>]?

默认值：auto

相关属性:[nav-index]||[nav-up]||[nav-down]||[nav-left]

auto：

<id>：

<target-name>：

取值：

默认顺序。



说明：




对应的脚本特性为navRight。


兼容性：

支持版本\类型

版本 6.0-10.0 4.0 5.1 13.0 11.50-11.51

示例：



运行

提交问题





性

选


nav-down版本：CSS3继承性：无

提交问题


语法：

nav-down：auto|<id>[current|root|<target-name>]?

默认值：auto

相关属性:[nav-index]||[nav-up]||[nav-right]||[nav-left]

auto：

<id>：

<target-name>：

取值：

默认顺序。



说明：




对应的脚本特性为navDown。


兼容性：

支持版本\类型

版本 6.0-10.0 4.0 5.1 13.0 11.50-11.51

示例：



运行

提交问题





性

选


nav-left版本：CSS3继承性：无

提交问题


语法：

nav-left：auto|<id>[current|root|<target-name>]?

默认值：auto

相关属性:[nav-index]||[nav-up]||[nav-right]||[nav-down]

auto：

<id>：

<target-name>：

取值：

默认顺序。



说明：




对应的脚本特性为navLeft。


兼容性：

支持版本\类型

版本 6.0-10.0 4.0 5.1 13.0 11.50-11.51

示例：



运行

提交问题





性

选


cursor版本：CSS2继承性：有

提交问题


说明：

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形

状。

使用自定义图像作为光标类型，IE,Opera只支持*.cur等特定的图片格

式；Firefox,Chrome,Safari既支持特定图片类型也支持常见的*.jpg,

*.gif,*.jpg等图片格式。

cursor的属性值可以是一个序列

示例代码：

:link,:visited{

cursor:url(example.svg#linkcursor),

url(hyper.cur),

url(hyper.png)23,

pointer;

}

本例用来给所有的超链接定义光标类型，客户端如果不支持SVG

类型的光标，则使用下个"hyper.cur"；如果cur类型也不支持，则

使用下个"hyper.png"；依次类推。

对应的脚本特性为cursor。


兼容性：

支持版本\类型

版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>cursor_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{width:400px;border-collapse:collapse;font:14px/1.5georgia,arial,serif,sans-serif;}.testtd{padding:2px10px;border:1pxsolid#ddd;}.testtd:hover{background:#eee;}.auto{cursor:auto;}.default{cursor:default;}.none{cursor:none;}.context-menu{cursor:context-menu;}.help{cursor:help;}.pointer{cursor:pointer;}.progress{cursor:progress;}.wait{cursor:wait;}.cell{cursor:cell;}.crosshair{cursor:crosshair;}.text{cursor:text;}.vertical-text{cursor:vertical-text;}.alias{cursor:alias;}.copy{cursor:copy;}.move{cursor:move;}.no-drop{cursor:no-drop;}.not-allowed{cursor:not-allowed;}.e-resize{cursor:e-resize;}.n-resize{cursor:n-resize;}.ne-resize{cursor:ne-resize;}.nw-resize{cursor:nw-resize;}.s-resize{cursor:s-resize;}.se-resize{cursor:se-resize;}.sw-resize{cursor:sw-resize;}.w-resize{cursor:w-resize;}.ew-resize{cursor:ew-resize;}

运行

提交问题





性

选


zoom版本：CSS2继承性：无

提交问题


语法：

zoom：normal|<number>|<percentage>

默认值：normal

normal：

<number>：

<percentage>：

取值：

使用对象的实际尺寸。

用浮点数来定义缩放比例。不允许负值

用百分比来定义缩放比例。不允许负值

说明：

设置或检索对象的缩放比例。

对应的脚本特性为zoom。


兼容性：

支持版本\类型

版本 6.0 4.0-6.0 5.1 13.0 11.50-11.51

示例：


<title>zoom_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>body{line-height:1.5;}h1{margin:0;font-size:16px;font-family:Arial;}.test{zoom:normal;}.test2{zoom:5;}.test3{zoom:300%;}</style></head><body><h1>zoom:normal</h1><divclass="test">zoom:normal</div>

<h1>zoom:5</h1><divclass="test2">zoom:5</div>

<h1>zoom:300%</h1><divclass="test3">zoom:300%</div></body></html>

运行

提交问题





性

选


box-sizing版本：CSS3继承性：无

提交问题


语法：

box-sizing：content-box|border-box

默认值：content-box

content-box：

border-box：

取值：

padding和border不被包含在定义的width和height之内。

对象的实际宽度等于设置的width值和border、padding之和，即(

Elementwidth=width+border+padding)

此属性表现为标准模式下的盒模型。

padding和border被包含在定义的width和height之内。对象

的实际宽度就等于设置的width值，即使定义有border和padding也不会

改变对象的实际宽度，即(Elementwidth=width)

此属性表现为怪异模式下的盒模型。

示例：

content-box:.test1{box-sizing:content-box;width:200px;padding:10px;

border:15pxsolid#eee;}

border-box:.test2{box-sizing:border-box;width:200px;padding:10px;

border:15pxsolid#eee;}

说明：

设置或检索对象的盒模型组成模式。

对应的脚本特性为boxSizing。


兼容性：

支持版本\类型

版本 6.0-7.0

4.0-8.0 5.1 13.0 11.50版本 8.0

版本 9.0

写法：

内核类型写法(box-sizing)

Webkit(Chrome/Safari) box-sizing

Gecko(Firefox) -moz-box-sizing

Presto(Opera) box-sizing

Trident(IE) IE8:-ms-box-sizing/IE9:box-sizing

示例：


<title>box-sizing_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{width:200px;height:70px;padding:10px;border:15pxsolid#999;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;-ms-box-sizing:content-box;box-sizing:content-box;background:#eee;}.test2{width:200px;height:70px;padding:10px;border:15pxsolid#999;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;background:#eee;margin-top:20px;}</style></head><body><divclass="test">content-box</div><divclass="test2">border-box</div></body></html>

运行

提交问题





性

选


resize版本：CSS3继承性：无

提交问题


语法：

resize：none|both|horizontal|vertical

默认值：none

none：

both：

horizontal：

vertical：

取值：

不允许用户调整元素大小。

用户可以调节元素的宽度和高度。

用户可以调节元素的宽度

用户可以调节元素的高度。

说明：

设置或检索对象的区域是否允许用户缩放，调节元素尺寸大小。

如果希望此属性生效，需要设置对象的overflow属性，值可以是

auto,hidden或scroll。

对应的脚本特性为resize。


兼容性：

支持版本\类型

版本 6.0-10.0 4.0 5.1 13.0 11.50-11.60

示例：


<title>resize_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{overflow:auto;width:200px;height:100px;resize:both;background:#eee;}</style></head><body><divclass="test"> <ul> <li>新闻列表</li> <li>新闻列表</li> <li>新闻列表</li> </ul></div></body></html>

运行

提交问题





性

选


ime-mode版本：CSS3继承性：无

提交问题


语法：

zoom：auto|normal|active|inactive|disabled

默认值：auto

auto：

normal：

active：

inactive：

disabled：

取值：

不影响IME的状态。

正常的IME状态

指定所有使用ime输入的字符。即激活本地语言输入法。用户

仍可以撤销激活ime

指定所有不使用ime输入的字符。即激活非本地语言。用户

仍可以撤销激活ime

完全禁用ime。对于有焦点的控件(如输入框)，用户不可以

激活ime

说明：

设置或检索是否允许用户激活输入中文，韩文，日文等的输入法

（IME）状态。

对应的脚本特性为imeMode。


兼容性：

支持版本\类型

版本 6.0 4.0 5.1 13.0-16.0 11.50-11.60

示例：


<title>ime-mode_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>#test{ padding:50px; font:14px/1.231georgia,宋体,arial,verdana,helvetica,sans-serif;}#testfieldset{ margin:0; padding:10px; border-radius:5px;}#testfieldsetlegend{ padding:3px6px; border-radius:3px; background:#ddd;}#testul{ list-style:none; margin:0; padding:0;}#testli{ padding:5px10px;}#test.writebox{ position:relative; overflow:visible; outline:none; width:200px; padding:4px3px5px;border:1pxsolid#999;

运行

提交问题




CSS参考手册»属性列表»多栏属性» 其它多栏属性参

考

选


columns版本：CSS3继承性：无

提交问题


语法：

columns：[column-width]||[column-count]


[column-width]：

[column-count]：

取值：

设置或检索对象每列的宽度

设置或检索对象的列数

说明：

设置或检索对象的列数和每列的宽度。复合属性

对应的脚本特性为columns。


兼容性：

支持版本\类型

版本 6.0-9.0 4.0-8.05.1 13.0-16.0 11.50

版本 10.0 9.0

写法：

内核类型写法

Webkit(Chrome/Safari) -webkit-columns

Gecko(Firefox) -moz-columns

Presto(Opera) columns

Trident(IE) columns

W3C columns

示例：


<title>columns_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>body{font:14px/1.5georgia,serif,sans-serif;}p{margin:0;padding:5px10px;background:#eee;}h1{margin:10px0;font-size:16px;}.test{ width:628px; border:10pxsolid#000; -moz-columns:200px3; -webkit-columns:200px3; columns:200px3;}.test2{ border:10pxsolid#000; -moz-columns:200px; -webkit-columns:200px; columns:200px;}</style></head><body><h1>列数及列宽固定:</h1><divclass="test"> <p>Thismoduledescribesmulti-columnlayoutinCSS.Byusingfunctionalitydescribedinthisdocument,stylesheetscandeclarethatthecontentofanelementistobelaidoutinmultiplecolumns.</p> <p>OntheWeb,tableshavealsobeenusedtodescribemulti-columnlayouts.ThemainbenefitofusingCSS-basedcolumnsisflexibility;contentcanflowfromonecolumntoanother,andthenumberofcolumnscanvarydependingonthesizeoftheviewport.Removingpresentationtablemarkupfromdocumentsallowsthemtomoreeasilybepresentedonvariousoutputdevicesincludingspeechsynthesizersandsmallmobiledevices.</p></div><h1>列宽固定，根据容器宽度液态分布列数:</h1>

运行

提交问题





考

选


column-width版本：CSS3继承性：无

提交问题


语法：

column-width：<length>|auto

默认值：auto

<length>：

auto：

取值：

用长度值来定义列宽。不允许负值

根据column-count自定分配宽度

说明：

设置或检索对象每列的宽度

对应的脚本特性为columnWidth。


兼容性：

支持版本\类型

版本 6.0-9.04.0-9.0 5.1 13.0-16.0 11.50

版本 10.0

写法：

内核类型写法

Webkit(Chrome/Safari) -webkit-column-width

Gecko(Firefox) -moz-column-width

Presto(Opera) column-width

Trident(IE) column-width

W3C column-width

示例：


<title>column-width_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>body{font:14px/1.5georgia,serif,sans-serif;}p{margin:0;padding:5px10px;background:#eee;}h1{margin:10px0;font-size:16px;}.test{ width:628px; border:10pxsolid#000; -moz-column-width:200px; -moz-column-count:3; -webkit-column-width:200px; -webkit-column-count:3; column-width:200px; column-count:3;}.test2{ border:10pxsolid#000; -moz-column-width:200px; -webkit-column-width:200px; column-width:200px;}.test3{ border:10pxsolid#000; -moz-column-count:5; -webkit-column-count:5; column-count:5;}</style></head><body><h1>列数及列宽固定:</h1>

运行

提交问题





考

选


column-count版本：CSS3继承性：无

提交问题


语法：

column-count：<integer>|auto

默认值：auto

<integer>：

auto：

取值：

用整数值来定义列数。不允许负值

根据column-width自定分配宽度

说明：

设置或检索对象的列数

对应的脚本特性为columnCount。


兼容性：

支持版本\类型

版本 6.0-9.04.0-9.0 5.1 13.0-16.0 11.50

版本 10.0

写法：

内核类型写法

Webkit(Chrome/Safari) -webkit-column-count

Gecko(Firefox) -moz-column-count

Presto(Opera) column-count

Trident(IE) column-count

W3C column-count

示例：


<title>column-count_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>body{font:14px/1.5georgia,serif,sans-serif;}p{margin:0;padding:5px10px;background:#eee;}h1{margin:10px0;font-size:16px;}.test{ width:628px; border:10pxsolid#000; -moz-column-width:200px; -moz-column-count:3; -webkit-column-width:200px; -webkit-column-count:3; column-width:200px; column-count:3;}.test2{ border:10pxsolid#000; -moz-column-width:200px; -webkit-column-width:200px; column-width:200px;}.test3{ border:10pxsolid#000; -moz-column-count:5; -webkit-column-count:5; column-count:5;}</style></head><body><h1>列数及列宽固定:</h1>

运行

提交问题





考

选


column-gap版本：CSS3继承性：无

提交问题


语法：

column-gap：<length>|normal

默认值：normal

<length>：

normal：

取值：

用长度值来定义列与列之间的间隙。不允许负值

与font-size大小相同。假设该对象的font-size为16px，则

normal值为16px，类推。

说明：

设置或检索对象的列与列之间的间隙

对应的脚本特性为columnGap。


兼容性：

支持版本\类型

版本 6.0-9.04.0-9.0 5.1 13.0-16.0 11.50

版本 10.0

写法：

内核类型写法

Webkit(Chrome/Safari) -webkit-column-gap

Gecko(Firefox) -moz-column-gap

Presto(Opera) column-gap

Trident(IE) column-gap

W3C column-gap

示例：


<title>column-gap_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>body{font:14px/1.5georgia,serif,sans-serif;}p{margin:0;padding:5px10px;background:#eee;}h1{margin:10px0;font-size:16px;}.test{ border:10pxsolid#000; -moz-column-count:3; -moz-column-gap:normal; -webkit-column-count:3; -webkit-column-gap:normal; column-count:3; column-gap:normal;}.test2{ border:10pxsolid#000; -moz-column-count:3; -moz-column-gap:40px; -webkit-column-count:3; -webkit-column-gap:40px; column-count:3; column-gap:40px;}</style></head><body><h1>font-size为14px时，列间隙column-gap:normal的计算值也为14px</h1><divclass="test"> <p>Thismoduledescribesmulti-columnlayoutinCSS.Byusingfunctionalitydescribedinthisdocument,stylesheetscandeclarethatthecontentofanelementistobelaidoutinmultiplecolumns.</p> <p>OntheWeb,tableshavealsobeenusedtodescribemulti-columnlayouts.ThemainbenefitofusingCSS-based

运行

提交问题





考

选


column-rule版本：CSS3继承性：无

提交问题


语法：

column-rule：[column-rule-width]||[column-rule-style]||[column-

rule-color]


[column-rule-width]：

[column-rule-style]：

[column-rule-color]：

取值：

设置或检索对象的列与列之间的边框厚度。

设置或检索对象的列与列之间的边框样式。

设置或检索对象的列与列之间的边框颜色。

说明：

设置或检索对象的列与列之间的边框。复合属性。参阅border属性

对应的脚本特性为columnRule。


兼容性：

支持版本\类型

版本 6.0-9.04.0-9.0 5.1 13.0-16.0 11.50

版本 10.0

写法：

内核类型写法

Webkit(Chrome/Safari) -webkit-column-rule

Gecko(Firefox) -moz-column-rule

Presto(Opera) column-rule

Trident(IE) column-rule

W3C column-rule

示例：


<title>column-rule_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>body{font:14px/1.5georgia,serif,sans-serif;}p{margin:0;padding:5px10px;background:#eee;}h1{margin:10px0;font-size:16px;}.test{ border:10pxsolid#000; -moz-column-count:3; -moz-column-gap:20px; -moz-column-rule:10pxsolid#090; -webkit-column-count:3; -webkit-column-gap:20px; -webkit-column-rule:10pxsolid#090; column-count:3; column-gap:20px; column-rule:10pxsolid#090;}</style></head><body><h1>绿色边框即是column-rule所定义：</h1><divclass="test"> <p>Thismoduledescribesmulti-columnlayoutinCSS.Byusingfunctionalitydescribedinthisdocument,stylesheetscandeclarethatthecontentofanelementistobelaidoutinmultiplecolumns.</p> <p>OntheWeb,tableshavealsobeenusedtodescribemulti-columnlayouts.ThemainbenefitofusingCSS-basedcolumnsisflexibility;contentcanflowfromonecolumntoanother,andthenumberofcolumnscanvarydependingonthesizeoftheviewport.Removingpresentationtablemarkupfromdocumentsallowsthemtomoreeasilybepresentedonvariousoutputdevicesincludingspeechsynthesizersandsmallmobiledevices.</p></div></body></html>

运行

提交问题





考

选


column-rule-width版本：CSS3继承性：无

提交问题


语法：

column-rule-width：<length>|thin|medium|thick

默认值：medium

<length>：

medium：

thin：

thick：

取值：





说明：

设置或检索对象的列与列之间的边框厚度。参阅border-width属性

如果column-rule-style设置为none，本属性将失去作用。

对应的脚本特性为columnRuleWidth。


兼容性：

支持版本\类型

版本 6.0-9.04.0-9.0 5.1 13.0-16.0 11.50

版本 10.0

写法：

内核类型写法

Webkit(Chrome/Safari) -webkit-column-rule-width

Gecko(Firefox) -moz-column-rule-width

Presto(Opera) column-rule-width

Trident(IE) column-rule-width

W3C column-rule-width

示例：


<title>column-rule-width_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>body{font:14px/1.5georgia,serif,sans-serif;}p{margin:0;padding:5px10px;background:#eee;}h1{margin:10px0;font-size:16px;}div{ border:10pxsolid#000; -moz-column-count:3; -moz-column-gap:20px; -moz-column-rule-style:solid; -webkit-column-count:3; -webkit-column-gap:20px; -webkit-column-rule-style:solid; column-count:3; column-gap:20px; column-rule-style:solid;}.test{ -moz-column-rule-width:thin; -webkit-column-rule-width:thin; column-rule-width:thin;}.test2{ -moz-column-rule-width:medium; -webkit-column-rule-width:medium; column-rule-width:medium;}.test3{ -moz-column-rule-width:thick; -webkit-column-rule-width:thick; column-rule-width:thick;

运行

提交问题





考

选


column-rule-style版本：CSS3继承性：无

提交问题


none：

hidden：

dotted：

dashed：

solid：

double：

groove：

ridge：

inset：

outset：

取值：

无轮廓。column-rule-color与column-rule-width将被忽略

隐藏边框。

点状轮廓。

虚线轮廓。

实线轮廓

双线轮廓。两条单线与其间隔的和等于指定的column-rule-

width值

3D凹槽轮廓。

3D凸槽轮廓。

3D凹边轮廓。

3D凸边轮廓。

说明：

设置或检索对象的列与列之间的边框样式。参阅border-style属性

如果column-rule-width等于0，本属性将失去作用。

对应的脚本特性为columnRuleStyle。


兼容性：

支持版本\类型

版本 6.0-9.04.0-9.0 5.1 13.0-16.0 11.50

版本 10.0

写法：

内核类型写法

Webkit(Chrome/Safari) -webkit-column-rule-style

Gecko(Firefox) -moz-column-rule-style

Presto(Opera) column-rule-style

Trident(IE) column-rule-style

W3C column-rule-style

示例：


<title>column-rule-style_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>body{font:14px/1.5georgia,serif,sans-serif;}p{margin:0;padding:5px10px;background:#eee;}h1{margin:10px0;font-size:16px;}div{ width:600px; border:10pxsolid#000; -moz-column-count:3; -moz-column-gap:20px; -moz-column-rule-width:3px; -webkit-column-count:3; -webkit-column-gap:20px; -webkit-column-rule-width:3px; column-count:3; column-gap:20px; column-rule-width:3px;}.test{ -moz-column-rule-style:none; -webkit-column-rule-style:none; column-rule-style:none;}.test2{ -moz-column-rule-style:hidden; -webkit-column-rule-style:hidden; column-rule-style:hidden;}.test3{ -moz-column-rule-style:dotted; -webkit-column-rule-style:dotted;

运行

提交问题





考

选


column-rule-color版本：CSS3继承性：无

提交问题


语法：

column-rule-color：<color>


<color>：

取值：

指定颜色。

说明：

设置或检索对象的列与列之间的边框颜色。参阅border-color属性

如果column-rule-width等于0或column-rule-style设置为none，本属性将

被忽略。

对应的脚本特性为columnRuleWidth。


兼容性：

支持版本\类型

版本 6.0-9.04.0-9.0 5.1 13.0-16.0 11.50

版本 10.0

写法：

内核类型写法

Webkit(Chrome/Safari) -webkit-column-rule-color

Gecko(Firefox) -moz-column-rule-color

Presto(Opera) column-rule-color

Trident(IE) column-rule-color

W3C column-rule-color

示例：


<title>column-rule-color_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>body{font:14px/1.5georgia,serif,sans-serif;}p{margin:0;padding:5px10px;background:#eee;}h1{margin:10px0;font-size:16px;}div{ width:600px; border:10pxsolid#000; -moz-column-count:3; -moz-column-gap:20px; -moz-column-rule-width:3px; -moz-column-rule-style:solid; -webkit-column-count:3; -webkit-column-gap:20px; -webkit-column-rule-width:3px; -webkit-column-rule-style:solid; column-count:3; column-gap:20px; column-rule-width:3px; column-rule-style:solid;}.test{ -moz-column-rule-color:#f00; -webkit-column-rule-color:#f00; column-rule-color:#f00;}.test2{ -moz-column-rule-color:#090; -webkit-column-rule-color:#090; column-rule-color:#090;}

运行

提交问题





考

选


column-span版本：CSS3继承性：无

提交问题


语法：

column-span：none|all

默认值：none

none：

all：

取值：

不跨列

横跨所有列

说明：

设置或检索对象元素是否横跨所有列。

对应的脚本特性为columnSpan。


兼容性：

支持版本\类型

版本 6.0-9.04.0-9.0 5.1 13.0-16.0 11.50

版本 10.0

写法：

内核类型写法

Webkit(Chrome/Safari) -webkit-column-span

Gecko(Firefox)

Presto(Opera) column-span

Trident(IE) column-span

W3C column-span

示例：


<title>column-span_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>body{font:14px/1.5georgia,serif,sans-serif;}p{margin:0;padding:5px10px;background:#eee;}h1{margin:10px0;font-size:16px;}.test{ width:600px; border:10pxsolid#000; -moz-column-count:3; -moz-column-gap:20px; -moz-column-rule:3pxsolid#090; -webkit-column-count:3; -webkit-column-gap:20px; -webkit-column-rule:3pxsolid#090; column-count:3; column-gap:20px; column-rule:3pxsolid#090;}.testp{ -moz-column-span:all; -webkit-column-span:all; column-span:all;}</style></head><body><h1>column-span:all</h1><divclass="test"> Thismoduledescribesmulti-columnlayoutinCSS.Byusingfunctionalitydescribedinthisdocument,stylesheetscandeclarethatthecontentofanelementistobelaidoutinmultiplecolumns. <p>spanningelement</p>

运行

提交问题





考

选


column-fill版本：CSS3继承性：无

提交问题


语法：

column-fill：auto|balance

默认值：auto

auto：

balance：

取值：

列高度自适应内容

所有列的高度以其中最高的一列统一

说明：

设置或检索对象所有列的高度是否统一。

对应的脚本特性为columnFill。


兼容性：

支持版本\类型

版本 6.0-9.04.0-9.0 5.1 13.0-11.60 11.50-11.60

版本 10.0

写法：

内核类型写法

Webkit(Chrome/Safari)

Gecko(Firefox)

Presto(Opera)

Trident(IE) column-fill

W3C column-fill

示例：


<title>column-fill_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>body{font:14px/1.5georgia,serif,sans-serif;}p{margin:0;padding:5px10px;background:#eee;}h1{margin:10px0;font-size:16px;}.test{ width:600px; border:10pxsolid#000; -moz-column-count:2; -moz-column-gap:20px; -moz-column-rule:3pxsolid#090; -moz-column-fill:balance; -webkit-column-count:2; -webkit-column-gap:20px; -webkit-column-rule:3pxsolid#090; -webkit-column-fill:balance; column-count:2; column-gap:20px; column-rule:3pxsolid#090; column-fill:balance;}</style></head><body><h1>column-fill:balance</h1><divclass="test"> <p>Thismoduledescribesmulti-columnlayoutinCSS.Byusingfunctionalitydescribedinthisdocument,stylesheetscandeclarethatthecontentofanelementistobelaidoutinmultiplecolumns.</p></div></body></html>

运行

提交问题





考

选


column-break-before版本：CSS3继承性：无

提交问题


auto：

always：

avoid：

取值：

既不强迫也不禁止在元素之前断行并产生新列

总是在元素之前断行并产生新列

避免在元素之前断行并产生新列

说明：

设置或检索对象之前是否断行。

对应的脚本特性为columnBreakBefore。


兼容性：

支持版本\类型

版本 6.0-9.04.0-9.0 5.1 13.0-16.0 11.50-11.60

版本 10.0

写法：

内核类型写法

Webkit(Chrome/Safari) -webkit-column-break-before

Gecko(Firefox)

Presto(Opera)

Trident(IE) column-break-before

W3C column-break-before

示例：


<title>column-break-before_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>body{font:14px/1.5georgia,serif,sans-serif;}.testp,.testdiv{margin:0;padding:5px10px;background:#eee;}h1{margin:10px0;font-size:16px;}.test{ width:600px; border:10pxsolid#000; -moz-column-count:4; -moz-column-gap:20px; -moz-column-rule:3pxsolid#090; -webkit-column-count:4; -webkit-column-gap:20px; -webkit-column-rule:3pxsolid#090; column-count:4; column-gap:20px; column-rule:3pxsolid#090;}.testdiv{ -moz-column-break-before:always; -webkit-column-break-before:always; column-break-before:always;}</style></head><body><h1>column-break-before:always</h1><divclass="test"> <p>Thismoduledescribesmulti-columnlayoutinCSS.Byusingfunctionalitydescribedinthisdocument,stylesheetscandeclarethatthecontentofanelementistobelaidoutinmultiplecolumns.</p> <div>不管上一列有没有填满，我都另起一列</div>

运行

提交问题





考

选


column-break-after版本：CSS3继承性：无

提交问题


auto：

always：

avoid：

取值：

既不强迫也不禁止在元素之后断行并产生新列

总是在元素之后断行并产生新列

避免在元素之后断行并产生新列

说明：

设置或检索对象之后是否断行。

对应的脚本特性为columnBreakAfter。


兼容性：

支持版本\类型

版本 6.0-9.04.0-9.0 5.1 13.0-16.0 11.50-11.60

版本 10.0

写法：

内核类型写法

Webkit(Chrome/Safari) -webkit-column-break-after

Gecko(Firefox)

Presto(Opera)

Trident(IE) column-break-after

W3C column-break-after

示例：


<title>column-break-after_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>body{font:14px/1.5georgia,serif,sans-serif;}.testp,.testdiv{margin:0;padding:5px10px;background:#eee;}h1{margin:10px0;font-size:16px;}.test{ width:600px; border:10pxsolid#000; -moz-column-count:4; -moz-column-gap:20px; -moz-column-rule:3pxsolid#090; -webkit-column-count:4; -webkit-column-gap:20px; -webkit-column-rule:3pxsolid#090; column-count:4; column-gap:20px; column-rule:3pxsolid#090;}.testdiv{ -moz-column-break-after:always; -webkit-column-break-after:always; column-break-after:always;}</style></head><body><h1>column-break-after:always</h1><divclass="test"> <p>Thismoduledescribesmulti-columnlayoutinCSS.Byusingfunctionalitydescribedinthisdocument,stylesheetscandeclarethatthecontentofanelementistobelaidoutinmultiplecolumns.</p> <div>不管本列有没有填满，后面新建一列</div>

运行

提交问题





考

选


column-break-inside

column-break-insidecolumn-break-inside

版本：CSS3

版本：版本：CSS3CSS3

继承性：无

继承性：无继承性：无

提交问题


语法：

column-break-inside：auto|avoid|avoid-page|avoid-column

默认值：auto

auto：

avoid：

取值：

既不强迫也不禁止在元素内部断行并产生新列

避免在元素内部断行并产生新列

说明：

设置或检索对象内部是否断行。

对应的脚本特性为columnBreakInside。

浅绿

=支持红色

=不支持墨绿

=部分支持橙色

=实验性质

兼容性：

支持版本\类型

IE Firefox Safari Chrome Opera

版本 6.0-9.04.0-9.0 5.1 13.0-16.0

11.50-11.60版本 10.0

写法：

内核类型写法

Webkit(Chrome/Safari) -webkit-column-break-inside

Gecko(Firefox)

Presto(Opera)

Trident(IE) column-break-inside

W3C column-break-inside

提交问题




CSS参考手册»属性列表»2D变换属性» 其它2D变换属

性

选


transform版本：CSS3继承性：无

提交问题


语法：

transform：none|matrix(<number>,<number>,<number>,<number>,

<number>,<number>)?translate(<length>[,<length>])?

translateX(<length>)?translateY(<length>)?rotate(<angle>)?

scale(<number>[,<number>])?scaleX(<number>)?scaleY(<number>)?

skew(<angle>[,<angle>])?skewX(<angle>)||skewY(<angle>)?

默认值：none

none：

matrix(<number>,<number>,<number>,<number>,<number>,

<number>)：

translate(<length>[,<length>])：

translateX(<length>)：

translateY(<length>)：

rotate(<angle>)：

scale(<number>[,<number>])：

scaleX(<number>)：

scaleY(<number>)：

skew(<angle>[,<angle>])：

skewX(<angle>)：

skewY(<angle>)：

取值：

无转换

以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于

直接应用一个[a,b,c,d,e,f]变换矩阵

指定对象的2Dtranslation（2D平

移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未

提供，则默认值为0

指定对象X轴（水平方向）的平移

指定对象Y轴（垂直方向）的平移

指定对象的2Drotation（2D旋转），需先有

transform-origin属性的定义

指定对象的2Dscale（2D缩放）。第

一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则

默认取第一个参数的值

指定对象X轴的（水平方向）缩放

指定对象Y轴的（垂直方向）缩放

指定对象skewtransformation（斜切扭

曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未


指定对象X轴的（水平方向）扭曲

指定对象Y轴的（垂直方向）扭曲

说明：

设置或检索对象的转换。

对应的脚本特性为transform。


兼容性：

支持版本\类型

版本 6.0-8.04.0-9.0 5.1 13.0-16.0 11.50-11.60

版本 9.0-10.0

写法：

内核类型写法

Webkit(Chrome/Safari) -webkit-transform

Gecko(Firefox) -moz-transform

Presto(Opera) -o-transform

Trident(IE) -ms-transform

W3C transform

示例：


<title>2Dtransform_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>h1{clear:both;padding-top:10px;font-size:16px;font-family:Arial;}.test{zoom:1;width:700px;margin:0;padding:0;list-style:none;}.testli{float:left;margin:20px30px00;border:1pxsolid#000;}.testlip{width:300px;height:100px;margin:0;background:#ddd;}.test.matrix{-moz-transform:matrix(0,1,1,1,10px,10px);-webkit-transform:matrix(0,1,1,1,10,10);-o-transform:matrix(0,1,1,1,10,10);-ms-transform:matrix(0,1,1,1,10,10);transform:matrix(0,1,1,1,10,10);}.test.translatep{-moz-transform:translate(5%,10px);-webkit-transform:translate(10px,10px);-o-transform:translate(10px,10px);-ms-transform:translate(10px,10px);transform:translate(10px,10px);}.test.translate2p{-moz-transform:translate(-10px,-10px);-webkit-transform:translate(-10px,-10px);-o-transform:translate(-10px,-10px);-ms-transform:translate(-10px,-10px);transform:translate(-10px,-10px);}.test.translateXp{-moz-transform:translateX(20px);-webkit-transform:translateX(20px);-o-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px);}.test.translate3p{-moz-transform:translate(20px);-webkit-transform:translate(20px);-o-transform:translate(20px);-ms-transform:translate(20px);transform:translate(20px);}.test.translateYp{-moz-transform:translateY(10px);-webkit-transform:translateY(10px);-o-transform:translateY(10px);-ms-transform:translateY(10px);transform:translateY(10px);}.test.translate4p{-moz-transform:translate(0,10px);-webkit-transform:translate(0,10px);-o-transform:translate(0,10px);-ms-transform:translate(0,10px);transform:translate(0,10px);}.test.rotate{-moz-transform:rotate(-5deg);-webkit-transform:rotate(-5deg);-o-transform:rotate(-5deg);-ms-transform:rotate(-5deg);transform:rotate(-5deg);}.test.rotate2{-moz-transform:rotate(5deg);-webkit-transform:rotate(5deg);-o-transform:rotate(5deg);-ms-transform:rotate(5deg);transform:rotate(5deg);}.test.scale{-moz-transform:scale(.8);-webkit-transform:scale(.8);-o-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8);}.test.scale2{-moz-transform:scale(1.2);-webkit-transform:scale(1.2);-o-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2);}.test.skew{-moz-transform:skew(-5deg);-webkit-transform:skew(-5deg);-o-transform:skew(-5deg);-ms-transform:skew(-5deg);transform:skew(-5deg);}.test.skew2{-moz-transform:skew(-5deg,-5deg);-webkit-transform:skew(-5deg,-5deg);-o-transform:skew(-5deg,-5deg);-

运行

提交问题





性

选


transform-origin版本：CSS3继承性：无

提交问题


<percentage>：

<length>：

left：

center①：right：

top：

center②：bottom：

取值：

用百分比指定坐标值。可以为负值。

用长度值指定坐标值。可以为负值。

指定原点的横坐标为left

指定原点的横坐标为center

指定原点的横坐标为right

指定原点的纵坐标为top

指定原点的纵坐标为center

指定原点的纵坐标为bottom

说明：

设置或检索对象以某个原点进行转换。




对应的脚本特性为transformOrigin。


兼容性：

支持版本\类型

版本 6.0-8.04.0-9.0 5.1 13.0-16.0 11.50-11.60

版本 9.0-10.0

写法：

内核类型写法

Webkit(Chrome/Safari) -webkit-transform-origin

Gecko(Firefox) -moz-transform-origin

Presto(Opera) -o-transform-origin

Trident(IE) -ms-transform-origin

W3C transform-origin

示例：


<title>transform-origin_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{margin:0;padding:0;list-style:none;border:1pxsolid#000;}.testli{width:50px;height:50px;border:1pxsolid#000;background:#ddd; -moz-transform-origin:00;-moz-transform:rotate(45deg); -webkit-transform-origin:00;-webkit-transform:rotate(45deg); -o-transform-origin:00;-o-transform:rotate(45deg); -ms-transform-origin:00;-ms-transform:rotate(45deg); transform-origin:00;transform:rotate(45deg);}</style></head><body><ulclass="test"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li></ul></body></html>

运行

提交问题




CSS参考手册»属性列表»过渡属性» 其它过渡属性参

考

选


transition版本：CSS3继承性：无

提交问题


语法：

transition：[transition-property]||[transition-duration]||[transition-

timing-function]||[transition-delay]


[transition-property]：

[transition-duration]：

[transition-timing-function]：

[transition-delay]：

取值：

检索或设置对象中的参与过渡的属性

检索或设置对象过渡的持续时间

检索或设置对象中过渡的动画类型

检索或设置对象延迟过渡的时间

说明：

复合属性。检索或设置对象变换时的过渡。

可以为同一元素的多个属性定义过渡效果。示例：

缩写方式：

transition:border-color.5sease-in.1s,background-color.5sease-in.1s,color.5sease-in.1s;

拆分方式：

transition-property:border-color,background-color,color;

transition-duration:.5s,.5s,.5s;

transition-timing-function:ease-in,ease-in,ease-in;

transition-delay:.1s,.1s,.1s;

如果定义了多个过渡的属性，而其他属性只有一个参数值，则表明所

有需要过渡的属性都应用同一个参数值。据此可以对上面的例子进行

缩写：

拆分方式：

transition-property:border-color,background-color,color;

transition-duration:.5s;

transition-timing-function:ease-in;

transition-delay:.1s;

如果需要定义多个过渡属性且不想指定具体是哪些属性过渡，同时其

他属性只有一个参数值，据此可以对上面的例子进行缩写：

缩写方式：

transition:all.5sease-in.1s;

拆分方式：

transition-property:all;

transition-duration:.5s;

transition-timing-function:ease-in;

transition-delay:.1s;

对应的脚本特性为transition。


兼容性：

支持版本\类型

版本 6.0-9.04.0-9.0 5.1 13.0-16.0 11.50-11.60

版本 10.0

写法：

内核类型写法

Webkit(Chrome/Safari) -webkit-transition

Gecko(Firefox) -moz-transition

Presto(Opera) -o-transition

Trident(IE) -ms-transition

W3C transition

示例：


<title>transition_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>h1{font-size:16px;}.test{overflow:hidden;width:100%;margin:0;padding:0;list-style:none;}.testli{float:left;width:100px;height:100px;margin:05px;border:1pxsolid#ddd;background-color:#eee;text-align:center;-moz-transition:background-color.5sease-in;-webkit-transition:background-color.5sease-in;-o-transition:background-color.5sease-in;-ms-transition:background-color.5sease-in;transition:background-color.5sease-in;}.testli:nth-child(1):hover{background-color:#bbb;}.testli:nth-child(2):hover{background-color:#999;}.testli:nth-child(3):hover{background-color:#630;}.testli:nth-child(4):hover{background-color:#090;}.testli:nth-child(5):hover{background-color:#f00;}</style></head><body><h1>请将鼠标移动到下面的矩形上：</h1><ulclass="test"> <li>背景色过渡</li> <li>背景色过渡</li> <li>背景色过渡</li> <li>背景色过渡</li> <li>背景色过渡</li></ul></body></html>

运行

提交问题





考

选


transition-property版本：CSS3继承性：无

提交问题


语法：

transition-property：all|none|<property>[,<property>]*

默认值：all

all：

none：

<property>：

取值：

所有可以进行过渡的css属性

不指定过渡的css属性

指定要进行过渡的css属性

说明：

检索或设置对象中的参与过渡的属性。

默认值为：all。默认为所有可以进行过渡的css属性。

如果提供多个属性值，以逗号进行分隔。

对应的脚本特性为transitionProperty。


兼容性：

支持版本\类型

版本 6.0-9.04.0-9.0 5.1 13.0-16.0 11.50-11.60

版本 10.0

写法：

内核类型写法

Webkit(Chrome/Safari) -webkit-transition-property

Gecko(Firefox) -moz-transition-property

Presto(Opera) -o-transition-property

Trident(IE) -ms-transition-property

W3C transition-property

示例：


<title>transition-property_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>h1{font-size:16px;}.test{overflow:hidden;width:100%;margin:0;padding:0;list-style:none;}.testli{float:left;width:170px;height:100px;margin:05px;padding:10px;border:1pxsolid#ddd;background-color:#eee;color:#000; -moz-transition-property:border-color,background-color,color; -moz-transition-duration:.5s; -moz-transition-timing-function:ease-in; -webkit-transition-property:border-color,background-color,color; -webkit-transition-duration:.5s; -webkit-transition-timing-function:ease-in; -o-transition-property:border-color,background-color,color; -o-transition-duration:.5s; -o-transition-timing-function:ease-in; -ms-transition-property:border-color,background-color,color; -ms-transition-duration:.5s; -ms-transition-timing-function:ease-in; transition-property:border-color,background-color,color; transition-duration:.5s; transition-timing-function:ease-in;}.testli:hover{border-color:#999;background-color:#bbb;color:#999;}</style></head><body><h1>请将鼠标移动到下面的矩形上：</h1><ulclass="test"> <li>本次设置过渡的属性：border-color,background-color,color</li></ul></body>

运行

有过渡效果的属性：

属性名称类型

background-color color

background-image onlygradients

background-position percentage,length

border-bottom-color color

border-bottom-width length

border-color color

border-left-color color

border-left-width length

border-right-color color

border-right-width length

border-spacing length

border-top-color color

border-top-width length

border-width length

bottom length,percentage

color color

crop rectangle

font-size length,percentage

font-weight number

grid-* various

height length,percentage

left length,percentage

letter-spacing length

line-height number,length,percentage

margin-bottom length

margin-left length

margin-right length

margin-top length

max-height length,percentage

max-width length,percentage

min-height length,percentage

min-width length,percentage

opacity number

outline-color color

outline-offset integer

outline-width length

padding-bottom length

padding-left length

padding-right length

padding-top length

right length,percentage

text-indent length,percentage

text-shadow shadow

top length,percentage

vertical-align keywords,length,percentage

visibility visibility

width length,percentage

word-spacing length,percentage

z-index integer

zoom number

提交问题





考

选


transition-duration版本：CSS3继承性：无

提交问题


语法：

transition-duration：<time>[,<time>]*

默认值：0

<time>：

取值：

指定对象过渡的持续时间

说明：

检索或设置对象过渡的持续时间。


对应的脚本特性为transitionDuration。


兼容性：

支持版本\类型

版本 6.0-9.04.0-9.0 5.1 13.0-16.0 11.50-11.60

版本 10.0

写法：

内核类型写法

Webkit(Chrome/Safari) -webkit-transition-duration

Gecko(Firefox) -moz-transition-duration

Presto(Opera) -o-transition-duration

Trident(IE) -ms-transition-duration

W3C transition-duration

示例：


<title>transition-duration_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>h1{font-size:16px;}.test{position:absolute;left:8px;width:200px;height:100px;margin:05px;padding:10px;border:1pxsolid#ddd;background-color:#eee;color:#000; -moz-transition-property:left; -moz-transition-duration:.5s; -moz-transition-timing-function:ease-in; -webkit-transition-property:left; -webkit-transition-duration:.5s; -webkit-transition-timing-function:ease-in; -o-transition-property:left; -o-transition-duration:.5s; -o-transition-timing-function:ease-in; -ms-transition-property:left; -ms-transition-duration:.5s; -ms-transition-timing-function:ease-in; transition-property:left; transition-duration:.5s; transition-timing-function:ease-in;}.test:hover{left:100px;}</style></head><body><h1>请将鼠标移动到下面的矩形上：</h1><divclass="test">矩形在0.5s内慢慢向右移动<br>transition-duration:.5s;</div></body></html>

运行

提交问题





考

选


transition-timing-function版本：CSS3继承性：无

提交问题


linear：

ease：

ease-in：

ease-out：

ease-in-out：

cubic-bezier(<number>,<number>,<number>,<number>)：

取值：

线性过渡。等同于贝塞尔曲线(0.0,0.0,1.0,1.0)

平滑过渡。等同于贝塞尔曲线(0.25,0.1,0.25,1.0)

由慢到快。等同于贝塞尔曲线(0.42,0,1.0,1.0)

由快到慢。等同于贝塞尔曲线(0,0,0.58,1.0)

由慢到快再到慢。等同于贝塞尔曲线(0.42,0,0.58,1.0)

特定的贝

塞尔曲线类型，4个数值需在[0,1]区间内

说明：

检索或设置对象中过渡的动画类型。


对应的脚本特性为transitionTimingFunction。


兼容性：

支持版本\类型

版本 6.0-9.04.0-9.0 5.1 13.0-16.0 11.50-11.60

版本 10.0

写法：

内核类型写法

Webkit(Chrome/Safari) -webkit-transition-timing-function

Gecko(Firefox) -moz-transition-timing-function

Presto(Opera) -o-transition-timing-function

Trident(IE) -ms-transition-timing-function

W3C transition-timing-function

示例：


<title>transition-timing-function_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>h1{font-size:16px;}.test{overflow:hidden;width:100%;margin:0;padding:0;list-style:none;}.testli{position:relative;left:8px;width:220px;height:100px;margin:1px5px;padding:10px;border:1pxsolid#ddd;background-color:#eee;color:#000; -moz-transition-property:left; -moz-transition-duration:.5s; -webkit-transition-property:left; -webkit-transition-duration:.5s; -o-transition-property:left; -o-transition-duration:.5s; -ms-transition-property:left; -ms-transition-duration:.5s; transition-property:left; transition-duration:.5s;}.testli:nth-child(1){-moz-transition-timing-function:linear;-webkit-transition-timing-function:linear;-o-transition-timing-function:linear;-ms-transition-timing-function:linear;transition-timing-function:linear;}.testli:nth-child(2){-moz-transition-timing-function:ease;-webkit-transition-timing-function:ease;-o-transition-timing-function:ease;-ms-transition-timing-function:ease;transition-timing-function:ease;}.testli:nth-child(3){-moz-transition-timing-function:ease-in;-webkit-transition-timing-function:ease-in;-o-transition-timing-function:ease-in;-ms-transition-timing-function:ease-in;transition-timing-function:ease-in;}.testli:nth-child(4){-moz-transition-timing-function:ease-out;-webkit-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;-ms-transition-timing-function:ease-out;transition-timing-function:ease-out;}.testli:nth-child(5){-moz-transition-timing-function:ease-in-out;-webkit-transition-timing-function:ease-in-out;-o-transition-timing-function:ease-in-out;-ms-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;}.testli:hover{left:100px;}</style></head><body>

运行

提交问题





考

选


transition-delay版本：CSS3继承性：无

提交问题


语法：

transition-delay：<time>[,<time>]*

默认值：0

<time>：

取值：

指定对象过渡的延迟时间

说明：

检索或设置对象延迟过渡的时间。


对应的脚本特性为transitionDelay。


兼容性：

支持版本\类型

版本 6.0-9.04.0-9.0 5.1 13.0-16.0 11.50-11.60

版本 10.0

写法：

内核类型写法

Webkit(Chrome/Safari) -webkit-transition-delay

Gecko(Firefox) -moz-transition-delay

Presto(Opera) -o-transition-delay

Trident(IE) -ms-transition-delay

W3C transition-delay

示例：


<title>transition-delay_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>h1{font-size:16px;}.test{overflow:hidden;width:100%;margin:0;padding:0;list-style:none;}.testli{width:220px;height:100px;margin:1px5px;padding:10px;border:1pxsolid#ddd;background-color:#eee;color:#000; -moz-transition-property:all; -moz-transition-duration:.5s; -moz-transition-timing-function:ease; -webkit-transition-property:all; -webkit-transition-duration:.5s; -webkit-transition-timing-function:ease; -o-transition-property:all; -o-transition-duration:.5s; -o-transition-timing-function:ease; -ms-transition-property:all; -ms-transition-duration:.5s; -ms-transition-timing-function:ease; transition-property:all; transition-duration:.5s; transition-timing-function:ease;}.testli:nth-child(1){-moz-transition-delay:.1s;-webkit-transition-delay:.1s;-o-transition-delay:.1s;-ms-transition-delay:.1s;transition-delay:.1s;}.testli:nth-child(2){-moz-transition-delay:.3s;-webkit-transition-delay:.3s;-o-transition-delay:.3s;-ms-transition-delay:.3s;transition-delay:.3s;}.testli:nth-child(3){-moz-transition-delay:.5s;-webkit-transition-delay:.5s;-o-transition-delay:.5s;-ms-transition-delay:.5s;transition-delay:.5s;}.testli:nth-child(4){-moz-transition-delay:.7s;-webkit-transition-delay:.7s;-o-transition-delay:.4s;-ms-transition-delay:.4s;transition-delay:.7s;}.testli:nth-child(5){-moz-transition-delay:.9s;-webkit-transition-delay:.9s;-o-transition-delay:.9s;-ms-transition-delay:.9s;transition-delay:.9s;}

运行

提交问题




CSS参考手册»属性列表»动画属性» 其它动画属性参

考

选


animation版本：CSS3继承性：无

提交问题


语法：

animation：[[animation-name]||[animation-duration]||[animation-

timing-function]||[animation-delay]||[animation-iteration-count]||[

animation-direction]][,[animation-name]||[animation-duration]||[

animation-timing-function]||[animation-delay]||[animation-iteration-

count]||[animation-direction]]*


相关属性：[animation-play-state]

[animation-name]：

[animation-duration]：

[animation-timing-function]：

[animation-delay]：

[animation-iteration-count]：

[animation-direction]：

[animation-play-state]：

取值：

检索或设置对象所应用的动画名称

检索或设置对象动画的持续时间

检索或设置对象动画的过渡类型

检索或设置对象动画延迟的时间

检索或设置对象动画的循环次数

检索或设置对象动画在循环中是否反向运动

检索或设置对象动画的状态。w3c正考虑是

否将该属性移除，因为动画的状态可以通过其它的方式实现，比如重

设样式

说明：

复合属性。检索或设置对象所应用的动画特效。

如果提供多组属性值，以逗号进行分隔。

对应的脚本特性为animation。


兼容性：

支持版本\类型

版本 6.0-9.0 4.05.1 13.0-16.0 11.50-11.60

版本 10.0 5.0-9.0

写法：

内核类型写法

Webkit(Chrome/Safari) -webkit-animation

Gecko(Firefox) -moz-animation

Presto(Opera)

Trident(IE) -ms-animation

W3C animation

示例：


<title>animation_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>div{position:absolute;top:50%;left:50%;overflow:hidden;width:300px;height:150px;margin:-75px00-150px;border:3pxsolid#eee;background:#e0e0e0;}span{opacity:0;display:block;height:50px;font:bold14px/50pxGeorgia;}.a1{ -webkit-transform:translate(60px); -webkit-animation:animations2sease-out; -moz-transform:translate(55px); -moz-animation:animations2sease-out; -o-transform:translate(55px); -o-animation:animations2sease-out; -ms-transform:translate(55px); -ms-animation:animations2sease-out; transform:translate(55px); animation:animations2sease-out;}@-webkit-keyframesanimations{ 0%{-webkit-transform:translate(0);opacity:0;} 50%{-webkit-transform:translate(30px);opacity:1;} 70%{-webkit-transform:translate(35px);opacity:1;} 100%{-webkit-transform:translate(60px);opacity:0;}}@-moz-keyframesanimations{ 0%{-moz-transform:translate(0);opacity:0;} 50%{-moz-transform:translate(30px);opacity:1;} 70%{-moz-transform:translate(35px);opacity:1;} 100%{-moz-transform:translate(60px);opacity:0;}}@-o-keyframesanimations{ 0%{-o-transform:translate(0);opacity:0;}

运行

提交问题





考

选


animation-name版本：CSS3继承性：无

提交问题


语法：

animation-name：none|<identifier>[,none|<identifier>]*

默认值：none

相关属性：[@keyframes]

none：

<identifier>：

取值：

不引用任何动画名称

定义一个或多个动画名称(identifier标识)

说明：

检索或设置对象所应用的动画名称，必须与规则@keyframes配合使

用，因为动画名称由@keyframes定义


对应的脚本特性为animationName。


兼容性：

支持版本\类型

版本 6.0-9.0 4.05.1 13.0-16.0 11.50-11.60

版本 10.0 5.0-9.0

写法：

内核类型写法

Webkit(Chrome/Safari) -webkit-animation-name

Gecko(Firefox) -moz-animation-name

Presto(Opera)

Trident(IE) -ms-animation-name

W3C animation-name

示例：


<title>animation-name_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>div{opacity:0;position:absolute;top:50%;left:50%;width:300px;height:150px;margin:-75px00-150px;}.over{border:3pxsolid#eee;background:#e0e0e0;}.text{font:bold14px/150pxGeorgia;text-align:center;}.over{ -webkit-animation:animations2.5sease-out,animations31sease-out2.5s; -moz-animation:animations2.5sease-out,animations31sease-out2.5s; -o-animation:animations2.5sease-out,animations31sease-out2.5s; -ms-animation:animations2.5sease-out,animations31sease-out2.5s; animation:animations2.5sease-out,animations31sease-out2.5s;}@-webkit-keyframesanimations{ 0%{-webkit-transform:scale(0);opacity:0;} 40%{-webkit-transform:scale(1);opacity:1;} 100%{opacity:1;}}@-moz-keyframesanimations{ 0%{-moz-transform:scale(0);opacity:0;} 40%{-moz-transform:scale(1);opacity:1;} 100%{opacity:1;}}@-o-keyframesanimations{ 0%{-o-transform:scale(0);opacity:0;} 40%{-o-transform:scale(1);opacity:1;} 100%{opacity:1;}}@-ms-keyframesanimations{ 0%{-ms-transform:scale(0);opacity:0;} 40%{-ms-transform:scale(1);opacity:1;} 100%{opacity:1;}

运行

提交问题





考

选


animation-duration版本：CSS3继承性：无

提交问题


语法：

animation-duration：<time>[,<time>]*

默认值：0

<time>：

取值：

指定对象动画的持续时间

说明：

检索或设置对象动画的持续时间


对应的脚本特性为animationDuration。


兼容性：

支持版本\类型

版本 6.0-9.0 4.05.1 13.0-16.0 11.50-11.60

版本 10.0 5.0-9.0

写法：

内核类型写法

Webkit(Chrome/Safari) -webkit-animation-duration

Gecko(Firefox) -moz-animation-duration

Presto(Opera)

Trident(IE) -ms-animation-duration

W3C animation-duration

示例：


<title>animation-duration_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>html{height:100%; background:-moz-linear-gradient(top,#fff,#000); background:-webkit-linear-gradient(top,#fff,#000); background:-o-linear-gradient(top,#fff,#000); background:-ms-linear-gradient(top,#fff,#000); background:linear-gradient(top,#fff,#000);}h1{font-size:16px;}div{position:absolute;top:50%;left:50%;width:500px;height:80px;margin:-40px00-250px;color:#fff;font:bold50px/1.5Georgia,arial,simsun,serif;text-shadow:1px1px0rgba(0,0,0,.8),2px2px3pxrgba(255,255,255,.3); -moz-animation:animations2sease-in-out; -webkit-animation:animations2sease-in-out; -o-animation:animations2sease-in-out; -ms-animation:animations2sease-in-out; animation:animations2sease-in-out;}@-moz-keyframesanimations{ 0%{-moz-transform:translate(0,-150px);} 30%{-moz-transform:translate(0,-150px);} 40%{-moz-transform:translate(0,0);} 42%{-moz-transform:scale(1.1,.6)skew(5deg,5deg);} 48%{-moz-transform:scale(1)skew(0,0);} 54%{-moz-transform:scale(1.05,.8)skew(4deg,4deg);} 60%{-moz-transform:scale(1)skew(0,0);} 64%{-moz-transform:skew(3deg,3deg);} 68%{-moz-transform:skew(0,0);} 75%{-moz-transform:skew(2deg,2deg);} 83%{-moz-transform:skew(0,0);} 92%{-moz-transform:skew(1deg,1deg);}

运行

提交问题





考

选


animation-timing-function版本：CSS3继承性：无

提交问题


linear：

ease：

ease-in：

ease-out：

ease-in-out：

cubic-bezier(<number>,<number>,<number>,<number>)：

取值：

线性过渡。等同于贝塞尔曲线(0.0,0.0,1.0,1.0)

平滑过渡。等同于贝塞尔曲线(0.25,0.1,0.25,1.0)

由慢到快。等同于贝塞尔曲线(0.42,0,1.0,1.0)

由快到慢。等同于贝塞尔曲线(0,0,0.58,1.0)

由慢到快再到慢。等同于贝塞尔曲线(0.42,0,0.58,1.0)

特定的贝

塞尔曲线类型，4个数值需在[0,1]区间内

说明：

检索或设置对象动画的过渡类型


对应的脚本特性为animationTimingFunction。


兼容性：

支持版本\类型

版本 6.0-9.0 4.05.1 13.0-16.0 11.50-11.60

版本 10.0 5.0-9.0

写法：

内核类型写法

Webkit(Chrome/Safari) -webkit-animation-timing-function

Gecko(Firefox) -moz-animation-timing-function

Presto(Opera)

Trident(IE) -ms-animation-timing-function

W3C animation-timing-function

示例：


<title>animation-timing-function_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>h1{font-size:16px;}div{width:60px;height:60px;margin:200px0050px;padding:10px;border-radius:41px;box-shadow:0010pxrgba(204,102,0,.8);background:#F6D66E;background:-moz-linear-gradient(top,#fff,#F6D66E);background:-webkit-linear-gradient(top,#fff,#F6D66E);background:-o-linear-gradient(top,#fff,#F6D66E);background:-ms-linear-gradient(top,#fff,#F6D66E);background:linear-gradient(top,#fff,#F6D66E); -moz-animation:animations4slinearinfinite; -webkit-animation:animations4slinearinfinite; -o-animation:animations4slinearinfinite; -ms-animation:animations4slinearinfinite; animation:animations4slinearinfinite;}@-webkit-keyframesanimations{ 0%{-webkit-transform:translate(0,0);} 12%{-webkit-transform:translate(80px,-25px);} 25%{-webkit-transform:translate(200px,-50px);} 38%{-webkit-transform:translate(320px,-25px);} 50%{-webkit-transform:translate(400px,0);} 62%{-webkit-transform:translate(320px,25px);} 75%{-webkit-transform:translate(200px,50px);} 87%{-webkit-transform:translate(80px,25px);} 100%{-webkit-transform:translate(0,0);}}@-moz-keyframesanimations{ 0%{-moz-transform:translate(0,0);} 12%{-moz-transform:translate(80px,-25px);} 25%{-moz-transform:translate(200px,-50px);} 38%{-moz-transform:translate(320px,-25px);} 50%{-moz-transform:translate(400px,0);} 62%{-moz-transform:translate(320px,25px);}

运行

提交问题





考

选


animation-delay版本：CSS3继承性：无

提交问题


语法：

animation-delay：<time>[,<time>]*

默认值：0

<time>：

取值：

指定对象动画延迟的时间

说明：

检索或设置对象动画的延迟时间


对应的脚本特性为animationDelay。


兼容性：

支持版本\类型

版本 6.0-9.0 4.05.1 13.0-16.0 11.50-11.60

版本 10.0 5.0-9.0

写法：

内核类型写法

Webkit(Chrome/Safari) -webkit-animation-delay

Gecko(Firefox) -moz-animation-delay

Presto(Opera)

Trident(IE) -ms-animation-delay

W3C animation-delay

示例：


<title>animation-delay_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>h1{font-size:16px;}p{position:relative;z-index:2;height:200px;margin:300px000;background:#fff;}p:after{position:absolute;z-index:3;top:0px;left:0;width:100%;height:1px;background:#ddd;content:'';box-shadow:0030px1pxrgba(0,0,0,.9);}div{width:100px;height:100px;padding:10px;border-radius:61px;box-shadow:0010pxrgba(204,102,0,.8);background:#F6D66E;background:-moz-linear-gradient(top,#fff,#F6D66E);background:-webkit-linear-gradient(top,#fff,#F6D66E);background:-o-linear-gradient(top,#fff,#F6D66E);background:-ms-linear-gradient(top,#fff,#F6D66E);background:linear-gradient(top,#fff,#F6D66E); -moz-transform:translate(600px,450px); -webkit-transform:translate(600px,450px); -o-transform:translate(600px,450px); -ms-transform:translate(600px,450px); transform:translate(600px,450px); -moz-animation:animations21sease,animations6sease1s; -webkit-animation:animations21sease,animations6sease1s; -o-animation:animations21sease,animations6sease1s; -ms-animation:animations21sease,animations6sease1s; animation:animations21sease,animations6sease1s;}@-webkit-keyframesanimations{ 0%{-webkit-transform:translate(0,0);} 55%{-webkit-transform:translate(480px,360px);} 100%{-webkit-transform:translate(600px,450px);}}@-moz-keyframesanimations{ 0%{-moz-transform:translate(0,0);} 55%{-moz-transform:translate(480px,360px);} 100%{-moz-transform:translate(600px,450px);}}

运行

提交问题





考

选


animation-iteration-count版本：CSS3继承性：无

提交问题


语法：

animation-iteration-count：infinite|<number>[,infinite|<number>]*

默认值：1

infinite：

<number>：

取值：

无限循环

指定对象动画的具体循环次数

说明：

检索或设置对象动画的循环次数


对应的脚本特性为animationIterationCount。


兼容性：

支持版本\类型

版本 6.0-9.0 4.05.1 13.0-16.0 11.50-11.60

版本 10.0 5.0-9.0

写法：

内核类型写法

Webkit(Chrome/Safari) -webkit-animation-iteration-count

Gecko(Firefox) -moz-animation-iteration-count

Presto(Opera)

Trident(IE) -ms-animation-iteration-count

W3C animation-iteration-count

示例：


<title>animation-iteration-count_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>h1{font-size:16px;}div{width:100px;height:100px;padding:10px;border-radius:61px;box-shadow:0010pxrgba(204,102,0,.8);background:#F6D66E;background:-moz-linear-gradient(top,#fff,#F6D66E);background:-webkit-linear-gradient(top,#fff,#F6D66E);background:-o-linear-gradient(top,#fff,#F6D66E);background:-ms-linear-gradient(top,#fff,#F6D66E);background:linear-gradient(top,#fff,#F6D66E); -moz-animation:animations1.5seaseinfinite; -webkit-animation:animations1.5seaseinfinite; -o-animation:animations1.5seaseinfinite; -ms-animation:animations1.5seaseinfinite; animation:animations1.5seaseinfinite;}@-webkit-keyframesanimations{ 0%{box-shadow:0010pxrgba(204,102,0,.8);} 50%{box-shadow:0010pxrgba(204,102,0,.3);} 100%{box-shadow:0010pxrgba(204,102,0,.8);}}@-moz-keyframesanimations{ 0%{box-shadow:0010pxrgba(204,102,0,.8);} 50%{box-shadow:0010pxrgba(204,102,0,.3);} 100%{box-shadow:0010pxrgba(204,102,0,.8);}}@-o-keyframesanimations{ 0%{box-shadow:0010pxrgba(204,102,0,.8);} 50%{box-shadow:0010pxrgba(204,102,0,.3);} 100%{box-shadow:0010pxrgba(204,102,0,.8);}}@-ms-keyframesanimations{ 0%{box-shadow:0010pxrgba(204,102,0,.8);} 50%{box-shadow:0010pxrgba(204,102,0,.3);}

运行

提交问题





考

选


animation-direction版本：CSS3继承性：无

提交问题


语法：

animation-direction：normal|alternate[,normal|alternate]*

默认值：normal

normal：

alternate：

取值：

正常方向

正常与反向交替

说明：

检索或设置对象动画在循环中是否反向运动


对应的脚本特性为animationDirection。


兼容性：

支持版本\类型

版本 6.0-9.0 4.05.1 13.0-16.0 11.50-11.60

版本 10.0 5.0-9.0

写法：

内核类型写法

Webkit(Chrome/Safari) -webkit-animation-direction

Gecko(Firefox) -moz-animation-direction

Presto(Opera)

Trident(IE) -ms-animation-direction

W3C animation-direction

示例：


<title>animation-direction_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>h1{font-size:16px;}div{width:100px;height:100px;padding:10px;border-radius:61px;box-shadow:0010pxrgba(204,102,0,.8);background:#F6D66E;background:-moz-linear-gradient(top,#fff,#F6D66E);background:-webkit-linear-gradient(top,#fff,#F6D66E);background:-o-linear-gradient(top,#fff,#F6D66E);background:-ms-linear-gradient(top,#fff,#F6D66E);background:linear-gradient(top,#fff,#F6D66E); -moz-animation:animations1.5seaseinfinitealternate; -webkit-animation:animations1.5seaseinfinitealternate; -o-animation:animations1.5seaseinfinitealternate; -ms-animation:animations1.5seaseinfinitealternate; animation:animations1.5seaseinfinitealternate;}@-webkit-keyframesanimations{ 0%{-webkit-transform:translate(0,0);} 50%{-webkit-transform:translate(100px,100px);} 100%{-webkit-transform:translate(100px,0);}}@-moz-keyframesanimations{ 0%{-moz-transform:translate(0,0);} 50%{-moz-transform:translate(100px,100px);} 100%{-moz-transform:translate(100px,0);}}@-o-keyframesanimations{ 0%{-o-transform:translate(0,0);} 50%{-o-transform:translate(100px,100px);} 100%{-o-transform:translate(100px,0);}}@-ms-keyframesanimations{ 0%{-ms-transform:translate(0,0);} 50%{-ms-transform:translate(100px,100px);}

运行

提交问题





考

选


animation-play-state版本：CSS3继承性：无

提交问题


语法：

animation-play-state：running|paused[,running|paused]*

默认值：running

running：

paused：

取值：

运动

暂停

说明：

检索或设置对象动画的状态


对应的脚本特性为animationPlayState。


兼容性：

支持版本\类型

版本 6.0-9.0 4.05.1 13.0-16.0 11.50-11.60

版本 10.0 5.0-9.0

写法：

内核类型写法

Webkit(Chrome/Safari) -webkit-animation-play-state

Gecko(Firefox) -moz-animation-play-state

Presto(Opera)

Trident(IE) -ms-animation-play-state

W3C animation-play-state

示例：


<title>animation-play-state_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>h1{font-size:16px;}p{overflow:hidden;height:1px;margin:302px00;background:#ddd;}div{width:100px;height:100px;padding:10px;border-radius:61px;box-shadow:0010pxrgba(204,102,0,.8);background:#F6D66E;background:-moz-linear-gradient(top,#fff,#F6D66E);background:-webkit-linear-gradient(top,#fff,#F6D66E);background:-o-linear-gradient(top,#fff,#F6D66E);background:-ms-linear-gradient(top,#fff,#F6D66E);background:linear-gradient(top,#fff,#F6D66E); -moz-transform:translate(280px,300px); -webkit-transform:translate(280px,300px); -o-transform:translate(280px,300px); -ms-transform:translate(280px,300px); transform:translate(280px,300px); -moz-animation:animations6slinear; -webkit-animation:animations6slinear; -o-animation:animations1.5slinear -ms-animation:animations1.5slinear; animation:animations1.5slinear;}div:hover{ -moz-animation-play-state:paused; -webkit-animation-play-state:paused; -o-animation-play-state:paused; -ms-animation-play-state:paused; animation-play-state:paused;}@-webkit-keyframesanimations{ 0%{-webkit-transform:translate(0,0);} 10%{-webkit-transform:translate(0,300px);} 20%{-webkit-transform:translate(60px,60px);} 30%{-webkit-transform:translate(60px,300px);}

运行

提交问题





考

选


animation-fill-mode版本：CSS3继承性：无

提交问题


none：

forwards：

backwards：

both：

取值：

默认值。不设置对象动画之外的状态

设置对象状态为动画结束时的状态

设置对象状态为动画开始时的状态

设置对象状态为动画结束或开始的状态

说明：

检索或设置对象动画时间之外的状态


对应的脚本特性为animationFillMode。


兼容性：

支持版本\类型

版本 6.0-9.0 4.05.1 13.0-16.0 11.50-11.60

版本 10.0 5.0-9.0

写法：

内核类型写法

Webkit(Chrome/Safari) -webkit-animation-fill-mode

Gecko(Firefox) -moz-animation-fill-mode

Presto(Opera)

Trident(IE) -ms-animation-fill-mode

W3C animation-fill-mode

示例：


<title>animation-fill-mode_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>h1{font-size:16px;}li{padding:10px;}span{display:block;width:80px;height:80px;padding:10px;border-radius:50px;box-shadow:0010pxrgba(204,102,0,.8);background:#F6D66E;background:-moz-linear-gradient(top,#fff,#F6D66E);background:-webkit-linear-gradient(top,#fff,#F6D66E);background:-o-linear-gradient(top,#fff,#F6D66E);background:-ms-linear-gradient(top,#fff,#F6D66E);background:linear-gradient(top,#fff,#F6D66E);}.nonespan{ -moz-animation:animations1sease; -webkit-animation:animations1sease; -o-animation:animations1sease; -ms-animation:animations1sease; animation:animations1sease;}@-webkit-keyframesanimations{ 0%{-webkit-transform:translate(0,0);} 100%{-webkit-transform:translate(400px);}}@-moz-keyframesanimations{ 0%{-moz-transform:translate(0,0);} 100%{-moz-transform:translate(400px);}}@-o-keyframesanimations{ 0%{-o-transform:translate(0,0);} 100%{-o-transform:translate(400px);}}@-ms-keyframesanimations{ 0%{-ms-transform:translate(0,0);} 100%{-ms-transform:translate(400px);}}

运行

提交问题




CSS参考手册»属性列表»打印属性» 其它打印属性参

考

选


page

pagepage

版本：CSS2


继承性：无


提交问题


语法：

page：auto|<identifier>

默认值：auto

auto：

<identifier>：

取值：

参照当前的默认页面

指定@page规则下的页面类型定义

说明：

检索或指定显示对象容器时使用的页面类型。参阅@page

示例代码：

@pagerotated{size:landscape;}

p{page:rotated;page-break-before:left;}

对应的脚本特性为page。

浅绿

=支持红色

=不支持墨绿

=部分支持橙色

=实验性质

兼容性：

支持版本\类型


较早版本

6.0-7.04.0 5.1 13.0 11.50

较早版本

8.0

提交问题





考

选


page-break-before版本：CSS2继承性：无

提交问题


语法：

page-break-before：auto|always|avoid|left|right

默认值：auto

auto：

always：

avoid：

left：

right：

取值：

如果需要，在对象之前插入页分割符

始终在对象之前插入页分割符

避免在对象前面插入页分割符

在对象前面插入页分割符直到它到达一个空白的左页边

在对象前面插入页分割符直到它到达一个空白的右页边

说明：

检索或设置对象之前出现的页分割符。

对应的脚本特性为pageBreakBefore。


兼容性：

支持版本\类型

较早版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>page-break-before_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>p{page-break-before:always;}</style></head><body><div>在对象之前插入页分割符</div><p>page-break-before:always</p><p>page-break-before:always</p><p>page-break-before:always</p><p>page-break-before:always</p></body></html>

运行

提交问题





考

选


page-break-after版本：CSS2继承性：无

提交问题


语法：

page-break-after：auto|always|avoid|left|right

默认值：auto

auto：

always：

avoid：

left：

right：

取值：

如果需要，在对象之后插入页分割符

始终在对象之后插入页分割符

避免在对象之后插入页分割符

在对象之后插入页分割符直到它到达一个空白的左页边

在对象之后插入页分割符直到它到达一个空白的右页边

说明：

检索或设置对象之后出现的页分割符。

对应的脚本特性为pageBreakAfter。


兼容性：

支持版本\类型

较早版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>page-break-after_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>p{page-break-after:always;}</style></head><body><div>在对象之后插入页分割符</div><p>page-break-after:always</p><p>page-break-after:always</p><p>page-break-after:always</p><p>page-break-after:always</p></body></html>

运行

提交问题





考

选


page-break-inside版本：CSS2继承性：无

提交问题


语法：

page-break-inside：auto|avoid

默认值：auto

auto：

avoid：

取值：

如果需要，在当前对象内部插入页分割符

避免在当前对象内部插入页分割符

说明：

检索或设置对象容器内部出现的页分割符。

对应的脚本特性为pageBreakInside。


兼容性：

支持版本\类型

较早版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>page-break-inside_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>p{page-break-inside:auto;}</style></head><body><div>如果需要，在对象内部插入页分割符</div><p>page-break-inside:auto</p><p>page-break-inside:auto</p><p>page-break-inside:auto</p><p>page-break-inside:auto</p></body></html>

运行

提交问题




CSS参考手册»属性列表»媒体查询属性» 其它媒体查询属

性

选


mediafeatureswidth版本：CSS3

是否接受min/max：是

提交问题


语法：

width：<length>

<length>：

取值：


说明：

定义输出设备中的页面可见区域宽度。

与盒模型width不同，媒体特性width的取值只能是<length>。

本特性接受min和max前缀，因此可以派生出min-width和max-width两

个媒体特性。

简单列举几个应用示例：

@mediascreenand(width){…}

@importurl(example.css)screenand(width:800px);

<linkmedia="screenand(min-width:400px)and(max-width:900px)"rel="stylesheet"href="example.css"/>

<?xml-stylesheetmedia="notscreenand(width:800px)"rel="stylesheet"href="example.css"?>


兼容性：

支持版本\类型

较早版本 6.0-8.04.0-6.0 5.1 13.0 11.50-11.51

较近版本 9.0

示例：


<title>mediafeatureswidth_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>@mediaalland(min-width:500px)and(max-width:1000px){ body{color:#f00;}}</style></head><body><divclass="test">当页面可见宽度大于500px小于1000px时，本行文字显示为红色。试着调整你的viewport使得页面宽度介于这个区间以查看效果</div></body></html>

运行

提交问题





性

选


mediafeaturesheight版本：CSS3


提交问题


语法：

height：<length>

<length>：

取值：


说明：

定义输出设备中的页面可见区域高度。

与盒模型height不同，媒体特性height的取值只能是<length>。

本特性接受min和max前缀，因此可以派生出min-height和max-height两

个媒体特性。


@media(min-height:400px){…}

@mediascreenand(height:600px){…}

@importurl(example.css)screenand(height:800px);


兼容性：

支持版本\类型

较早版本 6.0-8.04.0-6.0 5.1 13.0 11.50-11.51

较近版本 9.0

示例：


<title>mediafeaturesheight_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>@mediaalland(min-height:300px)and(max-height:500px){ body{color:#f00;}}</style></head><body><divclass="test">当页面可见高度大于300px小于500px时，本行文字显示为红色。试着调整你的viewport使得页面高度介于这个区间以查看效果</div></body></html>

运行

提交问题





性

选


mediafeaturesdevice-width版本：CSS3


提交问题


语法：

device-width：<length>

<length>：

取值：


说明：

定义输出设备的屏幕可见宽度。

本特性接受min和max前缀，因此可以派生出min-device-width和max-

device-width两个媒体特性。


@mediascreenand(device-width:1024px){…}

@importurl(example.css)screenand(min-device-width:800px);

<linkmedia="screenand(min-device-width:300px)and(max-device-width:900px)"rel="stylesheet"href="example.css"/>


兼容性：

支持版本\类型

较早版本 6.0-8.04.0-6.0 5.1 13.0 11.50-11.51

较近版本 9.0

示例：


<title>mediafeaturesdevice-width_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>@mediascreenand(device-width:1024px){ body{color:#f00;}}</style></head><body><divclass="test">当你的输出设备分辨率宽度设置为1024px时，本行文字显示为红色</div></body></html>

运行

提交问题





性

选


mediafeaturesdevice-height版本：CSS3


提交问题


语法：

device-height：<length>

<length>：

取值：


说明：

定义输出设备的屏幕可见高度。

本特性接受min和max前缀，因此可以派生出min-device-height和max-

device-height两个媒体特性。


@mediascreenand(device-height:800px){…}

@importurl(example.css)screenand(min-device-height:800px);

<linkmedia="screenand(min-device-height:300px)and(max-device-height:900px)"rel="stylesheet"href="example.css"/>


兼容性：

支持版本\类型

较早版本 6.0-8.04.0-6.0 5.1 13.0 11.50-11.51

较近版本 9.0

示例：


<title>mediafeaturesdevice-height_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>@mediascreenand(min-device-height:800px){ body{color:#f00;}}</style></head><body><divclass="test">当你的输出设备分辨率高度设置为800px时，本行文字显示为红色</div></body></html>

运行

提交问题





性

选


mediafeaturesorientation版本：CSS3

是否接受min/max：否

提交问题


语法：

orientation：portrait|landscape

portrait：

landscape：

取值：

指定输出设备中的页面可见区域高度大于或等于宽度

除portrait值情况外，都是landscape

说明：

定义输出设备中的页面可见区域高度是否大于或等于宽度。

本特性不接受min和max前缀。


@mediascreenand(orientation:portrait){…}

@importurl(example.css)screenand(orientation:landscape);


兼容性：

支持版本\类型

较早版本 6.0-8.04.0-6.0 5.1 13.0 11.50-11.51

较近版本 9.0

示例：


<title>mediafeaturesorientation_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>@medianotscreenand(orientation:portrait){ body{color:#f00;}}</style></head><body><divclass="test">当输出设备中的页面可见宽度大于高度时，本行文字显示为红色</div></body></html>

运行

提交问题





性

选


mediafeaturesaspect-ratio版本：CSS3


提交问题


语法：

aspect-ratio：<ratio>

<ratio>：

取值：

指定比率

说明：

定义输出设备中的页面可见区域宽度与高度的比率。

本特性接受min和max前缀，因此可以派生出min-aspect-ratio和max-

aspect-ratio两个媒体特性。


@mediascreenand(aspect-ratio:1680/957){…}

@importurl(example.css)screenand(max-aspect-ratio:20/11);


兼容性：

支持版本\类型

较早版本 6.0-8.04.0-6.0 5.1 13.0 11.50-11.51

较近版本 9.0

示例：


<title>mediafeaturesaspect-ratio_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>@mediascreenand(max-aspect-ratio:20/11){ body{color:#f00;}}</style></head><body><divclass="test">当输出设备中的页面可见宽度与高度比率小于或等于20:11时，本行文字显示为红色</div><script></script></body></html>

运行

提交问题





性

选


mediafeaturesdevice-aspect-ratio版本：CSS3


提交问题


语法：

device-aspect-ratio：<ratio>

<ratio>：

取值：

指定比率

说明：

定义输出设备的屏幕可见宽度与高度的比率。

如常讲的显示器屏幕比率：4/3,16/9,16/10

本特性接受min和max前缀，因此可以派生出min-device-aspect-ratio和

max-device-aspect-ratio两个媒体特性。


@mediascreenand(device-aspect-ratio:4/3){…}

@importurl(example.css)screenand(min-device-aspect-ratio:4/3);


兼容性：

支持版本\类型

较早版本 6.0-8.04.0-6.0 5.1 13.0 11.50-11.51

较近版本 9.0

示例：


<title>mediafeaturesdevice-aspect-ratio_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>@mediascreenand(device-aspect-ratio:16/10){ body{color:#f00;}}</style></head><body><divclass="test">当你将输出设备屏幕分辨率为16:10时，本行文字显示为红色</div><script></script></body></html>

运行

提交问题





性

选


mediafeaturescolor版本：CSS3


提交问题


语法：

color：<integer>

<integer>：

取值：

用用整数值来定义彩色原件数。不允许负值

说明：

定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0

与色彩color不同，媒体特性color的取值只能是<integer>，用来表示色

彩数。

本特性接受min和max前缀，因此可以派生出min-color和max-color两个

媒体特性。


@mediascreenand(color){…}

@importurl(example.css)screenand(color:0);

<linkmedia="screenand(min-color:1)"rel="stylesheet"href="example.css"/>


兼容性：

支持版本\类型

较早版本 6.0-8.04.0-6.0 5.1 13.0 11.50-11.51

较近版本 9.0

示例：


<title>mediafeaturescolor_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>@mediascreenand(color){ body{color:#f00;}}</style></head><body><divclass="test">当你的输出设备是彩色的，本行文字显示为红色</div><script></script></body></html>

运行

提交问题





性

选


mediafeaturescolor-index版本：CSS3


提交问题


语法：

color-index：<integer>

<integer>：

取值：

用用整数值来定义彩色查询表中的条目数。不允许负值

说明：

定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询

表，则值等于0

本特性接受min和max前缀，因此可以派生出min-color-index和max-

color-index两个媒体特性。


@mediascreenand(color-index){…}

@importurl(example.css)screenand(min-color-index:1);

<linkmedia="screenand(color-index:0)"rel="stylesheet"href="example.css"/>


兼容性：

支持版本\类型

较早版本 6.0-8.04.0-6.0 5.1 13.0 11.50-11.51

较近版本 9.0

示例：


<title>color-indexofmediafeatures_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>@mediascreenand(color-index){ body{color:#f00;}}</style></head><body><divclass="test">当你的输出设备使用了彩色查询表时，本行文字显示为红色</div><script></script></body></html>

运行

提交问题





性

选


mediafeaturesmonochrome版本：CSS3


提交问题


语法：

monochrome：<integer>

<integer>：

取值：

用整数值来定义宽度。不允许负值

说明：

定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是

单色设备，则值等于0

本特性接受min和max前缀，因此可以派生出min-monochrome和max-

monochrome两个媒体特性。


@mediascreenand(monochrome){…}

@importurl(example.css)screenand(monochrome:0);

<linkmedia="screenand(min-monochrome:0)and(max-monochrome:10)"rel="stylesheet"href="example.css"/>

<?xml-stylesheetmedia="notscreenand(monochrome)"rel="stylesheet"href="example.css"?>


兼容性：

支持版本\类型

较早版本 6.0-8.04.0-6.0 5.1 13.0 11.50-11.51

较近版本 9.0

示例：


<title>monochromeofmediafeatures_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>@mediascreenand(monochrome){ body{color:#f00;}}</style></head><body><divclass="test">当你的输出设备是单色的（黑白色），本行文字显示为红色</div><script></script></body></html>

运行

提交问题





性

选


mediafeaturesresolution版本：CSS3


提交问题


语法：

resolution：<resolution>

<resolution>：

取值：

用整数值来定义宽度。不允许负值

说明：

定义设备的分辨率。如：96dpi,300dpi,118dpcm

本特性接受min和max前缀，因此可以派生出min-resolution和max-

resolution两个媒体特性。


@mediascreenand(resolution){…}

@importurl(example.css)screenand(min-resolution:96dpi);

<linkmedia="screenand(resolution:96dpi)"rel="stylesheet"href="example.css"/>


兼容性：

支持版本\类型

较早版本 6.0-8.04.0-6.0 5.1 13.0 11.50-11.51

较近版本 9.0

示例：


<title>resolutionofmediafeatures_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>@mediascreenand(min-resolution:96dpi){ body{color:#f00;}}</style></head><body><divclass="test">当你的输出设备分辨率大于或等于96dpi时，本行文字显示为红色</div><script></script></body></html>

运行

提交问题





性

选


mediafeaturesscan版本：CSS3


提交问题


语法：

scan：progressive|interlace

progressive：

interlace：

取值：

连续扫描

交织扫描

说明：

定义电视类设备的扫描工序。



@mediatvand(scan:progressive){…}

@importurl(example.css)tvand(scan:interlace);


兼容性：

支持版本\类型

较早版本 6.0-8.04.0-6.0 5.1 13.0 11.50-11.51

较近版本 9.0

示例：


<title>scanofmediafeatures_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>@mediatvand(scan:progressive){ body{color:#f00;}}</style></head><body><divclass="test">当你的电视类设备的扫描工序为progressive时，本行文字显示为红色</div><script></script></body></html>

运行

提交问题





性

选


mediafeaturesgrid版本：CSS3


提交问题


语法：

grid：<integer>

<integer>：

取值：

用整数值来定义是否使用栅格或点阵。只有1和0才是有效

值，1代表是，0代表否

说明：

用来查询输出设备是否使用栅格或点阵。



@mediaalland(grid){…}

@importurl(example.css)alland(grid:0);


兼容性：

支持版本\类型

较早版本 6.0-8.04.0-6.0 5.1 13.0 11.50-11.51

较近版本 9.0

示例：


<title>gridofmediafeatures_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>@mediascreenand(grid:0){ body{color:#f00;}}</style></head><body><divclass="test">当你的输出设备未使用栅格或点阵时，本行文字显示为红色</div><script></script></body></html>

运行

提交问题




CSS参考手册»属性列表»OnlyIE属性» 其它OnlyIE属

性

选


scrollbar-3dlight-color版本：CSS1继承性：无

提交问题


语法：

scrollbar-3dlight-color：<color>

默认值：threedlightshadow

<color>：

取值：

指定颜色。

说明：

检索或设置对象滚动条3d亮色阴影边框(threedlightshadow)的外观颜

色。

对应的脚本特性为scrollbar3dLightColor。


兼容性：

支持版本\类型

版本 6.0 4.0-6.0 5.1 13.0 11.50-11.51

示例：


<title>scrollbar-3dlight-color_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>div{overflow:scroll;width:200px;height:100px;margin-top:20px;}.test{scrollbar-3dlight-color:#f00;}.test2{scrollbar-3dlight-color:#080;}.test3{scrollbar-3dlight-color:#630;}</style></head><body><divclass="test">自定义滚动条3d亮色阴影边框(threedlightshadow)的外观颜色。你将在IE浏览器下看到滚动条的3d亮色阴影边框变成红色</div><divclass="test2">自定义滚动条3d亮色阴影边框(threedlightshadow)的外观颜色。你将在IE浏览器下看到滚动条的3d亮色阴影边框变成绿色</div><divclass="test3">自定义滚动条3d亮色阴影边框(threedlightshadow)的外观颜色。你将在IE浏览器下看到滚动条的3d亮色阴影边框变成棕色</div></body></html>

运行

提交问题





性

选


scrollbar-darkshadow-color版本：CSS1继承性：无

提交问题


语法：

scrollbar-darkshadow-color：<color>

默认值：threeddarkshadow

<color>：

取值：

指定颜色。

说明：

检索或设置对象滚动条3d暗色阴影边框(threeddarkshadow)的外观颜

色。

对应的脚本特性为scrollbarDarkShadowColor。


兼容性：

支持版本\类型

版本 6.0 4.0-6.0 5.1 13.0 11.50-11.51

示例：


<title>scrollbar-darkshadow-color_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>div{overflow:scroll;width:200px;height:100px;margin-top:20px;}.test{scrollbar-darkshadow-color:#f00;}.test2{scrollbar-darkshadow-color:#080;}.test3{scrollbar-darkshadow-color:#630;}</style></head><body><divclass="test">自定义滚动条3d暗色阴影边框(threeddarkshadow)的外观颜色。你将在IE浏览器下看到滚动条的3d暗色阴影边框变成红色</div><divclass="test2">自定义滚动条3d暗色阴影边框(threeddarkshadow)的外观颜色。你将在IE浏览器下看到滚动条的3d暗色阴影边框变成绿色</div><divclass="test3">自定义滚动条3d暗色阴影边框(threeddarkshadow)的外观颜色。你将在IE浏览器下看到滚动条的3d暗色阴影边框变成棕色</div></body></html>

运行

提交问题





性

选


scrollbar-highlight-color版本：CSS1继承性：无

提交问题


语法：

scrollbar-highlight-color：<color>

默认值：threedhighlight

<color>：

取值：

指定颜色。

说明：

检索或设置对象滚动条3d高亮边框(threedhighlight)的外观颜色。

对应的脚本特性为scrollbarHighlightColor。


兼容性：

支持版本\类型

版本 6.0 4.0-6.0 5.1 13.0 11.50-11.51

示例：


<title>scrollbar-highlight-color_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>div{overflow:scroll;width:200px;height:100px;margin-top:20px;}.test{scrollbar-highlight-color:#f00;}.test2{scrollbar-highlight-color:#080;}.test3{scrollbar-highlight-color:#630;}</style></head><body><divclass="test">自定义滚动条3d高亮边框(threedhighlight)的外观颜色。你将在IE浏览器下看到滚动条的3d高亮边框(threedhighlight)变成红色</div><divclass="test2">自定义滚动条3d高亮边框(threedhighlight)的外观颜色。你将在IE浏览器下看到滚动条的3d高亮边框(threedhighlight)变成绿色</div><divclass="test3">自定义滚动条3d高亮边框(threedhighlight)的外观颜色。你将在IE浏览器下看到滚动条的3d高亮边框(threedhighlight)变成棕色</div></body></html>

运行

提交问题





性

选


scrollbar-shadow-color版本：CSS1继承性：无

提交问题


语法：

scrollbar-shadow-color：<color>

默认值：threedshadow

<color>：

取值：

指定颜色。

说明：

检索或设置对象滚动条3d阴影边框(threedshadow)的外观颜色。

对应的脚本特性为scrollbarShadowColor。


兼容性：

支持版本\类型

版本 6.0 4.0-6.0 5.1 13.0 11.50-11.51

示例：


<title>scrollbar-shadow-color_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>div{overflow:scroll;width:200px;height:100px;margin-top:20px;}.test{scrollbar-shadow-color:#f00;}.test2{scrollbar-shadow-color:#080;}.test3{scrollbar-shadow-color:#630;}</style></head><body><divclass="test">自定义滚动条3d阴影边框(threedshadow)的外观颜色。你将在IE浏览器下看到滚动条的3d阴影边框(threedshadow)变成红色</div><divclass="test2">自定义滚动条3d阴影边框(threedshadow)的外观颜色。你将在IE浏览器下看到滚动条的3d阴影边框(threedshadow)变成绿色</div><divclass="test3">自定义滚动条3d阴影边框(threedshadow)的外观颜色。你将在IE浏览器下看到滚动条的3d阴影边框(threedshadow)变成棕色</div></body></html>

运行

提交问题





性

选


scrollbar-arrow-color版本：CSS1继承性：无

提交问题


语法：

scrollbar-arrow-color：<color>

默认值：buttontext

<color>：

取值：

指定颜色。

说明：

检索或设置对象滚动条方向箭头的颜色。当滚动条出现但不可用时，

此属性失效。

对应的脚本特性为scrollbarArrowColor。


兼容性：

支持版本\类型

版本 6.0 4.0-6.0 5.1 13.0 11.50-11.51

示例：


<title>scrollbar-arrow-color_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>div{overflow:scroll;width:200px;height:80px;margin-top:20px;}.test{scrollbar-arrow-color:#f00;}.test2{scrollbar-arrow-color:#080;}.test3{scrollbar-arrow-color:#630;}</style></head><body><divclass="test">自定义滚动条方向箭头的外观颜色。你将在IE浏览器下看到滚动条的方向箭头变成红色</div><divclass="test2">自定义滚动条方向箭头的外观颜色。你将在IE浏览器下看到滚动条的方向箭头变成绿色</div><divclass="test3">自定义滚动条方向箭头的外观颜色。你将在IE浏览器下看到滚动条的方向箭头变成棕色</div></body></html>

运行

提交问题





性

选


scrollbar-base-color版本：CSS1继承性：无

提交问题


语法：

scrollbar-base-color：<color>


<color>：

取值：

指定颜色。

说明：

检索或设置对象滚动条基准颜色。其它界面颜色将据此自动调整。

对应的脚本特性为scrollbarBaseColor。


兼容性：

支持版本\类型

版本 6.0 4.0-6.0 5.1 13.0 11.50-11.51

示例：


<title>scrollbar-base-color_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>div{overflow:scroll;width:200px;height:80px;margin-top:20px;}.test{scrollbar-base-color:#f00;}.test2{scrollbar-base-color:#080;}.test3{scrollbar-base-color:#630;}</style></head><body><divclass="test">自定义滚动条整体的基准色调。你将在IE浏览器下看到滚动条的整体的基准色调为红色</div><divclass="test2">自定义滚动条整体的基准色调。你将在IE浏览器下看到滚动条的整体的基准色调为绿色</div><divclass="test3">自定义滚动条整体的基准色调。你将在IE浏览器下看到滚动条的整体的基准色调为棕色</div></body></html>

运行

提交问题





性

选


scrollbar-track-color版本：CSS1继承性：无

提交问题


语法：

scrollbar-track-color：<color>


<color>：

取值：

指定颜色。

说明：

检索或设置对象滚动条拖动区域的外观颜色。

对应的脚本特性为scrollbarTrackColor。


兼容性：

支持版本\类型

版本 6.0 4.0-6.0 5.1 13.0 11.50-11.51

示例：


<title>scrollbar-track-color_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>div{overflow:scroll;width:200px;height:80px;margin-top:20px;}.test{scrollbar-track-color:#f00;}.test2{scrollbar-track-color:#080;}.test3{scrollbar-track-color:#630;}</style></head><body><divclass="test">自定义滚动条拖动区域的外观颜色。你将在IE浏览器下看到滚动条的拖动区域变成红色</div><divclass="test2">自定义滚动条拖动区域的外观颜色。你将在IE浏览器下看到滚动条的拖动区域变成绿色</div><divclass="test3">自定义滚动条拖动区域的外观颜色。你将在IE浏览器下看到滚动条的拖动区域变成棕色</div></body></html>

运行

提交问题





性

选


scrollbar-face-color版本：CSS1继承性：无

提交问题


语法：

scrollbar-face-color：<color>

默认值：threedface

<color>：

取值：

指定颜色。

说明：

检索或设置对象滚动条3D表面的(threedface)的外观颜色。

对应的脚本特性为scrollbarFaceColor。


兼容性：

支持版本\类型

版本 6.0 4.0-6.0 5.1 13.0 11.50-11.51

示例：


<title>scrollbar-face-color_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>div{overflow:scroll;width:200px;height:80px;margin-top:20px;}.test{scrollbar-face-color:#f00;}.test2{scrollbar-face-color:#080;}.test3{scrollbar-face-color:#630;}</style></head><body><divclass="test">自定义滚动条3D表面的(threedface)的外观颜色。你将在IE浏览器下看到滚动条的3D表面的(threedface)变成红色</div><divclass="test2">自定义滚动条3D表面的(threedface)的外观颜色。你将在IE浏览器下看到滚动条的3D表面的(threedface)变成绿色</div><divclass="test3">自定义滚动条3D表面的(threedface)的外观颜色。你将在IE浏览器下看到滚动条的3D表面的(threedface)变成棕色</div></body></html>

运行

提交问题





性

选


filter版本：CSS1继承性：无

提交问题


语法：

filter：<filter>+

<filter>：

取值：

要使用的滤镜效果。多个滤镜之间用空格隔开。

说明：

设置或检索对象所应用的滤镜效果。

最常用的滤镜效果是不透明效果，如果要实现50%的不透明度（其它

高级浏览器的实现参阅opacity）：

示例代码：

div{filter:alpha(opacity=50);}/*forIE8andearlier*/

div{opacity:.5;}/*forIE9andotherbrowsers*/

以上2段代码的效果相同

对应的脚本特性为filter。


兼容性：

支持版本\类型

版本 6.0 4.0-6.0 5.1 13.0 11.50-11.51

示例：


<title>filter_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>body{background:#090;}div{width:200px;height:80px;margin-top:20px;border:10pxsolid#000;background:#ddd;}.test{filter:alpha(opacity=30);}.test2{filter:blur(strength=50)flipv();}</style></head><body><divclass="test">透明度为30%的box</div><divclass="test2">模糊和翻转的box</div></body></html>

运行

提交问题





性

选


behavior

behaviorbehavior

版本：CSS1


继承性：无


提交问题


语法：

behavior：<url>|url(#objID)|url(#default#behaviorName)

<url>：

url(#objID)：

url(#default#behaviorName)：

取值：

使用绝对或相对地址指定DHTML行为组件（.htc）

用二进制实现DHTML行为，#objID为object对象指定的

id特性

IE的默认行为。由behaviorName指定

说明：

设置或检索对象的DHTML行为。

多个行为之间用空格隔开。

对应的脚本特性为behavior。

浅绿

=支持红色

=不支持墨绿

=部分支持橙色

=实验性质

兼容性：

支持版本\类型


版本 6.0 4.0-6.0 5.1 13.011.50-11.51

示例：

div{behavior:url(fly.htc)url(shy.htc);}

提交问题




CSS参考手册»属性列表»OnlyFirefox属性» OnlyFirefox属

性

选


border-colors版本：CSS3继承性：无

提交问题


语法：

border-colors：<color>

相关属性：[border-top-colors]||[border-right-colors]||[border-bottom-

colors]||[border-left-colors]

<color>：

取值：

指定颜色。

说明：

设置或检索对象边框的多重颜色。参阅border-color属性。

border的width为(n)px，那么最多可以设置n组边框色，每组边框色宽

度为1px；如果border的width为10px，却只设置了6组边框色，那么最

后一组边框色将自动渲染剩余的宽度

本属性为伪属性，其分裂后的border-top-colors,border-right-colors,

border-bottom-colors,border-left-colors才是有效属性。

示例：


<title>border-colors_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{padding:10px;border-width:5px;border-style:solid;-moz-border-top-colors:#000#fff#f00#fff#090;-moz-border-right-colors:#000#fff#f00#fff#090;-moz-border-bottom-colors:#000#fff#f00#fff#090;-moz-border-left-colors:#000#fff#f00#fff#090;}.test2{margin-top:10px;padding:10px;border-width:10px;border-style:solid;-moz-border-top-colors:#200#500#800#900#a00#b00;-moz-border-right-colors:#200#500#800#900#a00#b00;-moz-border-bottom-colors:#200#500#800#900#a00#b00;-moz-border-left-colors:#200#500#800#900#a00#b00;}</style></head><body><divclass="test">多组边框色效果</div><divclass="test2">多组边框色效果</div></body></html>

运行

提交问题





性

选


border-top-colors版本：CSS3继承性：无

提交问题


语法：

border-top-colors：<color>[,<color>]*

相关属性：[border-right-colors]||[border-bottom-colors]||[border-left-

colors]

<color>：

取值：

指定颜色。

说明：

设置或检索对象顶部边框的多重颜色。参阅border-top-color属性。




对应的脚本特性为borderTopColors。


兼容性：

支持版本\类型

较早版本6.0-9.0

4.0-6.0

4.0-5.1

10.0-13.0

10.6-11.51

写法：

内核类型写法(border-top-colors)


Gecko(Firefox) -moz-border-top-colors

Presto(Opera)

Trident(IE)

示例：


<title>border-top-colors_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{padding:10px;border-top-width:5px;border-top-style:solid;-moz-border-top-colors:#000#fff#050#fff#f00;}</style></head><body><divclass="test">顶部多组边框色效果</div></body></html>

运行

提交问题





性

选


border-right-colors版本：CSS3继承性：无

提交问题


语法：

border-right-colors：<color>[,<color>]*

相关属性：[border-top-colors]||[border-bottom-colors]||[border-left-

colors]

<color>：

取值：

指定颜色。

说明：

设置或检索对象右边边框的多重颜色。参阅border-right-color属性。




对应的脚本特性为borderRightColors。


兼容性：

支持版本\类型

较早版本6.0-9.0

4.0-6.0

4.0-5.1

10.0-13.0

10.6-11.51

写法：

内核类型写法(border-right-colors)


Gecko(Firefox) -moz-border-right-colors

Presto(Opera)

Trident(IE)

示例：


<title>border-right-colors_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{padding:10px;border-right-width:5px;border-right-style:solid;-moz-border-right-colors:#000#fff#050#fff#f00;}</style></head><body><divclass="test">右边多组边框色效果</div></body></html>

运行

提交问题





性

选


border-bottom-colors版本：CSS3继承性：无

提交问题


语法：

border-bottom-colors：<color>[,<color>]*

相关属性：[border-top-colors]||[border-right-colors]||[border-left-

colors]

<color>：

取值：

指定颜色。

说明：

设置或检索对象底部边框的多重颜色。参阅border-bottom-color属性。




对应的脚本特性为borderBottomColors。


兼容性：

支持版本\类型

较早版本6.0-9.0

4.0-6.0

4.0-5.1

10.0-13.0

10.6-11.51

写法：

内核类型写法(border-bottom-colors)


Gecko(Firefox) -moz-border-bottom-colors

Presto(Opera)

Trident(IE)

示例：


<title>border-bottom-colors_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{padding:10px;border-bottom-width:5px;border-bottom-style:solid;-moz-border-bottom-colors:#000#fff#050#fff#f00;}</style></head><body><divclass="test">底部多组边框色效果</div></body></html>

运行

提交问题





性

选


border-left-colors版本：CSS3继承性：无

提交问题


语法：

border-left-colors：<color>[,<color>]*

相关属性：[border-top-colors]||[border-right-colors]||[border-bottom-

colors]

<color>：

取值：

指定颜色。

说明：

设置或检索对象左边边框的多重颜色。参阅border-left-color属性。




对应的脚本特性为borderLeftColors。


兼容性：

支持版本\类型

较早版本6.0-9.0

4.0-6.0

4.0-5.1

10.0-13.0

10.6-11.51

写法：

内核类型写法(border-left-colors)


Gecko(Firefox) -moz-border-left-colors

Presto(Opera)

Trident(IE)

示例：


<title>border-left-colors_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{padding:10px;border-left-width:5px;border-left-style:solid;-moz-border-left-colors:#000#fff#050#fff#f00;}</style></head><body><divclass="test">左边多组边框色效果</div></body></html>

运行

提交问题




CSS参考手册»选择符列表»元素选择符» 其它元素选择符

参考

选


通配选择符(*)版本：CSS2

提交问题


语法：

*{sRules}

说明：

选定所有对象。


兼容性：

支持版本\类型

较早版本 6.0#14.0 5.1 13.0 11.50

最近版本 7.0

1. IE6及更早浏览器并不支持通配选择符(*)，而是将它忽略了，所

以也变相的能看到效果。

示例：


<title>通配选择符(*)_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>*{color:#f00;}</style></head><body><h1>标题</h1><p>正文内容</p></body></html>

运行

提交问题





参考

选


类型选择符(E)版本：CSS1

提交问题


语法：

E{sRules}

说明：

以文档语言对象类型作为选择符。


兼容性：

支持版本\类型

版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>类型选择符(E)_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>h1{font-size:20px;}p{font-size:13px;}</style></head><body><h1>标题</h1><p>正文内容</p></body></html>

运行

提交问题





参考

选


id选择符(E#myid)版本：CSS1

提交问题


语法：

E#myid{sRules}

说明：

以唯一标识符id属性等于myid的E对象作为选择符。


兼容性：

支持版本\类型

版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>id选择符(E#myid)_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>#title{font-size:20px;}p#content{font-size:13px;}</style></head><body><h1id="title">标题</h1><pid="content">正文内容</p></body></html>

运行

提交问题





参考

选


class选择符(E.myclass)版本：CSS1

提交问题


语法：

E.myclass{sRules}

说明：

以class属性包含myclass的E对象作为选择符。


兼容性：

支持版本\类型

版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>class选择符(E.myclass)_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.title{font-size:20px;}p.content{font-size:13px;}</style></head><body><h1class="title">标题</h1><pclass="content">正文内容</p></body></html>

运行

提交问题




CSS参考手册»选择符列表»关系选择符» 其它关系选择符

参考

选


包含选择符(EF)版本：CSS1

提交问题


语法：

EF{sRules}

说明：

选择所有被E元素包含的F元素。


兼容性：

支持版本\类型

版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>包含选择符(EF)_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>ulli{color:#f00;}</style></head><body><ul> <li>列表项目</li> <li>列表项目</li> <li>列表项目</li> <li>列表项目</li></ul></body></html>

运行

提交问题





参考

选


子选择符(E>F)版本：CSS2

提交问题


语法：

E>F{sRules}

说明：

选择所有作为E元素的子元素F。


兼容性：

支持版本\类型

较早版本 6.04.0 5.1 13.0 11.50

最近版本 7.0

示例：


<title>子选择符(E>F)_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test>li>a{color:#f00;}</style></head><body><ulclass="test"> <li> <ahref="?">列表项目1</a> <ul> <li><ahref="?">项目列表1.1</a></li> <li><ahref="?">项目列表1.2</a></li> </ul> </li> <li> <ahref="?">列表项目2</a> <ul> <li><ahref="?">项目列表2.1</a></li> <li><ahref="?">项目列表2.2</a></li> </ul> </li> <li><ahref="?">列表项目</a></li> <li><ahref="?">列表项目</a></li></ul></body></html>

运行

提交问题





参考

选


相邻选择符(E+F)版本：CSS2

提交问题


语法：

E+F{sRules}

说明：

选择紧贴在E元素之后F元素。


兼容性：

支持版本\类型

较早版本 6.04.0 5.1 13.0 11.50

最近版本 7.0

示例：


<title>相邻选择符(E+F)_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>p+p{color:#f00;}</style></head><body><divclass="test"> <h3>这是一个标题</h3> <p>这是一个文字段落</p> <p>这是一个文字段落</p> <h3>这是一个标题</h3> <p>这是一个文字段落</p> <h3>这是一个标题</h3> <p>这是一个文字段落</p> <p>这是一个文字段落</p></div></body></html>

运行

提交问题





参考

选


兄弟选择符(E~F)版本：CSS3

提交问题


语法：

E~F{sRules}

说明：

选择E元素后面的所有兄弟元素F。


兼容性：

支持版本\类型

较早版本 6.04.0 5.1 13.0 11.50

最近版本 7.0

示例：


<title>兄弟选择符(E~F)_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>p~p{color:#f00;}</style></head><body><divclass="test"> <h3>这是一个标题</h3> <p>这是一个文字段落</p> <p>这是一个文字段落</p> <h3>这是一个标题</h3> <p>这是一个文字段落</p> <h3>这是一个标题</h3> <p>这是一个文字段落</p> <p>这是一个文字段落</p></div></body></html>

运行

提交问题




CSS参考手册»选择符列表»属性选择符» 其它属性选择符

参考

选


属性选择符E[att]版本：CSS2

提交问题


语法：

E[att]{sRules}

说明：

选择具有att属性的E元素。


兼容性：

支持版本\类型

较早版本 6.04.0 5.1 13.0 11.50

较新版本 7.0

示例：


<title>属性选择符E[att]_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>a[class]{color:#f00;}</style></head><body><ul> <li><ahref="?"class="external">外部链接</a></li> <li><ahref="?">内部链接</a></li> <li><ahref="?"class="external">外部链接</a></li> <li><ahref="?">内部链接</a></li></ul></body></html>

运行

提交问题





参考

选


属性选择符E[att="val"]版本：CSS2

提交问题


语法：

E[att="val"]{sRules}

说明：

选择具有att属性且属性值等于val的E元素。


兼容性：

支持版本\类型

较早版本 6.04.0 5.1 13.0 11.50

最近版本 7.0

示例：


<title>属性选择符E[att="val"]_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>a[class="external"]{color:#f00;}</style></head><body><ul> <li><ahref="?"class="external">外部链接</a></li> <li><ahref="?">内部链接</a></li> <li><ahref="?"class="external">外部链接</a></li> <li><ahref="?">内部链接</a></li></ul></body></html>

运行

提交问题





参考

选


属性选择符E[att~="val"]版本：CSS2

提交问题


语法：

E[att~="val"]{sRules}

说明：

选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于

val的E元素。


兼容性：

支持版本\类型

较早版本 6.04.0 5.1 13.0 11.50

最近版本 7.0

示例：


<title>属性选择符E[att~="val"]_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>a[class~="external"]{color:#f00;}</style></head><body><ul> <li><ahref="?"class="externaltxt">外部链接</a></li> <li><ahref="?"class="txt">内部链接</a></li> <li><ahref="?"class="externaltxt">外部链接</a></li> <li><ahref="?"class="txt">内部链接</a></li></ul></body></html>

运行

提交问题





参考

选


属性选择符E[att^="val"]版本：CSS3

提交问题


语法：

E[att^="val"]{sRules}

说明：

选择具有att属性且属性值为以val开头的字符串的E元素。


兼容性：

支持版本\类型

较早版本 6.04.0 5.1 13.0 11.50

最近版本 7.0

示例：


<title>属性选择符E[att^="val"]_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>li[class^="a"]{color:#f00;}</style></head><body><ul> <liclass="abc">列表项目</li> <liclass="acb">列表项目</li> <liclass="bac">列表项目</li> <liclass="bca">列表项目</li> <liclass="cab">列表项目</li> <liclass="cba">列表项目</li></ul></body></html>

运行

提交问题





参考

选


属性选择符E[att$="val"]版本：CSS3

提交问题


语法：

E[att$="val"]{sRules}

说明：

选择具有att属性且属性值为以val结尾的字符串的E元素。


兼容性：

支持版本\类型

较早版本 6.04.0 5.1 13.0 11.50

最近版本 7.0

示例：


<title>属性选择符E[att$="val"]_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>li[class$="a"]{color:#f00;}</style></head><body><ul> <liclass="abc">列表项目</li> <liclass="acb">列表项目</li> <liclass="bac">列表项目</li> <liclass="bca">列表项目</li> <liclass="cab">列表项目</li> <liclass="cba">列表项目</li></ul></body></html>

运行

提交问题





参考

选


属性选择符E[att*="val"]版本：CSS3

提交问题


语法：

E[att*="val"]{sRules}

说明：

选择具有att属性且属性值为包含val的字符串的E元素。


兼容性：

支持版本\类型

较早版本 6.04.0 5.1 13.0 11.50

最近版本 7.0

示例：


<title>属性选择符E[att*="val"]_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>li[class*="a"]{color:#f00;}</style></head><body><ul> <liclass="abc">列表项目</li> <liclass="acb">列表项目</li> <liclass="bac">列表项目</li> <liclass="bca">列表项目</li> <liclass="cab">列表项目</li> <liclass="cba">列表项目</li></ul></body></html>

运行

提交问题





参考

选


属性选择符E[att|="val"]版本：CSS2

提交问题


语法：

E[att|="val"]{sRules}

说明：

选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的

E元素。


兼容性：

支持版本\类型

较早版本 6.04.0 5.1 13.0 11.50

最近版本 7.0

示例：


<title>属性选择符E[att|="val"]_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>li[class|="test3"]{color:#f00;}</style></head><body><ul> <liclass="test1-abc">列表项目</li> <liclass="test2-abc">列表项目</li> <liclass="test3-abc">列表项目</li> <liclass="test4-abc">列表项目</li> <liclass="test5-abc">列表项目</li> <liclass="test6-abc">列表项目</li></ul></body></html>

运行

提交问题




CSS参考手册»选择符列表»伪类选择符» 其它伪类选择符

参考

选


链接伪类选择符E:link版本：CSS1

提交问题


语法：

E:link{sRules}

说明：

设置超链接a在未被访问前的样式。


兼容性：

支持版本\类型

版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>链接伪类选择符E:link_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>a:link{color:#03c;}.external:link{color:#f00;}</style></head><body><ul> <li><ahref="?"class="external">外部链接</a></li> <li><ahref="?">内部链接</a></li> <li><ahref="?"class="external">外部链接</a></li> <li><ahref="?">内部链接</a></li></ul></body></html>

运行

提交问题





参考

选


链接伪类选择符E:visited版本：CSS1

提交问题


语法：

E:visited{sRules}

说明：

设置超链接a在其链接地址已被访问过时的样式。


兼容性：

支持版本\类型

版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>链接伪类选择符E:visited_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>:link{color:#03c;}:visited{color:#f00;}</style></head><body><ul> <li><ahref="http://www.doyoe.com/"class="external">外部链接</a></li> <li><ahref="http://blog.doyoe.com/">内部链接</a></li> <li><ahref="http://demo.doyoe.com/"class="external">外部链接</a></li> <li><ahref="http://css.doyoe.com/">内部链接</a></li></ul></body></html>

运行

提交问题





参考

选


用户行为伪类选择符E:hover版本：CSS1/CSS2

提交问题


语法：

E:hover{sRules}

说明：

设置元素在其鼠标悬停时的样式。

IE6只支持a元素的:hover，从IE7开始支持其它元素的:hover。


兼容性：

支持版本\类型

较早版本 6.0#14.0 5.1 13.0 11.50

最近版本 7.0

1. IE6及更早浏览器只支持a元素的:hover，从IE7开始支持其它元素

的:hover。

示例：


<title>用户行为伪类选择符E:hover_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>h1{font-size:16px;}a,div{display:block;margin-top:10px;padding:10px;border:1pxsolid#ddd;}a:hover{display:block;background:#ddd;color:#f00;}div:hover{background:#ddd;color:#f00;}</style></head><body><h1>请将鼠标分别移动到下面2个元素上</h1><ahref="?">我是一个a</a><div>我是一个div</div></body></html>

运行

提交问题





参考

选


用户行为伪类选择符E:active版本：CSS1/CSS2

提交问题


语法：

E:active{sRules}

说明：

设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样

式。

IE6,7只支持a元素的:active，从IE8开始支持其它元素的:active。


兼容性：

支持版本\类型

较早版本 6.0-7.0#14.0 5.1 13.0 11.50

最近版本 8.0

1. IE7及更早浏览器只支持a元素的:active，从IE8开始支持其它元素

的:active。

示例：


<title>用户行为伪类选择符E:active_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>h1{font-size:16px;}a,div{display:block;margin-top:10px;padding:10px;border:1pxsolid#ddd;}a:active{display:block;background:#ddd;color:#f00;}div:active{background:#ddd;color:#f00;}</style></head><body><h1>请将分别激活(点击与释放之间)下面2个元素</h1><ahref="?">我是一个a</a><div>我是一个div</div></body></html>

运行

提交问题





参考

选


用户行为伪类选择符E:focus版本：CSS1/CSS2

提交问题


语法：

E:focus{sRules}

说明：

设置对象在成为输入焦点（该对象的onfocus事件发生）时的样式。

webkit内核浏览器会默认给:focus状态的元素加上outline的样式。


兼容性：

支持版本\类型

较早版本 6.0-7.04.0 5.1 13.0 11.50

最近版本 8.0

示例：


<title>用户行为伪类选择符E:focus_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>h1{font-size:16px;}ul{list-style:none;margin:0;padding:0;}input:focus{background:#f6f6f6;color:#f60;border:1pxsolid#f60;outline:none;}</style></head><body><h1>请聚焦到以下输入框</h1><formaction="#"> <ul> <li><inputvalue="姓名"></li> <li><inputvalue="单位"></li> <li><inputvalue="年龄"></li> <li><inputvalue="职业"></li> </ul></form></body></html>

运行

提交问题





参考

选


语言伪类选择符E:lang()版本：CSS2

提交问题


语法：

E:lang(){sRules}

说明：

匹配使用特殊语言的E元素。


兼容性：

支持版本\类型

较早版本 6.0-7.04.0 5.1 13.0 11.50

最近版本 8.0

示例：


<title>语言伪类选择符E:lang()_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>p:lang(zh-cn){color:#f00;}</style></head><body><p>大段测试文字</p></body></html>

运行

提交问题





参考

选


否定伪类选择符E:not()版本：CSS3

提交问题


语法：

E:not(){sRules}

说明：

匹配不含有s选择符的元素E。


兼容性：

支持版本\类型

较早版本 6.0-8.04.0 5.1 13.0 11.50

最近版本 9.0

示例：


<title>否定伪类选择符E:not()_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>p:not(.abc){color:#f00;}</style></head><body><pclass="abc">否定伪类选择符E:not()</p><pid="abc">否定伪类选择符E:not()</p><pclass="abcd">否定伪类选择符E:not()</p><p>否定伪类选择符E:not()</p></body></html>

运行

提交问题





参考

选


结构性伪类选择符E:root版本：CSS3

提交问题


语法：

E:root{sRules}

说明：

匹配E元素在文档的根元素。在HTML中，根元素永远是HTML


兼容性：

支持版本\类型

较早版本 6.0-8.04.0 5.1 13.0 11.50

最近版本 9.0

示例：


<title>结构性伪类选择符E:root_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>html:root{color:#f00;}</style></head><body><ul> <li>列表项一</li> <li>列表项二</li> <li>列表项三</li></ul></body></html>

运行

提交问题





参考

选


结构性伪类选择符E:first-child版本：CSS2

提交问题


语法：

E:first-child{sRules}

说明：

匹配父元素的第一个子元素E。

要使该属性生效，E对象必须是某个对象的子元素。

这里可能存在误解：

示例代码：

<ul>

<li>列表项一</li>

<li>列表项二</li>

<li>列表项三</li>

<li>列表项四</li>

</ul>

在上述代码中，如果我们要设置第一个li的样式，那么代码应该

写成li:first-child{sRules}，而不是ul:first-child{sRules}。

其它相关的伪类都如此。


兼容性：

支持版本\类型

较早版本 6.04.0 5.1 13.0 11.50

较新版本 7.0

示例：


<title>结构性伪类选择符E:first-child_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>h1{font-size:16px;}li:first-child{color:#f00;}</style></head><body><h1>注意是li:first-child，而不是ul:first-child</h1><ul> <li>结构性伪类选择符E:first-child</li> <li>结构性伪类选择符E:first-child</li> <li>结构性伪类选择符E:first-child</li> <li>结构性伪类选择符E:first-child</li></ul></body></html>

运行

提交问题





参考

选


结构性伪类选择符E:last-child版本：CSS3

提交问题


语法：

E:last-child{sRules}

说明：

匹配父元素的最后一个子元素E。



兼容性：

支持版本\类型

较早版本 6.0-8.04.0 5.1 13.0 11.50

较新版本 9.0

示例：


<title>结构性伪类选择符E:last-child_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>h1{font-size:16px;}li:last-child{color:#f00;}</style></head><body><h1>注意是li:last-child，而不是ul:last-child</h1><ul> <li>结构性伪类选择符E:last-child</li> <li>结构性伪类选择符E:last-child</li> <li>结构性伪类选择符E:last-child</li> <li>结构性伪类选择符E:last-child</li></ul></body></html>

运行

提交问题





参考

选


结构性伪类选择符E:only-child版本：CSS3

提交问题


语法：

E:only-child{sRules}

说明：

匹配父元素仅有的一个子元素E。



兼容性：

支持版本\类型

较早版本 6.0-8.04.0 5.1 13.0 11.50

较新版本 9.0

示例：


<title>结构性伪类选择符E:only-child_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>h1{font-size:16px;}li:only-child{color:#f00;}</style></head><body><h1>只有唯一一个子元素</h1><ul> <li>结构性伪类选择符E:only-child</li></ul><h1>有多个子元素</h1><ul> <li>结构性伪类选择符E:only-child</li> <li>结构性伪类选择符E:only-child</li> <li>结构性伪类选择符E:only-child</li></ul></body></html>

运行

提交问题





参考

选


结构性伪类选择符E:nth-child(n)版本：CSS3

提交问题


语法：

E:nth-child(n){sRules}

说明：

匹配父元素的第n个子元素E。



兼容性：

支持版本\类型

较早版本 6.0-8.04.0 5.1 13.0 11.50

较新版本 9.0

示例：


<title>结构性伪类选择符E:nth-child(n)_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>h1{font-size:16px;}li:nth-child(2){color:#f00;}</style></head><body><h1>第二行要变成红色<code>li:nth-child(2){color:#f00;}</code></h1><ul> <li>结构性伪类选择符E:nth-child(n)</li> <li>结构性伪类选择符E:nth-child(n)</li> <li>结构性伪类选择符E:nth-child(n)</li></ul></body></html>

运行

提交问题





参考

选


结构性伪类选择符E:nth-last-child(n)版本：CSS3

提交问题


语法：

E:nth-last-child(n){sRules}

说明：

匹配父元素的倒数第n个子元素E。



兼容性：

支持版本\类型

较早版本 6.0-8.04.0 5.1 13.0 11.50

较新版本 9.0

示例：


<title>结构性伪类选择符E:nth-last-child(n)_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>h1{font-size:16px;}li:nth-last-child(1){color:#f00;}</style></head><body><h1>最后一行要变成红色<code>li:nth-last-child(1){color:#f00;}</code></h1><ul> <li>结构性伪类选择符E:nth-last-child(n)</li> <li>结构性伪类选择符E:nth-last-child(n)</li> <li>结构性伪类选择符E:nth-last-child(n)</li></ul></body></html>

运行

提交问题





参考

选


结构性伪类选择符E:first-of-type版本：CSS3

提交问题


语法：

E:first-of-type{sRules}

说明：

匹配同类型中的第一个同级兄弟元素E。


兼容性：

支持版本\类型

较早版本 6.0-8.04.0 5.1 13.0 11.50

较新版本 9.0

示例：


<title>结构性伪类选择符E:first-of-type_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>p:first-of-type{color:#f00;}</style></head><body><divclass="test"> <div>我是一个div元素</div> <p>我是一个p元素</p> <p>我是一个p元素</p></div></body></html>

运行

提交问题





参考

选


结构性伪类选择符E:last-of-type版本：CSS3

提交问题


语法：

E:last-of-type{sRules}

说明：

匹配同类型中的最后一个同级兄弟元素E。


兼容性：

支持版本\类型

较早版本 6.0-8.04.0 5.1 13.0 11.50

较新版本 9.0

示例：


<title>结构性伪类选择符E:last-of-type_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>p:last-of-type{color:#f00;}</style></head><body><divclass="test"> <div>我是一个div元素</div> <p>我是一个p元素</p> <p>我是一个p元素</p></div></body></html>

运行

提交问题





参考

选


结构性伪类选择符E:only-of-type版本：CSS3

提交问题


语法：

E:only-of-type{sRules}

说明：

匹配同类型中的唯一的一个同级兄弟元素E。


兼容性：

支持版本\类型

较早版本 6.0-8.04.0 5.1 13.0 11.50

较新版本 9.0

示例：


<title>结构性伪类选择符E:only-of-type_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>p:only-of-type{color:#f00;}</style></head><body><divclass="test"> <p>结构性伪类选择符E:only-of-type</p></div></body></html>

运行

提交问题





参考

选


结构性伪类选择符E:nth-of-type(n)版本：CSS3

提交问题


语法：

E:nth-of-type(n){sRules}

说明：

匹配同类型中的第n个同级兄弟元素E。


兼容性：

支持版本\类型

较早版本 6.0-8.04.0 5.1 13.0 11.50

较新版本 9.0

示例：


<title>结构性伪类选择符E:nth-of-type(n)_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>p:nth-of-type(2){color:#f00;}</style></head><body><divclass="test"> <p>我是一个p元素</p> <div>我是一个div元素</div> <p>我是一个p元素</p> <p>我是一个p元素</p></div></body></html>

运行

提交问题





参考

选


结构性伪类选择符E:nth-last-of-type(n)版本：CSS3

提交问题


语法：

E:nth-last-of-type(n){sRules}

说明：

匹配同类型中的倒数第n个同级兄弟元素E。


兼容性：

支持版本\类型

较早版本 6.0-8.04.0 5.1 13.0 11.50

较新版本 9.0

示例：


<title>结构性伪类选择符E:nth-last-of-type(n)_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>p:nth-last-of-type(1){color:#f00;}</style></head><body><divclass="test"> <p>我是一个p元素</p> <div>我是一个div元素</div> <p>我是一个p元素</p> <p>我是一个p元素</p></div></body></html>

运行

提交问题





参考

选


结构性伪类选择符E:empty版本：CSS3

提交问题


语法：

E:empty{sRules}

说明：

匹配没有任何子元素（包括text节点）的元素E。


兼容性：

支持版本\类型

较早版本 6.0-8.04.0 5.1 13.0 11.50

较新版本 9.0

示例：


<title>结构性伪类选择符E:empty_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>p:empty{height:25px;border:1pxsolid#ddd;background:#eee;}</style></head><body><divclass="test"> <p>结构性伪类选择符E:empty</p> <p></p> <p>结构性伪类选择符E:empty</p></div></body></html>

运行

提交问题


参考

选


用户界面(UI)元素状态伪类选择符E:checked版本：CSS3

提交问题


语法：

E:checked{sRules}

说明：

匹配用户界面上处于选中状态的元素E。(用于inputtype为radio与

checkbox时)


兼容性：

支持版本\类型

较早版本 6.0-8.04.0 5.1 13.0 11.50

较新版本 9.0

示例：


<title>用户界面(UI)元素状态伪类选择符E:checked_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>input:checked+span{background:#f00;}input:checked+span:after{content:"我被选中了";}</style></head><body><formmethod="post"action="#"><fieldset> <legend>选中下面的项试试</legend> <ul> <li><label><inputtype="radio"name="colour-group"value="0"><span>蓝色</span></label></li> <li><label><inputtype="radio"name="colour-group"value="1"><span>红色</span></label></li> <li><label><inputtype="radio"name="colour-group"value="2"><span>黑色</span></label></li> </ul></fieldset><fieldset> <legend>选中下面的项试试</legend> <ul> <li><label><inputtype="checkbox"name="colour-group2"value="0"><span>蓝色</span></label></li> <li><label><inputtype="checkbox"name="colour-group2"value="1"><span>红色</span></label></li> <li><label><inputtype="checkbox"name="colour-group2"value="2"><span>黑色</span></label></li> </ul></fieldset></form></body></html>

运行

提交问题





参考

选


用户界面(UI)元素状态伪类选择符E:enabled版本：CSS3

提交问题


语法：

E:enabled{sRules}

说明：

匹配用户界面上处于可用状态的元素E。


兼容性：

支持版本\类型

较早版本 6.0-8.04.0 5.1 13.0 11.50

较新版本 9.0

示例：


<title>用户界面(UI)元素状态伪类选择符E:enabled_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>li{padding:3px;}input[type="text"]:enabled{border:1pxsolid#090;background:#fff;color:#000;}input[type="text"]:disabled{border:1pxsolid#ccc;background:#eee;color:#ccc;}</style></head><body><formmethod="post"action="#"><fieldset> <legend>E:enabled与E:disabled</legend> <ul> <li><inputtype="text"value="可用状态"></li> <li><inputtype="text"value="可用状态"></li> <li><inputtype="text"value="禁用状态"disabled="disabled"></li> <li><inputtype="text"value="禁用状态"disabled="disabled"></li> </ul></fieldset></form></body></html>

运行

提交问题





参考

选


用户界面(UI)元素状态伪类选择符E:disabled版本：CSS3

提交问题


语法：

E:disabled{sRules}

说明：

匹配用户界面上处于禁用状态的元素E。


兼容性：

支持版本\类型

较早版本 6.0-8.04.0 5.1 13.0 11.50

较新版本 9.0

示例：


<title>用户界面(UI)元素状态伪类选择符E:disabled_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>li{padding:3px;}input[type="text"]:enabled{border:1pxsolid#090;background:#fff;color:#000;}input[type="text"]:disabled{border:1pxsolid#ccc;background:#eee;color:#ccc;}</style></head><body><formmethod="post"action="#"><fieldset> <legend>E:enabled与E:disabled</legend> <ul> <li><inputtype="text"value="可用状态"></li> <li><inputtype="text"value="可用状态"></li> <li><inputtype="text"value="禁用状态"disabled="disabled"></li> <li><inputtype="text"value="禁用状态"disabled="disabled"></li> </ul></fieldset></form></body></html>

运行

提交问题





参考

选


目标伪类选择符E:target版本：CSS3

提交问题


语法：

E:target{sRules}

说明：

匹配相关URL指向的E元素。


兼容性：

支持版本\类型

较早版本 6.0-8.04.0 5.1 13.0 11.50

较新版本 9.0

示例：


<title>目标伪类选择符E:target_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test.hd{padding:10px0;}.test.bd.panel{width:500px;margin-top:5px;border:1pxsolid#ddd;}.test.bdh2{border-bottom:1pxsolid#ddd;}.test.bd.panel:target{border-color:#f60;}.test.bd.panel:targeth2{border-color:#f60;}h2,p{margin:0;padding:10px;font-size:16px;}</style></head><body><divclass="test"> <divclass="hd"> <ahref="#panel1">前往区块1</a> <ahref="#panel2">前往区块2</a> <ahref="#panel3">前往区块3</a> <ahref="#panel4">前往区块4</a> <ahref="#panel5">前往区块5</a> </div> <divclass="bd"> <divid="panel1"class="panel"> <h2>区块1</h2> <div><p>区块1内容</p><p>区块1内容</p><p>区块1内容</p></div> </div> <divid="panel2"class="panel"> <h2>区块2</h2> <div><p>区块2内容</p><p>区块2内容</p><p>区块2内容</p></div> </div> <divid="panel3"class="panel"> <h2>区块3</h2> <div><p>区块3内容</p><p>区块3内容</p><p>区块3内容</p></div>

运行

提交问题





参考

选


打印伪类选择符@page:first版本：CSS2

提交问题


语法：

@page:first{sRules}

说明：

设置页面容器第一页使用的样式。仅用于@page规则。


兼容性：

支持版本\类型

较早版本 6.0-7.04.0-6.0 5.1 13.0 11.50

较早版本 8.0

示例：


<title>@page:first_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>@page:first{margin:100px200px;}div{page-break-after:always;}</style></head><body><div>页面容器中第一页的外边距为100px200px</div><div>页面容器中第二页的外边距为默认值</div></body></html>

运行

提交问题





参考

选


打印伪类选择符@page:left版本：CSS2

提交问题


语法：

@page:left{sRules}

说明：

设置页面容器位于装订线左边的所有页面使用的样式。仅用于@page

规则。


兼容性：

支持版本\类型

较早版本 6.0-7.04.0-6.0 5.1 13.0 11.50

较早版本 8.0

示例：


<title>@page:left_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>@page:left{margin-left:300px;}div{page-break-after:always;}</style></head><body><div>页面容器位于装订线左边的所有页面左外边距为300px</div><div>页面容器位于装订线左边的所有页面左外边距为300px</div><div>页面容器位于装订线左边的所有页面左外边距为300px</div></body></html>

运行

提交问题





参考

选


打印伪类选择符@page:right版本：CSS2

提交问题


语法：

@page:right{sRules}

说明：

设置页面容器位于装订线右边的所有页面使用的样式。仅用于@page

规则。


兼容性：

支持版本\类型

较早版本 6.0-7.04.0-6.0 5.1 13.0 11.50

较早版本 8.0

示例：


<title>@page:right_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>@page:right{margin-right:300px;}div{page-break-after:always;}</style></head><body><div>有很长的一句话来测试页面容器位于装订线右边的所有页面左外边距为300px</div><div>有很长的一句话来测试页面容器位于装订线右边的所有页面左外边距为300px</div><div>有很长的一句话来测试页面容器位于装订线右边的所有页面左外边距为300px</div></body></html>

运行

提交问题




CSS参考手册»选择符列表»伪类选择符» 其它伪对象选择

符

选


E:first-letter/E::first-letter版本：CSS1/CSS3

提交问题


语法：

E:first-letter/E::first-letter{sRules}

说明：

设置对象内的第一个字符的样式。

此伪对象仅作用于块对象。内联对象要使用该伪对象，必须先将其设

置为块级对象。

该伪类常被用来配合font-size属性和float属性制作首字下沉效果。

IE6在使用该选择符时有个显式的BUG：选择符与包含规则的花括号

之间不能紧挨着，需留有空格或换行。同时还存在该BUG的选择符包

括：E:first-line

CSS3将伪对象选择符(Pseudo-ElementSelectors)前面的单个冒号(:)修改

为双冒号(::)用以区别伪类选择符(Pseudo-ClassesSelectors)，但以前的

写法仍然有效。

即E:first-letter可转化为E::first-letter


兼容性(E:first-letter)：

支持版本\类型

较早版本 6.0#14.0 5.1 13.0 11.50

最近版本 7.0

1. IE6及更早浏览器下，E:first-letter选择符与包含规则的花括号之间

不能紧挨着，需留有空格或换行。


兼容性(E::first-letter)：

支持版本\类型

较早版本 5.5-6.0#1

4.0 5.1 13.0 11.50较新版本 7.0-8.0

最近版本 9.0

1. IE5.5及IE6本质上并不支持E::first-letter的写法，而是忽略掉了

E::first-letter中的一个冒号，仍以E:first-letter来解释，所以它们也

变相的支持了E::first-letter。

示例：


<title>E::first-letter_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>h1{font-size:16px;}p{width:200px;padding:5px10px;border:1pxsolid#ddd;font:14px/1.5simsun,serif,sans-serif;}p:first-letter{float:left;font-size:40px;font-weight:bold;line-height:1;}p::first-letter{float:left;font-size:40px;font-weight:bold;line-height:1;}</style></head><body><h1>杂志常用的首字下沉效果</h1><p>今天，阳光明媚，晴空万里，非常适合户外活动，如踏青、远足之类的。长期坐在办公室的同学们要多注意运动。</p></body></html>

运行

提交问题





符

选


E:first-line/E::first-line版本：CSS1/CSS3

提交问题


语法：

E:first-line/E::first-line{sRules}

说明：

设置对象内的第一行的样式。

此伪对象仅作用于块对象。内联对象要使用该伪对象，必须先将其设

置为块级对象。

IE6在使用该选择符时有个显式的BUG：选择符与包含规则的花括号

之间不能紧挨着，需留有空格或换行。同时还存在该BUG的选择符包

括：E:first-letter




即E:first-line可转化为E::first-line


兼容性(E:first-line)：

支持版本\类型

较早版本 6.0#14.0 5.1 13.0 11.50

最近版本 7.0

1. IE6及更早浏览器下，E:first-line选择符与包含规则的花括号之间

不能紧挨着，需留有空格或换行。


兼容性(E::first-line)：

支持版本\类型

较早版本 5.5-6.0#1

4.0 5.1 13.0 11.50较新版本 7.0-8.0

最近版本 9.0

1. IE5.5及IE6本质上并不支持E::first-line的写法，而是忽略掉了

E::first-line中的一个冒号，仍以E:first-line来解释，所以它们也变

相的支持了E::first-line。

示例：


<title>E::first-line_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>h1{font-size:16px;}p{width:200px;padding:5px10px;border:1pxsolid#ddd;font:14px/1.5simsun,serif,sans-serif;}p:first-line{color:#090;}p::first-line{color:#090;}</style></head><body><h1>第一行文字的颜色与其它不同</h1><p>今天，阳光明媚，晴空万里，非常适合户外活动，如踏青、远足之类的。长期坐在办公室的同学们要多注意运动。</p></body></html>

运行

提交问题





符

选


E:before/E::before版本：CSS2/CSS3

提交问题


语法：

E:before/E::before{sRules}

说明：

设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content

属性一起使用




即E:before可转化为E::before


兼容性(E:before)：

支持版本\类型

较早版本 6.0-7.04.0 5.1 13.0 11.50

最近版本 8.0


兼容性(E::bofore)：

支持版本\类型

较早版本 6.0-8.04.0 5.1 13.0 11.50

较新版本 9.0

示例：


<title>E::before_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>p{position:relative;color:#f00;font-size:14px;font-size:0\9;*font-size:14px;}p:before{position:absolute;background:#fff;color:#000;content:"如果你的能看到这段文字，说明你的浏览器只支持E:before";font-size:14px;}p::before{position:absolute;background:#fff;color:#000;content:"如果你的能看到这段文字，说明你的浏览器支持E:before和E::before";font-size:14px;}</style></head><body><p>Sorry,你的浏览器不支持E:before和E::before</p></body></html>

运行

提交问题





符

选


E:after/E::after版本：CSS2/CSS3

提交问题


语法：

E:after/E::after{sRules}

说明：

设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content

属性一起使用




即E:after可转化为E::after


兼容性(E:after)：

支持版本\类型

较早版本 6.0-7.04.0 5.1 13.0 11.50

最近版本 8.0


兼容性(E::after)：

支持版本\类型

较早版本 6.0-8.04.0 5.1 13.0 11.50

较新版本 9.0

示例：


<title>E::after_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>p{position:relative;color:#f00;font-size:14px;font-size:0\9;*font-size:14px;}p:after{position:absolute;left:0;background:#fff;color:#000;content:"如果你的能看到这段文字，说明你的浏览器只支持E:after";font-size:14px;}p::after{position:absolute;left:0;background:#fff;color:#000;content:"如果你的能看到这段文字，说明你的浏览器支持E:after和E::after";font-size:14px;}</style></head><body><p>Sorry,你的浏览器不支持E:after和E::after</p></body></html>

运行

提交问题





符

选


E::selection版本：CSS3

提交问题


语法：

E::selection{sRules}

说明：

设置对象被选择时的样式。


兼容性：

支持版本\类型

较早版本 6.0-8.04.0 5.1 13.0 11.50

较新版本 9.0

写法：

内核类型写法(E::selection)

Webkit(Chrome/Safari) E::selection

Gecko(Firefox) E::-moz-selection

Presto(Opera) E::selection

Trident(IE) E::selection

示例(Firefox需将以下的代码复制到本地测试)：


<title>E::selection_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>p::-moz-selection{background:#000;color:#f00;}p::selection{background:#000;color:#f00;}</style></head><body><h1>选中下面的文字，看看它的颜色</h1><p>你选中这段文字后，看看它们的文本颜色和背景色，就能明白::selection的作用。</p></body></html>

运行

提交问题




CSS参考手册»语法与规则列表» 其它语法与规则

参考

选


!important版本：CSS1继承性：无

提交问题


语法：

Selector{sRule!important;}

说明：

提升指定样式规则的应用优先权。

IE6及以下浏览器有个比较显式的支持问题存在，!important并不覆盖

掉在同一条样式的后面的规则。请看下述代码：

示例代码：

div{color:#f00!important;color:#000;}

在上述代码中，IE6及以下浏览器div的文本颜色为

#000，!important并没有覆盖后面的规则；其它浏览器下div的文

本颜色为#f00

IE6及以下浏览器要使!important生效，可用以下代码：

示例代码：

div{color:#f00!important;}

div{color:#000;}

在上述代码中，IE6及以下浏览器中div的文本颜色表现与其它浏

览器一致，都为#f00


兼容性：

支持版本\类型

版本 6.0#14.0 5.1 13.0 11.50

版本 7.0

1. IE6及更早浏览器下，!important在同一条样式内不生效。

示例：


<title>!important_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{color:#f00!important;color:#000;}.test2{color:#f00!important;}.test2{color:#000;}</style></head><body><divclass="test">同一条样式内，!important将在IE6及以下浏览器中失效</div><divclass="test2">在分散的样式条目内，IE6及以下浏览器对!important的支持与其它浏览器一致</div></body></html>

运行

提交问题





参考

选


comment版本：CSS1

提交问题


语法：

/*这里是注释内容*/

说明：

用于注释CSS中的某些内容。


兼容性：

支持版本\类型

版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>comment_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{color:#f00;/*红色*/}</style></head><body><divclass="test">CSS中的注释语法：/*注释的内容*/</div></body></html>

运行

提交问题





参考

选


@import版本：CSS1/CSS3

提交问题


语法：

@import<url><media_query_list>

<media_query_list>：[<media_query>[','<media_query>]*]?

<media_query>：[only|not]?<media_type>[and<expression>]*|

<expression>[and<expression>]*

<expression>：'('<media_feature>[:<value>]?')'

<url>：

<media_query_list>：

取值：

使用绝对或相对地址指定导入的外部样式表文件。可以是

url(url)或者直接是一个url

指定媒体类型和查询条件。

说明：

指定导入的外部样式表及目标媒体。

该规则必须在样式表头部最先声明。并且其后的分号是必需的，如果

省略了此分号，外部样式表将无法正确导入，并会生成错误信息。

IE使用@import无法引入超过35条的样式表。

使用url(url)和直接使用url需要注意的地方：

示例代码：

@importurl("global.css");

@importurl(global.css);

@import"global.css";

以上3种方式都有效。当使用url(url)的方式时，包住路径的引号可

有可无；当直接使用url时，包住路径的引号必须保留。

指定媒体查询：

示例代码：

@importurl(example.css)screenand(min-width:800px);

@importurl(example.css)screenand(width:800px),(color);

@importurl(example.css)screenand(min-device-width:500px)and(max-device-width:1024px);


兼容性：

支持版本\类型

版本 6.0-7.0#1

4.0 5.1 13.0 11.50版本 8.0#2

版本 9.0

1. IE7及更早浏览器不支持@import指定媒体类型和媒体查询。

2. IE8不支持@import指定媒体查询。

示例：


<title>@import_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>@importurl("style.css")screen,print;</style></head><body>

</body></html>

提交问题





参考

选


@charset

@charset@charset

版本：CSS2


提交问题


语法：

@charset<charset>;

<charset>：

取值：

字符编码。如：@charset"utf-8";

说明：

在外部样式表文件内使用。指定该样式表使用的字符编码。

该规则后面的分号是必需的，如果省略了此分号，会生成错误信息。

在外部css文件中写法如下：

示例代码：

@charset"utf-8";

body{sRules}

div{sRules}

...

浅绿

=支持红色

=不支持墨绿

=部分支持橙色

=实验性质

兼容性：

支持版本\类型


版本 6.0 4.0 5.1 13.0 11.50

提交问题





参考

选


@media版本：CSS2/CSS3

提交问题


语法：

@media：<media_query_list>





<media_type>：

<expression>：

取值：

指定设备类型。媒体类型包括：参阅媒体类型。

(CSS2)

指定媒体查询使用的媒体特性。这类似于CSS属性，

如：max-width:960px。(CSS3)

说明：

指定样式表规则用于指定的媒体类型和查询条件。

IE8及以下只能实现CSS2中的部分，即只可以设置媒体类型。

媒体查询可以被用在CSS中的@media和@import规则上，也可以被用

在HTML和XML中。

示例代码：

@mediascreenand(width:800px){…}


<linkmedia="screenand(width:800px)"rel="stylesheet"href="example.css"/>

<?xml-stylesheetmedia="screenand(width:800px)"rel="stylesheet"href="example.css"?>

列举几种使用方式：

@mediaalland(width:1024px){

body{color:#f00;}

}

@mediaalland(device-height:800px){…}

@mediaalland(orientation:landscape){…}

@mediaalland(device-aspect-ratio:16/10){…}

@mediaalland(min-color:1){…}

@mediaalland(monochrome:0){…}

@mediaalland(grid:0){…}


兼容性(指定媒体类型)：

支持版本\类型

版本 6.0-8.0#14.0 5.1 13.0 11.50

版本 9.0

1. IE8及更早浏览器不支持媒体查询。

示例：


<title>@media_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test,.test2{display:none;}/*本条为CSS2部分，IE8及以下只支持本条*/@mediascreen{ body{color:#f00;}}/*下列为CSS3部分*/@mediascreenand(min-width:960px){ body{background:#999;}}@mediascreenand(device-width:1024px){ .test{display:block;}}@mediascreenand(width:1024px){ .test2{display:block;}}</style></head><body><div>MediaQueries媒体查询</div><divclass="test">如果你的显示器水平分辨率为1024px的话将能看到本条规则的效果（取决于输出设备屏幕分辨率的大小，不随包括浏览器在内的窗体大小而改变）</div><divclass="test2">如果视口宽度为1024px的话将能看到本条规则的效果（随包括浏览器在内的窗体大小而改变）</div></body></html>

运行

提交问题





参考

选


@font-face版本：CSS3

提交问题


语法：

@font-face{font-family:name;src:<url>;sRules;}

<name>：

<url>：

<sRules>：

取值：

字体名称

使用绝对或相对地址指定OpenType字体

样式表定义

说明：

设置嵌入HTML文档的字体。

通常使用.ttf(TrueType)和.otf(OpenType)两种字体格式。

嵌入HTML文档的字体是指将OpenType字体（压缩的TrueType字体）

文件映射到客户端系统，用来提供HTML文档使用该字体，或取代客

户端系统已有的同名字体。即让客户端显示客户端所没有安装的字

体。

微软的IE5已经是开始支持这个属性，但是只支持微软自有

的.eot(EmbeddedOpenType)格式，而其他浏览器直到现在都没有支持

这一字体格式。Safari从3.1开始已经可以设置.ttf(TrueType)

和.otf(OpenType)两种字体做为自定义字体了。


兼容性：

支持版本\类型

版本 6.0-8.0#14.0 5.1 13.0 11.50

版本 9.0-10.0#2

1. IE8及更早浏览器只支持微软自有的.eot(EmbeddedOpenType)格

式。

2. IE9.0-10.0部分支持ttf和otf字体格式。

示例：


<title>@font-face_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>@font-face{ font-family:YH; src:url(http://domain/fonts/MSYH.TTF);}body{font-family:'YH';}</style></head><body><div>如果你的机器没有安装微软雅黑MicrosoftYaHei，可以玩玩看。如果你用的是老版本IE，很遗憾你得找找看.eot格式的该字体</div></body></html>

运行

提交问题





参考

选


@page版本：CSS2

提交问题


语法：

@page<label><pseudo-classes>{sRules}

<label>：

<pseudo-class>：

取值：

页面标识符

打印伪类:first,:left,:right

说明：

设置页面容器的版式，方向，边空等。


兼容性：

支持版本\类型

版本 6.0-7.04.0-6.0 5.1 13.0 11.50

版本 8.0

示例：


<title>@page_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>@page:first{margin:300px;}</style></head><body><div>@page:first{margin:300px;}</div></body></html>

运行

提交问题





参考

选


@keyframes版本：CSS3

提交问题


语法：

@keyframes<identifier>'{'<keyframes-blocks>'}';

<keyframes-blocks>：[[from|to|<percentage>]{sRules}][[,from|

to|<percentage>]{sRules}]*

<identifier>：

<keyframes-blocks>：

取值：

identifier定义一个动画名称

定义动画在每个阶段的样式，即帧动画。

说明：

指定动画名称和动画效果。

@keyframes定义的动画名称用来被animation-name所使用。

定义动画时，简单的动画可以直接使用关键字from和to，即从一种状

态过渡到另一种状态：

示例代码：

@keyframestestanimations{

from{opacity:1;}

to{opacity:0;}

}

其中testanimations是该动画的名字，该动画表示某个东西将逐渐

消失。

如果复杂的动画，可以混合<percentage>去设置某个时间段内的任意

时间点的样式：

示例代码：


from{transform:translate(0,0);}

20%{transform:translate(20,20);}




to{transform:translate(100,20);}

}

当然，也可以不适用关键字from和to，而都使用<percentage>：

示例代码：








}

注意，这里的0%不能简写成0。


兼容性：

支持版本\类型

版本 6.0-9.0 4.05.1 13.0-16.0 11.50-11.60

版本 10.0 5.0-9.0

写法：

内核类型写法

Webkit(Chrome/Safari) @-webkit-keyframes

Gecko(Firefox) @-moz-keyframes

Presto(Opera)

Trident(IE) @-ms-keyframes

W3C @keyframes

示例：


<title>@keyframes_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>#sport{position:relative;width:500px;height:400px;border:1pxsolid#ddd;}#staff{position:absolute;z-index:3;bottom:10px;left:10px;overflow:hidden;width:180px;height:8px;border-radius:3px;background:#ddd;line-height:20; -moz-animation:staff3slinear; -webkit-animation:staff3slinear; -o-animation:staff3slinear; -ms-animation:staff3slinear; animation:staff3slinear;}#ball{position:absolute;z-index:3;bottom:20px;left:90px;overflow:hidden;width:30px;height:30px;border-radius:15px;box-shadow:0010pxrgba(204,102,0,.8);background:#F6D66E;background:-moz-linear-gradient(top,#fff,#F6D66E);background:-webkit-linear-gradient(top,#fff,#F6D66E);background:-o-linear-gradient(top,#fff,#F6D66E);background:-ms-linear-gradient(top,#fff,#F6D66E);background:linear-gradient(top,#fff,#F6D66E);line-height:20; -moz-animation:ball3slinear; -webkit-animation:ball3slinear; -o-animation:ball3slinear; -ms-animation:ball3slinear; animation:ball3slinear;}@-moz-keyframesball{ 0%{-moz-transform:translate(0,0);} 5%{-moz-transform:translate(-90px,-100px);} 18%{-moz-transform:translate(0,-350px);} 35%{-moz-transform:translate(200px,0);} 46%{-moz-transform:translate(380px,-160px);} 60%{-moz-transform:translate(250px,-350px);} 78%{-moz-transform:translate(60px,0);} 100%{-moz-transform:translate(0,0);}

运行

提交问题




CSS参考手册»取值列表»颜色值» 其它颜色值参考

选


ColorName版本：CSS1/CSS3

提交问题


说明：

用颜色名称来指定颜色。参阅：颜色关键字

示例：


<title>ColorName_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.foreground{color:red;}.background{background-color:gray;}</style></head><body><ulclass="test"> <liclass="foreground">红色的文字</li> <liclass="background">灰色的背景</li></ul></body></html>

运行

提交问题





选


HEX版本：CSS1

提交问题


语法：

#RRGGBB或#RGB

RR：

GG：

BB：

取值：

红色值。十六进制正整数

绿色值。十六进制正整数

蓝色值。十六进制正整数

说明：

十六进制记法

以上三个参数，取值范围为：00-FF。

参数必须是两位数。对于只有一位的，应在前面补零。

如果每个参数各自在两位上的数字都相同，那么本单位也可缩写为

#RGB的方式。例如：#FF8800可以缩写为#F80。

此色彩模式与RGB色彩模式不同。


兼容性：

支持版本\类型

版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>HEX(#RRGGBB)_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.foreground{color:#f00;}.background{background-color:#808080;}</style></head><body><ulclass="test"> <liclass="foreground">红色的文字</li> <liclass="background">灰色的背景</li></ul></body></html>

运行

提交问题





选


RGB版本：CSS2

提交问题


语法：

RGB(R,G,B)

R：

G：

B：

取值：

红色值。正整数|百分数

绿色值。正整数|百分数

蓝色值。正整数|百分数

说明：

RGB记法。

以上三个参数，正整数值的取值范围为：0-255。百分数值的取值范

围为：0.0%-100.0%。

超出范围的数值将被截至其最接近的取值极限。如：rgb(300,0,0)会被

解析为rgb(255,0,0)

正整数值255对应百分比数值100%，如：rgb(255,255,255)=

rgb(100%,100%,100%)=#FFFFFF=#FFF

RGB色彩是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化和它们相

互之间的叠加来得到各式各样的颜色的。

此RGB色彩模式与#RRGGBB/#RGB(HEX)不同。


兼容性：

支持版本\类型

版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>RGB_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.foreground{color:rgb(255,0,0);}.background{background-color:rgb(128,128,128);}.percent-color{background-color:rgb(50%,50%,50%);}</style></head><body><ulclass="test"> <liclass="foreground">红色的文字</li> <liclass="background">灰色的背景</li> <liclass="percent-color">能看到此行背景说明你的浏览器支持RGB记法使用百分数值</li></ul></body></html>

运行

提交问题





选


RGBA版本：CSS3

提交问题


语法：

RGBA(R,G,B,A)

R：

G：

B：

A：

取值：

红色值。正整数|百分数

绿色值。正整数|百分数

蓝色值。正整数|百分数

Alpha透明度。取值0~1之间。

说明：

RGBA记法。

此色彩模式与RGB相同，只是在RGB模式上新增了Alpha透明度。


兼容性：

支持版本\类型

版本 6.0-8.04.0 5.1 13.0 11.50

版本 9.0

示例：


<title>RGBA_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{background-color:rgba(0,0,0,0.5);}</style></head><body><divclass="test">能看到此行背景说明你的浏览器支持RGBA色彩值记法</div></body></html>

运行

提交问题





选


HSL版本：CSS3

提交问题


语法：

HSL(H,S,L)

H：

S：

L：

取值：

Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也

可取其他数值来指定颜色。取值为：0-360

Saturation(饱和度)。取值为：0.0%-100.0%

Lightness(亮度)。取值为：0.0%-100.0%

说明：

HSL记法。


兼容性：

支持版本\类型

版本 6.0-8.04.0 5.1 13.0 11.50

版本 9.0

示例：


<title>HSL_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{background-color:hsl(360,50%,50%);}</style></head><body><divclass="test">能看到此行背景说明你的浏览器支持HSL色彩记法</div></body></html>

运行

提交问题





选


HSLA版本：CSS3

提交问题


语法：

HSLA(H,S,L,A)

H：

S：

L：

A：

取值：

Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也

可取其他数值来指定颜色。取值为：0-360

Saturation(饱和度)。取值为：0.0%-100.0%

Lightness(亮度)。取值为：0.0%-100.0%

Alpha透明度。取值0~1之间。

说明：

HSL记法。

此色彩模式与HSL相同，只是在HSL模式上新增了Alpha透明度。


兼容性：

支持版本\类型

版本 6.0-8.04.0 5.1 13.0 11.50

版本 9.0

示例：


<title>HSL_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{background-color:hsla(360,50%,50%,0.5);}</style></head><body><divclass="test">能看到此行背景说明你的浏览器支持HSLA色彩记法</div></body></html>

运行

提交问题





选


transparent版本：CSS1/CSS3

提交问题


说明：

用来指定全透明色彩。

transparent是全透明黑色(black)的速记法，即一个类似rgba(0,0,0,0)这样

的值。

在CSS1中，transparent被用来作为background-color的一个参数值，用

于表示背景透明。

在CSS2中，border-color也开始接受transparent作为参数值，《Open

eBook(tm)PublicationStructure1.0.1》[OEB101]延伸到color也接受

transparent作为参数值。IE6不支持border的颜色为transparent，边框色

会显示为黑色。

在CSS3中，transparent被延伸到任何一个有color值的属性上。IE8及以

下，color属性值为transparent时，文本显示为黑色。


兼容性：

支持版本\类型

版本 6.0#1

4.0 5.1 13.0 11.50版本 7.0-8.0#2

版本 9.0

1. IE6及更早浏览器只有background-color接受transparent取值。

2. IE7及IE8除了background-color，还有border-color也开始接受

transparent取值。

示例：


<title>transparent_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{color:transparent;border:1pxsolidtransparent;background:transparent;}</style></head><body><divclass="test">看看各带color的属性设置为transparent时的效果</div></body></html>

运行

提交问题




CSS参考手册»取值列表»文本值» 其它文本值参考

选


<string>

<string><string>

版本：CSS2


提交问题


说明：

字符串(含转义字符串)。

字符串可以由双引号或单引号包起来。

转义字符串由反斜杠(\)开始，如：\',\"

2个常规字符串例子。请看下述代码：

示例代码：

div:after{content:'任意字符串';}

a[title="external"]{/*...*/}

2个转义字符串例子。请看下述代码：

示例代码：

div:after{content:'任意字符串\'String\'';}

div{font-family:'\5b8b\4f53';}/*\5b8b\4f53=宋体*/

浅绿

=支持红色

=不支持墨绿

=部分支持橙色

=实验性质

兼容性：

支持版本\类型


版本 6.0 4.0 5.1 13.0 11.50

提交问题





选


<url>

<url><url>

版本：CSS2


提交问题


说明：

在网页上提供一个资源地址。（图像，声频，视频或浏览器支持的其

他任何资源）

<url>中的资源地址可以由单引号或双引号包起来，也可以不用任何引

号。

示例代码：

div{background:url("1.gif");}

div{background:url(1.gif);}

以上2个定义是等价的。

使用在@import上时，甚至url()都可以省略，而直接是一个资源地址。

示例代码：

@importurl("global.css");

@importurl(global.css);

@import"global.css";

以上3种方式都有效。

浅绿

=支持红色

=不支持墨绿

=部分支持橙色

=实验性质

兼容性：

支持版本\类型


版本 6.0 4.0 5.1 13.0 11.50

提交问题





选


<identifier>

<identifier><identifier>

版本：CSS2


提交问题


说明：

使用用户自定义标识名作为组件取值。

自定义标识区分大小写，例如test与TEST是2个不同的值

自定义标识不能使用与CSS属性及属性值相同的名字

正常工作的例子：

示例代码：

li{counter-increment:testname;}

li{counter-reset:testname2;}


from{opacity:1;}

to{opacity:0;}

}

无法工作的例子：

示例代码：

li{counter-increment:border;}

li{counter-reset:background;}

@keyframesauto{

from{opacity:1;}

to{opacity:0;}

}

浅绿

=支持红色

=不支持墨绿

=部分支持橙色

=实验性质

兼容性：

支持版本\类型


版本 6.0-7.04.0 5.1 13.0 11.50

版本 8.0

提交问题




CSS参考手册»取值列表»函数值» 其它函数值参考

选


counter()版本：CSS2

提交问题


说明：

插入计数器。

在CSS2.1中counter()只能被使用在content属性上。


兼容性：

支持版本\类型

版本 6.0-7.04.0 5.1 13.0 11.50

版本 8.0

示例：


<title>counter()函数_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>ol{margin:0;padding:0;list-style:none;}olol{margin-left:2em;}olli{counter-increment:item;}olli:before{content:counter(item)".";color:#f00;}ollili{counter-increment:item2;}ollili:before{content:counter(item)"."counter(item2)".";}ollilili{counter-increment:item3;}ollilili:before{content:counter(item)"."counter(item2)"."counter(item3)".";}</style></head><body><olclass="test"> <li>Node1 <ol> <li>Node1.1 <ol> <li>Node1.1.1</li> <li>Node1.1.2</li> <li>Node1.1.3</li> </ol> </li> <li>Node1.2</li> </ol> </li> <li>Node2</li> <li>Node3</li></ol></body></html>

运行

提交问题





选


attr()版本：CSS2/CSS3

提交问题


说明：

插入元素的属性值。

在CSS2.1中attr()总是返回一个字符串。在CSS3中attr()可以返回多种不

同的类型。

写本文档时尚无浏览器支持该CSS3定义的attr()。

在CSS2.1中可以这样使用：

示例代码：

div:after{content:attr(title);}

在CSS3中甚至可以这样：

示例代码：

div{width:attr(width,px,auto);}


兼容性：

支持版本\类型

版本 6.0-7.04.0 5.1 13.0 11.50

版本 8.0

示例：


<title>attr()函数_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>div:after{content:attr(title);}</style></head><body><divtitle="在支持content属性的浏览器中能看到我被显示了"></div></body></html>

运行

提交问题





选


calc()版本：CSS3

提交问题


说明：

用于动态计算长度值。

任何长度值都可以使用calc()函数进行计算。

calc()函数支持+,-,*,/,mod运算，以后还可能加入对min()/max()等运

算。


兼容性：

支持版本\类型

版本 6.0-8.04.0 5.1 13.0-16.0 11.50-11.60

版本 9.0

写法：

内核类型写法


Gecko(Firefox) -moz-calc()

Presto(Opera)

Trident(IE) calc()

W3C calc()

示例：


<title>calc()函数_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{width:-moz-calc(100%-50px);width:calc(100%-50px);background:#eee;}</style></head><body><divclass="test">我的宽度为100%-50px</div></body></html>

运行

提交问题





选


min()

min()min()

版本：CSS3


提交问题


说明：

用于比较数值的大小并取出最小的那个。

写本文档时尚无浏览器支持该min()。

如何使用：

示例代码：

div{font-size:min(30px,3em);}

div{width:min(10%+20px,300px);}

浅绿

=支持红色

=不支持墨绿

=部分支持橙色

=实验性质

兼容性：

支持版本\类型


版本 6.0-9.0 4.0-9.0 5.1 13.0-16.011.50-11.60

提交问题





选


max()

max()max()

版本：CSS3


提交问题


说明：

用于比较数值的大小并取出最大的那个。

写本文档时尚无浏览器支持该max()。

如何使用：

示例代码：

div{font-size:max(30px,3em);}

div{width:max(10%+20px,300px);}

浅绿

=支持红色

=不支持墨绿

=部分支持橙色

=实验性质

兼容性：

支持版本\类型


版本 6.0-9.0 4.0-9.0 5.1 13.0-16.011.50-11.60

提交问题





选


cycle()

cycle()cycle()

版本：CSS3


提交问题


说明：

允许子孙元素使用取值序列中的值循环替换继承而来的值。

如何使用：

示例代码：

ul{list-style-type:disk;}

li>ul{list-style-type:cycle(disk,circle,square,box);}

在上述代码中，定义一个多级的ul，第一级使用diskmarkers，子

孙级依次使用circle,square,box。

浅绿

=支持红色

=不支持墨绿

=部分支持橙色

=实验性质

兼容性：

支持版本\类型


版本 6.0-9.0 4.0-9.0 5.1 13.0-16.011.50-11.60

提交问题




CSS参考手册»取值列表»图像值» 其它图像值参考

选


linear-gradient()版本：CSS3

提交问题


语法：

<linear-gradient>：linear-gradient([<point>,]?<color-stop>[,<color-

stop>]+);

<point>：[left|right]?[top|bottom]?||<angle>?

<color-stop>：<color>[<length>|<percentage>]?

left：

right：

top：

bottom：

<angle>：

<color-stop>：

<color>：

<length>：

<percentage>：

取值：

<point>

设置左边为渐变起点的横坐标值。

设置右边为渐变起点的横坐标值。

设置顶部为渐变起点的纵坐标值。

设置底部为渐变起点的纵坐标值。

用角度值指定渐变的方向（或角度）。

指定渐变的起止颜色。

<color-stop>

指定颜色。请参阅颜色值

用长度值指定起止色位置。不允许负值

用百分比指定起止色位置。

（图一）

说明：

用线性渐变创建图像。

写本文档时Firefox,Chrome,Opera已经在实验性质阶段支持了该属性，

Safari对该属性的支持仍停留在以私有方式实现的阶段（可参阅页面底

部的示例代码）。

Firefox还支持使用<percentage>、<length>和center特殊值定义渐变起

点，并支持起点与角度一起使用。

示例代码：

linear-gradient(#fff,#333);

linear-gradient(top,#fff,#333);

linear-gradient(bottom,#333,#fff);

linear-gradient(-90deg,#fff,#333);

以上几句代码都可以实现如（图一）的渐变效果


兼容性：

支持版本\类型

版本 6.0-9.04.0 5.1 13.0 11.50

版本 10.0

写法：

内核类型写法

Webkit(Chrome/Safari) -webkit-linear-gradient()/-webkit-gradient()

Gecko(Firefox) -moz-linear-gradient()

Presto(Opera) -o-linear-gradient()

Trident(IE) -ms-linear-gradient()

W3C linear-gradient()

示例：


<title>linear-gradient()_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>div{width:200px;height:100px;margin-top:10px;border:1pxsolid#ddd;}.test{background:-moz-linear-gradient(#fff,#333);background:-webkit-gradient(linear,centertop,centerbottom,from(#fff),to(#333));background:-webkit-linear-gradient(#fff,#333);background:-o-linear-gradient(#fff,#333);background:-ms-linear-gradient(#fff,#333);background:linear-gradient(#fff,#333);}.test2{background:-moz-linear-gradient(#000,#f0050%,#090);background:-webkit-gradient(linear,centertop,centerbottom,from(#000),color-stop(.5,#f00),to(#090));background:-webkit-linear-gradient(#000,#f0050%,#090);background:-o-linear-gradient(#000,#f0050%,#090);background:-ms-linear-gradient(#000,#f0050%,#090);background:linear-gradient(#000,#f0050%,#090);}.test3{background:-moz-linear-gradient(leftcenter,#00020%,#f0050%,#09080%);background:-webkit-gradient(linear,leftcenter,rightcenter,color-stop(.2,#000),color-stop(.5,#f00),color-stop(.8,#090));background:-webkit-linear-gradient(0deg,#00020%,#f0050%,#09080%);background:-o-linear-gradient(0deg,#00020%,#f0050%,#09080%);background:-ms-linear-gradient(0deg,#00020%,#f0050%,#09080%);background:linear-gradient(0deg,#00020%,#f0050%,#09080%);}.test4{background:-moz-linear-gradient(45deg,#000,#f0050%,#090);background:-webkit-gradient(linear,leftbottom,righttop,from(#000),color-stop(.5,#f00),to(#090));background:-webkit-linear-gradient(45deg,#000,#f0050%,#090);background:-o-linear-gradient(45deg,#000,#f0050%,#090);background:-ms-linear-gradient(45deg,#000,#f0050%,#090);background:linear-gradient(45deg,#000,#f0050%,#090);}</style></head><body><divclass="test"></div><divclass="test2"></div><divclass="test3"></div><divclass="test4"></div></body></html>

运行

提交问题





选


radial-gradient()版本：CSS3

提交问题


语法：

<radial-gradient>：radial-gradient([<position>,]?[[<shape>||<size>]|

<shape-size>{2},]?<color-stop>[,<color-stop>]+);

<position>：[<length>①|<percentage>①|left|center①|right]?[<length>②|<percentage>②|top|center②|bottom]?<shape>：circle|ellipse

<size>：closest-side|closest-corner|farthest-side|farthest-corner|

contain|cover

<shape-size>：<length>|<percentage>


<percentage>①：

<length>①：left：


<percentage>②：

<length>②：top：


<color-stop>：

circle：

ellipse：

closest-side：

closest-corner：

farthest-side：

farthest-corner：

contain：

取值：

<position>

用百分比指定径向渐变圆心的横坐标值。可以为负

值。

用长度值指定径向渐变圆心的横坐标值。可以为负值。

设置左边为径向渐变圆心的横坐标值。

设置中间为径向渐变圆心的横坐标值。

设置右边为径向渐变圆心的横坐标值。

用百分比指定径向渐变圆心的纵坐标值。可以为负

值。

用长度值指定径向渐变圆心的纵坐标值。可以为负值。

设置顶部为径向渐变圆心的纵坐标值。

设置中间为径向渐变圆心的纵坐标值。

设置底部为径向渐变圆心的纵坐标值。


<shape>

指定圆形的径向渐变

指定椭圆形的径向渐变。写本文档时Chrome,Safari尚不支持

该参数值

<size>

指定径向渐变的半径长度为从圆心到离圆心最近的边

指定径向渐变的半径长度为从圆心到离圆心最近的角

指定径向渐变的半径长度为从圆心到离圆心最远的边

指定径向渐变的半径长度为从圆心到离圆心最远的角

包含，指定径向渐变的半径长度为从圆心到离圆心最近的

cover：

<percentage>：

<length>：

<color>：

<length>：

<percentage>：

点。类同于closest-side

覆盖，指定径向渐变的半径长度为从圆心到离圆心最远的点。

类同于farthest-corner

<shape-size>

写本文档时Firefox尚不支持<shape-size>

用百分比指定径向渐变的横向或纵向直径长度，并根

据横向和纵向的直径来确定是圆或椭圆。不允许负值。

用长度值指定径向渐变的横向或纵向直径长度，并根据横

向和纵向的直径来确定是圆或椭圆。不允许负值。

<color-stop>




（图一）

说明：

用径向渐变创建图像。

写本文档时Firefox和Chrome已经在实验性质阶段支持了该属性，

Safari对该属性的支持仍停留在以私有方式实现的阶段。

示例代码：

radial-gradient(circle,#f00,#ff0,#080);

radial-gradient(center,circle,#f00,#ff0,#080);

radial-gradient(50%,circle,#f00,#ff0,#080);

radial-gradient(circle,#f000%,#ff050%,#080100%);

radial-gradient(circlecover,#f00,#ff0,#080);



兼容性：

支持版本\类型

版本 6.0-9.04.0 5.1 13.0

11.50-11.51

版本 10.0 11.60

写法：

内核类型写法

Webkit(Chrome/Safari) -webkit-radial-gradient()/-webkit-gradient()

Gecko(Firefox) -moz-radial-gradient()

Presto(Opera) -o-radial-gradient()

Trident(IE) -ms-radial-gradient()

W3C radial-gradient()

示例：


<title>radial-gradient()_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>div{width:200px;height:100px;margin-top:10px;border:1pxsolid#ddd;}.test{background:-moz-radial-gradient(centercenter,circle,#f00,#ff0,#080);background:-webkit-radial-gradient(centercenter,circle,#f00,#ff0,#080);background:-o-radial-gradient(centercenter,circle,#f00,#ff0,#080);background:-ms-radial-gradient(centercenter,circle,#f00,#ff0,#080);background:radial-gradient(centercenter,circle,#f00,#ff0,#080);}.test2{background:-moz-radial-gradient(circlecontain,#f00,#ff0,#080);background:-webkit-radial-gradient(circlecontain,#f00,#ff0,#080);background:-o-radial-gradient(circlecontain,#f00,#ff0,#080);background:-ms-radial-gradient(circlecontain,#f00,#ff0,#080);background:radial-gradient(circlecontain,#f00,#ff0,#080);}.test3{background:-moz-radial-gradient(lefttop,cover,#f0020%,#ff050%,#08080%);background:-webkit-radial-gradient(lefttop,cover,#f0020%,#ff050%,#08080%);background:-o-radial-gradient(lefttop,cover,#f0020%,#ff050%,#08080%);background:-ms-radial-gradient(lefttop,cover,#f0020%,#ff050%,#08080%);background:radial-gradient(lefttop,cover,#f0020%,#ff050%,#08080%);}.test4{background:-moz-radial-gradient(90%50px,closest-side,#f00,#ff0,#080);background:-webkit-radial-gradient(90%50px,closest-side,#f00,#ff0,#080);background:-o-radial-gradient(90%50px,closest-side,#f00,#ff0,#080);background:-ms-radial-gradient(90%50px,closest-side,#f00,#ff0,#080);background:radial-gradient(90%50px,closest-side,#f00,#ff0,#080);}</style></head><body><divclass="test"></div><divclass="test2"></div><divclass="test3"></div><divclass="test4"></div></body></html>

运行

提交问题





选


repeating-linear-gradient()版本：CSS3

提交问题


语法：

<repeating-linear-gradient>：repeating-linear-gradient([<point>,]?

<color-stop>[,<color-stop>]+);

<point>：[left|right]?[top|bottom]?||<angle>?


left：

right：

top：

bottom：

<angle>：

<color-stop>：

<color>：

<length>：

<percentage>：

取值：

<point>

设置左边为渐变起点的横坐标值。

设置右边为渐变起点的横坐标值。

设置顶部为渐变起点的纵坐标值。

设置底部为渐变起点的纵坐标值。

用角度值指定渐变的方向（或角度）。


<color-stop>




（图一）

说明：

用重复的线性渐变创建图像。

repeating-linear-gradient()的语法与linear-gradient()相同。

写本文档时Firefox,Chrome,Opera已经在实验性质阶段支持了该属性，


Firefox还支持使用<percentage>、<length>和center特殊值定义渐变起

点，并支持起点与角度一起使用。

示例代码：

repeating-linear-gradient(#f00,#ff010%,#f0015%);

repeating-linear-gradient(top,#f00,#ff010%,#f0015%);

repeating-linear-gradient(-90deg,#f00,#ff010%,#f0015%);

repeating-linear-gradient(270deg,#f00,#ff010%,#f0015%);



兼容性：

支持版本\类型

版本 6.0-9.04.0 5.1 13.0 11.50

版本 10.0

写法：

内核类型写法

Webkit(Chrome/Safari) -webkit-repeating-linear-gradient()

Gecko(Firefox) -moz-repeating-linear-gradient()

Presto(Opera) -o-repeating-linear-gradient()

Trident(IE) -ms-repeating-linear-gradient()

W3C repeating-linear-gradient()

示例：


<title>repeating-linear-gradient()_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>div{width:200px;height:100px;margin-top:10px;border:1pxsolid#ddd;}.test{background:-moz-repeating-linear-gradient(#f00,#ff010%,#f0015%);background:-webkit-repeating-linear-gradient(#f00,#ff010%,#f0015%);background:-o-repeating-linear-gradient(#f00,#ff010%,#f0015%);background:-ms-repeating-linear-gradient(#f00,#ff010%,#f0015%);background:repeating-linear-gradient(#f00,#ff010%,#f0015%);}.test2{background:-moz-repeating-linear-gradient(lefttop,#f00,#ff010%,#f0015%);background:-webkit-repeating-linear-gradient(lefttop,#f00,#ff010%,#f0015%);background:-o-repeating-linear-gradient(lefttop,#f00,#ff010%,#f0015%);background:-ms-repeating-linear-gradient(lefttop,#f00,#ff010%,#f0015%);background:repeating-linear-gradient(lefttop,#f00,#ff010%,#f0015%);}.test3{background:-moz-repeating-linear-gradient(0deg,#f00,#ff010%,#f0015%);background:-webkit-repeating-linear-gradient(0deg,#f00,#ff010%,#f0015%);background:-o-repeating-linear-gradient(0deg,#f00,#ff010%,#f0015%);background:-ms-repeating-linear-gradient(0deg,#f00,#ff010%,#f0015%);background:repeating-linear-gradient(0deg,#f00,#ff010%,#f0015%);}.test4{background:-moz-repeating-linear-gradient(45deg,#f00,#ff010%,#f0015%);background:-webkit-repeating-linear-gradient(45deg,#f00,#ff010%,#f0015%);background:-o-repeating-linear-gradient(45deg,#f00,#ff010%,#f0015%);background:-ms-repeating-linear-gradient(45deg,#f00,#ff010%,#f0015%);background:repeating-linear-gradient(45deg,#f00,#ff010%,#f0015%);}</style></head><body><divclass="test"></div><divclass="test2"></div><divclass="test3"></div><divclass="test4"></div></body></html>

运行

提交问题





选


repeating-radial-gradient()版本：CSS3

提交问题


语法：

<repeating-radial-gradient>：repeating-radial-gradient([<position>,]?[[

<shape>||<size>]|<shape-size>{2},]?<color-stop>[,<color-stop>]+);

<position>：[<length>①|<percentage>①|left|center①|right]?[<length>②|<percentage>②|top|center②|bottom]?<shape>：circle|ellipse

<size>：closest-side|closest-corner|farthest-side|farthest-corner|

contain|cover

<shape-size>：<length>|<percentage>


<percentage>①：

<length>①：left：


<percentage>②：

<length>②：top：


<color-stop>：

circle：

ellipse：

closest-side：

closest-corner：

farthest-side：

farthest-corner：

contain：

取值：

<position>

用百分比指定径向渐变圆心的横坐标值。可以为负

值。

用长度值指定径向渐变圆心的横坐标值。可以为负值。

设置左边为径向渐变圆心的横坐标值。

设置中间为径向渐变圆心的横坐标值。

设置右边为径向渐变圆心的横坐标值。

用百分比指定径向渐变圆心的纵坐标值。可以为负

值。

用长度值指定径向渐变圆心的纵坐标值。可以为负值。

设置顶部为径向渐变圆心的纵坐标值。

设置中间为径向渐变圆心的纵坐标值。

设置底部为径向渐变圆心的纵坐标值。


<shape>

指定圆形的径向渐变

指定椭圆形的径向渐变。写本文档时Chrome,Safari尚不支持

该参数值

<size>

指定径向渐变的半径长度为从圆心到离圆心最近的边

指定径向渐变的半径长度为从圆心到离圆心最近的角

指定径向渐变的半径长度为从圆心到离圆心最远的边

指定径向渐变的半径长度为从圆心到离圆心最远的角

包含，指定径向渐变的半径长度为从圆心到离圆心最近的

cover：

<percentage>：

<length>：

<color>：

<length>：

<percentage>：

点。类同于closest-side

覆盖，指定径向渐变的半径长度为从圆心到离圆心最远的点。

类同于farthest-corner

<shape-size>

写本文档时Firefox尚不支持<shape-size>

用百分比指定径向渐变的横向或纵向直径长度，并根

据横向和纵向的直径来确定是圆或椭圆。不允许负值。

用长度值指定径向渐变的横向或纵向直径长度，并根据横

向和纵向的直径来确定是圆或椭圆。不允许负值。

<color-stop>




（图一）

说明：

用重复的径向渐变创建图像。

repeating-radial-gradient()的语法与radial-gradient()相同。

写本文档时Firefox和Chrome已经在实验性质阶段支持了该属性，


示例代码：

repeating-radial-gradient(circlecontain,#f00,#ff010%,#f0015%);


兼容性：

支持版本\类型

版本 6.0-9.04.0 5.1 13.0

11.50-11.51

版本 10.0 11.60

写法：

内核类型写法

Webkit(Chrome/Safari) -webkit-repeating-radial-gradient()

Gecko(Firefox) -moz-repeating-radial-gradient()

Presto(Opera) -o-repeating-radial-gradient()

Trident(IE) -ms-repeating-radial-gradient()

W3C repeating-radial-gradient()

示例：


<title>repeating-radial-gradient()_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>div{width:200px;height:100px;margin-top:10px;border:1pxsolid#ddd;}.test{background:-moz-repeating-radial-gradient(circle,#f000,#ff010%,#f0015%);background:-webkit-repeating-radial-gradient(circle,#f000,#ff010%,#f0015%);background:-o-repeating-radial-gradient(circle,#f000,#ff010%,#f0015%);background:repeating-radial-gradient(circle,#f000,#ff010%,#f0015%);}.test2{background:-moz-repeating-radial-gradient(00,#f00,#ff010%,#08015%,#ff020%,#f0025%);background:-webkit-repeating-radial-gradient(00,#f00,#ff010%,#08015%,#ff020%,#f0025%);background:-o-repeating-radial-gradient(00,#f00,#ff010%,#08015%,#ff020%,#f0025%);background:repeating-radial-gradient(00,#f00,#ff010%,#08015%,#ff020%,#f0025%);}.test3{background:-moz-repeating-radial-gradient(20px50px,circlecontain,#f00,#ff010%,#08020%,#ff030%,#f0040%);background:-webkit-repeating-radial-gradient(20px50px,circlecontain,#f00,#ff010%,#08020%,#ff030%,#f0040%);background:-o-repeating-radial-gradient(20px50px,circlecontain,#f00,#ff010%,#08020%,#ff030%,#f0040%);background:repeating-radial-gradient(20px50px,circlecontain,#f00,#ff010%,#08020%,#ff030%,#f0040%);}</style></head><body><divclass="test"></div><divclass="test2"></div><divclass="test3"></div></body></html>

运行

提交问题




CSS参考手册»取值列表»数字值» 其它数字值参考

选


<number>

<number><number>

版本：CSS1


提交问题


说明：

浮点数。

Number值可能是约束在一定范围内的，如果超过了这个范围，申明将

被忽略。

列举几个使用场景。请看下述代码：

示例代码：

div{line-height:1.5;}

div{opacity:0.5;}

在上述代码中，opacity属性的值就是被约束在[0.0-1.0]这个范围

内的，如果超过了这个范围，其计算结果将截取到与之最相近的

值。

浅绿

=支持红色

=不支持墨绿

=部分支持橙色

=实验性质

兼容性：

支持版本\类型


版本 6.0 4.0 5.1 13.0 11.50

提交问题




CSS参考手册»取值列表»数字值» 其它数字值参考

选


<integer>

<integer><integer>

版本：CSS1


提交问题


说明：

整数。

Integer值可能是约束在一定范围内的，如果超过了这个范围，申明将

被忽略。

列举几个使用场景。请看下述代码：

示例代码：

div{z-index:10;}

浅绿

=支持红色

=不支持墨绿

=部分支持橙色

=实验性质

兼容性：

支持版本\类型


版本 6.0 4.0 5.1 13.0 11.50

提交问题




CSS参考手册»取值列表»其它值» 其它取值参考

选


<length>

<length><length>

版本：CSS1


提交问题


说明：

<number>接长度单位。

特殊值0可以省略单位。例如：margin:0px可以写成margin:0

一些属性可能允许有负长度值，或者有一定的范围限制。如果不支持

负长度值，那应该变换到能够被支持的最近的一个长度值。

长度单位包括包括：相对单位和绝对单位。

相对长度单位包括有：em,ex,ch,rem,vw,vh,vm,%

绝对长度单位包括有：cm,mm,in,pt,pc,px

浅绿

=支持红色

=不支持墨绿

=部分支持橙色

=实验性质

兼容性：

支持版本\类型


版本 6.0 4.0 5.1 13.0 11.50

提交问题





选


<percentage>

<percentage><percentage>

版本：CSS1


提交问题


说明：

<number>接%

百分比总是相对于另外一个值才存在的。

示例代码：

div{font-size:12px;}

div.test{font-size:200%;}

百分比的单位是：%

浅绿

=支持红色

=不支持墨绿

=部分支持橙色

=实验性质

兼容性：

支持版本\类型


版本 6.0 4.0 5.1 13.0 11.50

提交问题





选


<angle>

<angle><angle>

版本：CSS3


提交问题


说明：

<number>接角度单位。

角度值的正常范围应在[0-360deg]内，例如：-10deg与350deg是等价的

角度单位包括有：deg,grad,rad,turn

浅绿

=支持红色

=不支持墨绿

=部分支持橙色

=实验性质

兼容性：

支持版本\类型


较早版本

6.0-8.04.0 5.1 13.0 11.50

较新版本

9.0

提交问题





选


<time>

<time><time>

版本：CSS3


提交问题


说明：

<number>接时间单位。

时间值不允许有负值。

时间单位包括有：ms,s

单位换算：1s=1000ms

浅绿

=支持红色

=不支持墨绿

=部分支持橙色

=实验性质

兼容性：

支持版本\类型


版本 6.0-8.04.0 5.1 13.0 11.50

版本 9.0

提交问题





选


<frequency>

<frequency><frequency>

版本：CSS3


提交问题


说明：

<number>接频率单位。

频率值不允许有负值。

频率单位包括有：Hz,kHz

举例说明：200Hz(或200hz)表示一个低音，6kHz(或6khz)表示一个高

音。

单位换算：1kHz=1000Hz

浅绿

=支持红色

=不支持墨绿

=部分支持橙色

=实验性质

兼容性：

支持版本\类型


版本 6.0-9.0 4.0-6.0 5.1 13.0 11.50

提交问题





选


<fraction>

<fraction><fraction>

版本：CSS3


提交问题


说明：

<number>接剩余空间数单位。

浅绿

=支持红色

=不支持墨绿

=部分支持橙色

=实验性质

兼容性：

支持版本\类型


版本 6.0-9.0 4.0-6.0 5.1 13.011.50-11.51

提交问题





选


<grid>

<grid><grid>

版本：CSS3


提交问题


说明：

<number>接网格数单位。

网格由不可见的横向和纵向线条组成用来对齐内容。在CSS3中，网格

可以被隐式或显式的创建。网格线间的距离由fr来设定。

浅绿

=支持红色

=不支持墨绿

=部分支持橙色

=实验性质

兼容性：

支持版本\类型


版本 6.0-9.0 4.0-6.0 5.1 13.011.50-11.51

提交问题




CSS参考手册»单位列表»长度单位» 其它长度单位参

考

选


em版本：CSS1

提交问题


说明：

相对长度单位。相对于当前对象内文本的字体尺寸。

如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认

字体尺寸。


兼容性：

支持版本\类型

版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>em_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>body{font-size:14px;}h1{font-size:16px;}.size1p{font-size:1em;}.size2p{font-size:2em;}.size3p{font-size:3em;}</style></head><body><h1>假定当前默认字体尺寸是14px，nem即为14px字体尺寸的n倍：</h1><ul> <liclass="size1"> <strong>1em</strong>: <p>1em大小的文字</p> </li> <liclass="size2"> <strong>2em</strong>: <p>2em大小的文字</p> </li> <liclass="size3"> <strong>3em</strong>: <p>3em大小的文字</p> </li></ul></body></html>

运行

提交问题





考

选


ex版本：CSS1

提交问题


说明：

相对长度单位。相对于字符“x”的高度。通常为字体高度的一半。

如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认

字体尺寸。


兼容性：

支持版本\类型

版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>ex_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>h1{margin:10px0;font-size:16px;}.x{overflow:hidden;height:1ex;background:#aaa;}</style></head><body><h1>定义一条与字母x高度相同的线：</h1><div>xxxx</div><divclass="x"></div></body></html>

运行

提交问题





考

选


ch版本：CSS3

提交问题


说明：

数字“0”的宽度


兼容性：

支持版本\类型

版本 6.0-8.04.0 5.1 13.0-16.0 11.50-11.60

版本 9.0

示例：


<title>ch_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>h1{margin:10px0;font-size:16px;}div{overflow:hidden;width:10ch;background:#ccc;}</style></head><body><h1>定义一个宽度正好能装下10个0的容器：</h1><div>0000000000</div></body></html>

运行

提交问题





考

选


rem版本：CSS3

提交问题


说明：

相对长度单位。相对于根元素(即html元素)font-size计算值的倍数


兼容性：

支持版本\类型

版本 6.0-8.04.0 5.1 13.0

11.50-11.51

版本 9.0 11.60

示例：


<title>rem_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>html,h1{font-size:12px;}p{font-size:2rem;}</style></head><body><h1>下面的文字将是html定义的字体大小的2倍：</h1><p>我是html定义的12px的2倍，字体大小为24px</p></body></html>

运行

提交问题





考

选


vw版本：CSS3

提交问题


说明：

相对于视口的宽度。视口被均分为100单位的vw

示例代码：

h1{font-size:8vw;}

如果视口的宽度是200mm，那么上述代码中h1元素的字号将为

16mm，即(8x200)/100


兼容性：

支持版本\类型

版本 6.0-8.04.0-9.0 5.1 13.0-16.0 11.50-11.60

版本 9.0

示例：


<title>vw_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>p{font-size:5vw;}</style></head><body><p>相对于viewport宽度大小的文字</p></body></html>

运行

提交问题





考

选


vh版本：CSS3

提交问题


说明：

相对于视口的高度。视口被均分为100单位的vh

示例代码：

h1{font-size:8vh;}

如果视口的高度是200mm，那么上述代码中h1元素的字号将为

16mm，即(8x200)/100


兼容性：

支持版本\类型

版本 6.0-8.04.0-9.0 5.1 13.0-16.0 11.50-11.60

版本 9.0

示例：


<title>vh_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>p{font-size:5vh;}</style></head><body><p>相对于viewport高度大小的文字</p></body></html>

运行

提交问题





考

选


vm版本：CSS3

提交问题


说明：

相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100

单位的vm

CSS3中已经定义了min()函数，所以vm最终是否会纳入W3C标准还不

确定。

示例代码：

h1{font-size:8vm;}

如果视口的宽度是300mm，高度是200mm，那么上述代码中h1元

素的字号将为16mm，即(8x200)/100，因为高度比宽度要小，所

以计算的时候相对于高度。


兼容性：

支持版本\类型

版本 6.0-8.04.0-9.0 5.1 13.0-16.0 11.50-11.60

版本 9.0

示例：


<title>vm_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>p{font-size:5vm;}</style></head><body><p>相对于viewport的宽度或高度中较小的那个然后计算文字大小。</p></body></html>

运行

提交问题





考

选


cm版本：CSS1

提交问题


说明：

厘米（Centimeters）。绝对长度单位。

1in=2.54cm=25.4mm=72pt=6pc=96px

示例代码：

div{font-size:1cm;}

p{height:10cm;}


兼容性：

支持版本\类型

版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>cm_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>h1{margin:10px0;font-size:16px;}div{width:10cm;background:#eee;}p{margin:0;padding:0;line-height:150%;}</style></head><body><h1>定义一个宽度为10cm的容器：</h1><div> <p>这是一个宽度为10cm的容器</p></div></body></html>

运行

提交问题





考

选


mm版本：CSS1

提交问题


说明：

毫米（Millimeters）。绝对长度单位。

1in=2.54cm=25.4mm=72pt=6pc=96px

示例代码：

div{font-size:10mm;}

p{height:100mm;}


兼容性：

支持版本\类型

版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>mm_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>h1{margin:10px0;font-size:16px;}div{width:10cm;background:#eee;}p{margin:0;padding:0;line-height:150%;}</style></head><body><h1>定义一个宽度为100mm的容器：</h1><div> <p>这是一个宽度为100mm的容器</p></div></body></html>

运行

提交问题





考

选


in版本：CSS1

提交问题


说明：

英寸（Inches）。绝对长度单位。

1in=2.54cm=25.4mm=72pt=6pc=96px

示例代码：

div{font-size:1in;}

p{height:10in;}


兼容性：

支持版本\类型

版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>in_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>h1{margin:10px0;font-size:16px;}ul{margin:0;padding:0;list-style:none;}li{margin-top:8px;background:#ccc;}.in{width:1in;}.pt{width:72pt;}.pc{width:6pc;}.px{width:96px;}.cm{width:2.54cm;}.mm{width:25.4mm;}</style></head><body><h1>单位转换对比：</h1><ul> <liclass="in">1in</li> <liclass="pt">72pt</li> <liclass="pc">6pc</li> <liclass="px">96px</li> <liclass="cm">2.54cm</li> <liclass="mm">25.4mm</li></ul><p>1in=2.54cm=25.4mm=72pt=6pc=96px</p></body></html>

运行

提交问题





考

选


pt版本：CSS1

提交问题


说明：

点（Points）。绝对长度单位。

1in=2.54cm=25.4mm=72pt=6pc=96px

示例代码：

div{font-size:10pt;}

p{height:100pt;}


兼容性：

支持版本\类型

版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>pt_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>h1{margin:10px0;font-size:16px;}ul{margin:0;padding:0;list-style:none;}li{margin-top:8px;background:#ccc;}.in{width:1in;}.pt{width:72pt;}.pc{width:6pc;}.px{width:96px;}.cm{width:2.54cm;}.mm{width:25.4mm;}</style></head><body><h1>单位转换对比：</h1><ul> <liclass="in">1in</li> <liclass="pt">72pt</li> <liclass="pc">6pc</li> <liclass="px">96px</li> <liclass="cm">2.54cm</li> <liclass="mm">25.4mm</li></ul><p>1in=2.54cm=25.4mm=72pt=6pc=96px</p></body></html>

运行

提交问题





考

选


pc版本：CSS1

提交问题


说明：

派卡（Picas）。绝对长度单位。相当于我国新四号铅字的尺寸。

1in=2.54cm=25.4mm=72pt=6pc=96px

示例代码：

div{font-size:1pc;}

p{height:10pc;}


兼容性：

支持版本\类型

版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>pc_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>h1{margin:10px0;font-size:16px;}ul{margin:0;padding:0;list-style:none;}li{margin-top:8px;background:#ccc;}.in{width:1in;}.pt{width:72pt;}.pc{width:6pc;}.px{width:96px;}.cm{width:2.54cm;}.mm{width:25.4mm;}</style></head><body><h1>单位转换对比：</h1><ul> <liclass="in">1in</li> <liclass="pt">72pt</li> <liclass="pc">6pc</li> <liclass="px">96px</li> <liclass="cm">2.54cm</li> <liclass="mm">25.4mm</li></ul><p>1in=2.54cm=25.4mm=72pt=6pc=96px</p></body></html>

运行

提交问题





考

选


px版本：CSS1

提交问题


说明：

相对长度单位。像素（Pixels）。

1in=2.54cm=25.4mm=72pt=6pc=96px

示例代码：

div{font-size:12px;}

p{text-indent:24px;}


兼容性：

支持版本\类型

版本 6.0 4.0 5.1 13.0 11.50

示例：


<title>px_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>h1{margin:10px0;font-size:16px;}ul{margin:0;padding:0;list-style:none;}li{margin-top:8px;background:#ccc;}.in{width:1in;}.pt{width:72pt;}.pc{width:6pc;}.px{width:96px;}.cm{width:2.54cm;}.mm{width:25.4mm;}</style></head><body><h1>单位转换对比：</h1><ul> <liclass="in">1in</li> <liclass="pt">72pt</li> <liclass="pc">6pc</li> <liclass="px">96px</li> <liclass="cm">2.54cm</li> <liclass="mm">25.4mm</li></ul><p>1in=2.54cm=25.4mm=72pt=6pc=96px</p></body></html>

运行

提交问题




CSS参考手册»单位列表»角度单位» 其它角度单位参

考

选


deg版本：CSS3

提交问题


说明：

度（Degress）。一个圆共360度

90deg=100grad=0.25turn≈1.570796326794897rad


兼容性：

支持版本\类型

版本 6.0-8.04.0 5.1 13.0 11.50

版本 9.0

示例：


<title>deg_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{ height:100px;background:#eee; -moz-transform:rotate(2deg); -webkit-transform:rotate(2deg); -o-transform:rotate(2deg); -ms-transform:rotate(2deg); transform:rotate(2deg);}</style></head><body><divclass="test">transform:rotate(2deg);</div></body></html>

运行

提交问题





考

选


grad版本：CSS3

提交问题


说明：

梯度（Gradians）。一个圆共400梯度

90deg=100grad=0.25turn≈1.570796326794897rad


兼容性：

支持版本\类型

版本 6.0-8.04.0 5.1 13.0 11.50

版本 9.0

示例：


<title>grad_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{ height:100px;background:#eee; -moz-transform:rotate(2grad); -webkit-transform:rotate(2grad); -o-transform:rotate(2grad); -ms-transform:rotate(2grad); transform:rotate(2grad);}</style></head><body><divclass="test">transform:rotate(2grad);</div></body></html>

运行

提交问题





考

选


rad版本：CSS3

提交问题


说明：

弧度（Radians）。一个圆共2π弧度

90deg=100grad=0.25turn≈1.570796326794897rad


兼容性：

支持版本\类型

版本 6.0-8.04.0 5.1 13.0 11.50

版本 9.0

示例：


<title>rad_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{ height:100px;background:#eee; -moz-transform:rotate(2rad); -webkit-transform:rotate(2rad); -o-transform:rotate(2rad); -ms-transform:rotate(2rad); transform:rotate(2rad);}</style></head><body><divclass="test">transform:rotate(2rad);</div></body></html>

运行

提交问题





考

选


turn版本：CSS3

提交问题


说明：

转、圈（Turns）。一个圆共1圈

90deg=100grad=0.25turn≈1.570796326794897rad


兼容性：

支持版本\类型

版本 6.0-8.04.0-9.0 5.1 13.0 11.50

版本 9.0

示例：


<title>turn_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{ height:100px;background:#eee; -webkit-transform:rotate(.5turn); -o-transform:rotate(.5turn); -ms-transform:rotate(.5turn); transform:rotate(.5turn);}</style></head><body><divclass="test">transform:rotate(.5turn);</div></body></html>

运行

提交问题




CSS参考手册»单位列表»时间单位» 其它时间单位参

考

选


s版本：CSS3

提交问题


说明：

秒

1s=1000ms


兼容性：

支持版本\类型

版本 6.0-8.04.0 5.1 13.0 11.50

版本 9.0

示例：


<title>s_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>h1{font-size:16px;}.test{position:absolute;left:8px;width:200px;height:100px;margin:05px;padding:10px;border:1pxsolid#ddd;background-color:#eee;color:#000; -moz-transition-property:left; -moz-transition-duration:.5s; -moz-transition-timing-function:ease-in; -webkit-transition-property:left; -webkit-transition-duration:.5s; -webkit-transition-timing-function:ease-in; -o-transition-property:left; -o-transition-duration:.5s; -o-transition-timing-function:ease-in; transition-property:left; transition-duration:.5s; transition-timing-function:ease-in;}.test:hover{left:100px;}</style></head><body><h1>请将鼠标移动到下面的矩形上：</h1><divclass="test">矩形在0.5s内慢慢向右移动<br>transition-duration:.5s;</div></body></html>

运行

提交问题




CSS参考手册»单位列表»时间单位» 其它时间单位参

考

选


ms版本：CSS3

提交问题


说明：

毫秒

1s=1000ms


兼容性：

支持版本\类型

版本 6.0-8.04.0 5.1 13.0 11.50

版本 9.0

示例：


<title>ms_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>h1{font-size:16px;}.test{position:absolute;left:8px;width:200px;height:100px;margin:05px;padding:10px;border:1pxsolid#ddd;background-color:#eee;color:#000; -moz-transition-property:left; -moz-transition-duration:300ms; -moz-transition-timing-function:ease-in; -webkit-transition-property:left; -webkit-transition-duration:300ms; -webkit-transition-timing-function:ease-in; -o-transition-property:left; -o-transition-duration:300ms; -o-transition-timing-function:ease-in; transition-property:left; transition-duration:300ms; transition-timing-function:ease-in;}.test:hover{left:100px;}</style></head><body><h1>请将鼠标移动到下面的矩形上：</h1><divclass="test">矩形在300ms内慢慢向右移动<br>transition-duration:300ms;</div></body></html>

运行

提交问题




CSS参考手册»单位列表»频率单位» 其它频率单位参

考

选


Hz

HzHz

版本：CSS3


提交问题


说明：

赫兹

1kHz=1000Hz

浅绿

=支持红色

=不支持墨绿

=部分支持橙色

=实验性质

兼容性：

支持版本\类型


版本 6.0-9.0 4.0-6.0 5.1 13.0 11.50

示例：

strong{voice-pitch:75Hz;}

提交问题




CSS参考手册»单位列表»频率单位» 其它频率单位参

考

选


kHz

kHzkHz

版本：CSS3


提交问题


说明：

千赫兹

1kHz=1000Hz

浅绿

=支持红色

=不支持墨绿

=部分支持橙色

=实验性质

兼容性：

支持版本\类型


版本 6.0-9.0 4.0-6.0 5.1 13.0 11.50

示例：

strong{voice-pitch:1kHz;}

提交问题




CSS参考手册»单位列表»布局单位» 其它布局单位参

考

选


fr

frfr

版本：CSS3


提交问题


说明：

剩余空间分配数

fr单位被用于在一系列长度值中分配剩余空间，如果多个已指定了多

个部分，则剩下的空间根据各自的数字按比例分配。

浅绿

=支持红色

=不支持墨绿

=部分支持橙色

=实验性质

兼容性：

支持版本\类型


版本 6.0-9.0 4.0-6.0 5.1 13.011.50-11.51

示例：

border-parts:10px1fr10px;

border-parts:10px1fr10px1fr10px;

border-parts:10px2fr10px2fr10px;

提交问题




CSS参考手册»单位列表»布局单位» 其它布局单位参

考

选


gr

grgr

版本：CSS3


提交问题


说明：

网格数

浅绿

=支持红色

=不支持墨绿

=部分支持橙色

=实验性质

兼容性：

支持版本\类型


版本 6.0-9.0 4.0-6.0 5.1 13.011.50-11.51

示例：

img{

float:topleftmulticol;

float-offset:2gr;

width:1gr;}

}

提交问题




CSS参考手册»附录列表» 其它附录参考

选


ColorKeywods

ColorKeywodsColorKeywods

颜色关键字

颜色关键字颜色关键字

提交问题


16个基本颜色关键字Basiccolorkeywords

Color ColorName HEX RGB

black #000000 0,0,0

silver #C0C0C0 192,192,192

gray #808080 128,128,128

white #FFFFFF 255,255,255

maroon #800000 128,0,0

red #FF0000 255,0,0

purple #800080 128,0,128

fuchsia #FF00FF 255,0,255

green #008000 0,128,0

lime #00FF00 0,255,0

olive #808000 128,128,0

yellow #FFFF00 255,255,0

navy #000080 0,0,128

blue #0000FF 0,0,255

teal #008080 0,128,128

aqua #00FFFF 0,255,255

示例代码：

body{color:black;background:white;}

h1{color:maroon;}

h2{color:olive;}

28个系统颜色CSSsystemcolors

Color ColorName

activeborder

activecaption

appworkspace

background

buttonface

buttonhighlight

buttonshadow

buttontext

captiontext

graytext

highlight

highlighttext

inactiveborder

inactivecaption

inactivecaptiontext

infobackground

infotext

menu

menutext

scrollbar

threeddarkshadow

threedface

threedhighlight

threedlightshadow

threedshadow

window

windowframe

windowtext

示例代码：

body{color:windowtext;background:background;}

h1,h2{color:highlight;}

CSS系统颜色在CSS3中已经不被建议使用了。尽可能的使用其它的

方式来模拟系统色的色彩。

拓展颜色关键字Extendedcolorkeywords

Color ColorName HEX RGB

aliceblue #f0f8ff 240,248,255

antiquewhite #faebd7 250,235,215

aqua #00ffff 0,255,255

aquamarine #7fffd4 127,255,212

azure #f0ffff 240,255,255

beige #f5f5dc 245,245,220

bisque #ffe4c4 255,228,196

black #000000 0,0,0

blanchedalmond #ffebcd 255,235,205

blue #0000ff 0,0,255

blueviolet #8a2be2 138,43,226

brown #a52a2a 165,42,42

burlywood #deb887 222,184,135

cadetblue #5f9ea0 95,158,160

chartreuse #7fff00 127,255,0

chocolate #d2691e 210,105,30

coral #ff7f50 255,127,80

cornflowerblue #6495ed 100,149,237

cornsilk #fff8dc 255,248,220

crimson #dc143c 220,20,60

cyan #00ffff 0,255,255

darkblue #00008b 0,0,139

darkcyan #008b8b 0,139,139

darkgoldenrod #b8860b 184,134,11

darkgray #a9a9a9 169,169,169

darkgreen #006400 0,100,0

darkgrey #a9a9a9 169,169,169

darkkhaki #bdb76b 189,183,107

darkmagenta #8b008b 139,0,139

darkolivegreen #556b2f 85,107,47

darkorange #ff8c00 255,140,0

darkorchid #9932cc 153,50,204

darkred #8b0000 139,0,0

darksalmon #e9967a 233,150,122

darkseagreen #8fbc8f 143,188,143

darkslateblue #483d8b 72,61,139

darkslategray #2f4f4f 47,79,79

darkslategrey #2f4f4f 47,79,79

darkturquoise #00ced1 0,206,209

darkviolet #9400d3 148,0,211

deeppink #ff1493 255,20,147

deepskyblue #00bfff 0,191,255

dimgray #696969 105,105,105

dimgrey #696969 105,105,105

dodgerblue #1e90ff 30,144,255

firebrick #b22222 178,34,34

floralwhite #fffaf0 255,250,240

forestgreen #228b22 34,139,34

fuchsia #ff00ff 255,0,255

gainsboro #dcdcdc 220,220,220

ghostwhite #f8f8ff 248,248,255

gold #ffd700 255,215,0

goldenrod #daa520 218,165,32

gray #808080 128,128,128

green #008000 0,128,0

greenyellow #adff2f 173,255,47

grey #808080 128,128,128

honeydew #f0fff0 240,255,240

hotpink #ff69b4 255,105,180

indianred #cd5c5c 205,92,92

indigo #4b0082 75,0,130

ivory #fffff0 255,255,240

khaki #f0e68c 240,230,140

lavender #e6e6fa 230,230,250

lavenderblush #fff0f5 255,240,245

lawngreen #7cfc00 124,252,0

lemonchiffon #fffacd 255,250,205

lightblue #add8e6 173,216,230

lightcoral #f08080 240,128,128

lightcyan #e0ffff 224,255,255

lightgoldenrodyellow #fafad2 250,250,210

lightgray #d3d3d3 211,211,211

lightgreen #90ee90 144,238,144

lightgrey #d3d3d3 211,211,211

lightpink #ffb6c1 255,182,193

lightsalmon #ffa07a 255,160,122

lightseagreen #20b2aa 32,178,170

lightskyblue #87cefa 135,206,250

lightslategray #778899 119,136,153

lightslategrey #778899 119,136,153

lightsteelblue #b0c4de 176,196,222

lightyellow #ffffe0 255,255,224

lime #00ff00 0,255,0

limegreen #32cd32 50,205,50

linen #faf0e6 250,240,230

magenta #ff00ff 255,0,255

maroon #800000 128,0,0

mediumaquamarine #66cdaa 102,205,170

mediumblue #0000cd 0,0,205

mediumorchid #ba55d3 186,85,211

mediumpurple #9370db 147,112,219

mediumseagreen #3cb371 60,179,113

mediumslateblue #7b68ee 123,104,238

mediumspringgreen #00fa9a 0,250,154

mediumturquoise #48d1cc 72,209,204

mediumvioletred #c71585 199,21,133

midnightblue #191970 25,25,112

mintcream #f5fffa 245,255,250

mistyrose #ffe4e1 255,228,225

moccasin #ffe4b5 255,228,181

navajowhite #ffdead 255,222,173

navy #000080 0,0,128

oldlace #fdf5e6 253,245,230

olive #808000 128,128,0

olivedrab #6b8e23 107,142,35

orange #ffa500 255,165,0

orangered #ff4500 255,69,0

orchid #da70d6 218,112,214

palegoldenrod #eee8aa 238,232,170

palegreen #98fb98 152,251,152

paleturquoise #afeeee 175,238,238

palevioletred #db7093 219,112,147

papayawhip #ffefd5 255,239,213

peachpuff #ffdab9 255,218,185

peru #cd853f 205,133,63

pink #ffc0cb 255,192,203

plum #dda0dd 221,160,221

powderblue #b0e0e6 176,224,230

purple #800080 128,0,128

red #ff0000 255,0,0

rosybrown #bc8f8f 188,143,143

royalblue #4169e1 65,105,225

saddlebrown #8b4513 139,69,19

salmon #fa8072 250,128,114

sandybrown #f4a460 244,164,96

seagreen #2e8b57 46,139,87

seashell #fff5ee 255,245,238

sienna #a0522d 160,82,45

silver #c0c0c0 192,192,192

skyblue #87ceeb 135,206,235

slateblue #6a5acd 106,90,205

slategray #708090 112,128,144

slategrey #708090 112,128,144

snow #fffafa 255,250,250

springgreen #00ff7f 0,255,127

steelblue #4682b4 70,130,180

tan #d2b48c 210,180,140

teal #008080 0,128,128

thistle #d8bfd8 216,191,216

tomato #ff6347 255,99,71

turquoise #40e0d0 64,224,208

violet #ee82ee 238,130,238

wheat #f5deb3 245,222,179

white #ffffff 255,255,255

whitesmoke #f5f5f5 245,245,245

yellow #ffff00 255,255,0

yellowgreen #9acd32 154,205,50

示例代码：

body{color:black;background:white;}

h1{color:violet;}

h2{color:yellowgreen;}

提交问题




CSS参考手册»附录列表» 其它附录参考

选


CSSMediaTypes

CSSMediaTypesCSSMediaTypes

媒体类型

媒体类型媒体类型

提交问题


媒体类型MediaTypes

MediaTypes媒体类型

CSSVersion版本

Compatibility兼容性

Description简介

all CSS2 所有浏览器用于所有媒体设备类型

aural CSS2 Opera 用于语音和音乐合成器

braille CSS2 Opera 用于触觉反馈设备

handheld CSS2 Chrome,Safari,Opera 用于小型或手持设备

print CSS2 所有浏览器用于打印机

projection CSS2 Opera用于投影图像，如幻灯片

screen CSS2 所有浏览器用于计算机显示器

tty CSS2 Opera用于使用固定间距字符格的设备。如电传打字机和终端

tv CSS2 Opera 用于电视类设备

embossed CSS2 Opera用于凸点字符（盲文）印刷设备

提交问题




CSS参考手册»CSSHack列表» 其它CSSHack

参考

选


条件Hack（CSS外部）HTML级Hack

提交问题


语法：

是否：

大于：

大于或等于：

小于：

小于或等于：

非指定版本：

取值：

<keywords>

if条件共包含6种选择方式：是否、大于、大于或等于、小于、小于或

等于、非指定版本

指定是否IE或IE某个版本。关键字：空

选择大于指定版本的IE版本。关键字：gt（greaterthan）

选择大于或等于指定版本的IE版本。关键

字：gte（greaterthanorequal）

选择小于指定版本的IE版本。关键字：lt（lessthan）

选择小于或等于指定版本的IE版本。关键字：lte（less

thanorequal）

选择除指定版本外的所有IE版本。关键字：!

<version>

目前的常用IE版本为6.0及以上，推荐酌情忽略低版本，把精力花在为

使用高级浏览器的用户提供更好的体验上

说明：

用于选择IE浏览器及IE的不同版本

if条件Hack是HTML级别的（包含但不仅是CSS的Hack，可以选择任何

HTML代码块）

如不想在非IE中看到某区域，可这样写：



上述p代码块，将只在IE中可见。

if条件6种选择方式的使用示例（下述代码中被条件注释包含的HTML

代码块也可以是link标记）：

是否，示例代码：



在上述代码中，只有IE浏览，才能看到应用了test类的元素是红色

文本。

大于，示例代码：

<!--[ifgtIE6]>

<style>

.test{color:red;}

</style>

<![endif]-->

在上述代码中，只有IE6以上，才能看到应用了test类的元素是红

色文本。

大于或等于，示例代码：



在上述代码中，只有IE6以上（含IE6），才能看到应用了test类的

元素是红色文本。

小于，示例代码：



在上述代码中，只有IE7以下，才能看到应用了test类的元素是红

色文本。

小于或等于，示例代码：

在上述代码中，只有IE7以下（含IE7），才能看到应用了test类的

元素是红色文本。

非指定版本，示例代码：



在上述代码中，除IE7以外的IE版本，都能看到应用了test类的元

素是红色文本。

示例：


<title>if条件Hack_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>h1{margin:10px0;font-size:16px;}span{display:none;}.not-ie{display:inline;}</style>





运行

提交问题


参考

选


属性HackCSS内部属性级Hack

提交问题


语法：

selector{<hack>?property:value<hack>?;}

_：

*：

\9：

\0：

[;property:value;];：

取值：

选择IE6及以下。连接线（中划线）（-）亦可使用，为了避免与某

些带中划线的属性混淆，所以使用下划线（_）更为合适。

选择IE7及以下。诸如：（+）与（#）之类的均可使用，不过业界

对（*）的认知度更高

选择IE6+

选择IE8+和Opera

选择webkit核心浏览器（Chrome,Safari）。IE7及

以下也能识别。中括号内外的3个分号必须保留，第一个分号前可以是

任意规则或任意多个规则

[;color:#f00;];与[color:#f00;color:#f00;];与

[margin:0;padding:0;color:#f00;];是等价的。生效的始终是中括号内的

最后一条规则，所以通常选用第一种写法最为简洁。

说明：

选择不同的浏览器及版本

尽可能减少对CSSHack的使用。Hack有风险，使用需谨慎

通常如未作特别说明，本文档所有的代码和示例的默认运行环境都为

标准模式。

一些CSSHack由于浏览器存在交叉认识，所以需要通过层层覆盖的方

式来实现对不同浏览器进行Hack的。如下面这个例子：

如想同一段文字在IE6,7,8显示为不同颜色，可这样写：

.test{

color:#090\9;/*ForIE8+*/

*color:#f00;/*ForIE7andearlier*/

_color:#ff0;/*ForIE6andearlier*/

}

*上述Hack均需运行在标准模式下，若在怪异模式下运行，这些

Hack将会被不同版本的IE相互识别，导致失效。

示例：


<title>属性级Hack_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>h1{margin:10px0;font-size:16px;}.test{ color:#c30;/*ForFirefox*/ [;color:#ddd;];/*Forwebkit(ChromeandSafari)*/ color:#090\0;/*ForOpera*/ color:#00f\9;/*ForIE8+*/ *color:#f00;/*ForIE7*/ _color:#ff0;/*ForIE6*/}</style></head><body><divclass="test">在不同浏览器下看看我的颜色吧</div></body></html>

运行

提交问题





参考

选


选择符级HackCSS内部选择符级Hack

提交问题


语法：

<hack>selector{sRules}

说明：

选择不同的浏览器及版本

尽可能减少对CSSHack的使用。Hack有风险，使用需谨慎

通常如未作特别说明，本文档所有的代码和示例的默认运行环境都为

标准模式。

一些CSSHack由于浏览器存在交叉认识，所以需要通过层层覆盖的方

式来实现对不同浏览器进行Hack的。

简单列举几个：

*html.test{color:#090;}/*ForIE6andearlier*/

*+html.test{color:#ff0;}/*ForIE7*/

.test:lang(zh-cn){color:#f00;}/*ForIE8+andnotIE*/

.test:nth-child(1){color:#0ff;}/*ForIE9+andnotIE*/

*上述代码中的3,4两行就是典型的利用能力来进行选择的CSS

Hack。

示例：


<title>选择符级Hack_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>*html.test{color:#090;}*+html.test{color:#ff0;}.test:lang(zh-cn){color:#f00;}.test:nth-child(1){color:#0ff;}</style></head><body><divclass="test">在不同浏览器下看看我的颜色吧</div></body></html>

运行

提交问题




CSS参考手册»问题和经验列表» 其它问题和经验

参考

选


BugsAndFixed

BugsAndFixedBugsAndFixed

Bugs和解决方案

BugsBugs和解决方案和解决方案

提交问题


Bugs及解决方案列表（以下实例默认运行环境都为Standard

mode）：

1.如何在IE6及更早浏览器中定义小高度的容器？

方法：

#test{overflow:hidden;height:1px;font-size:0;line-height:0;}

IE6及更早浏览器之所以无法直接定义较小高度的容器是

因为默认会有行高

2.如何解决IE6及更早浏览器浮动时产生双倍边距的BUG？

方法：

#test{display:inline;}

当在IE6及更早浏览器中出现浮动后margin值解析为双倍的

情况，设置该元素的display属性为inline即可。

3.如何在IE6及更早浏览器下模拟min-height效果？

方法：

#test{min-height:100px;_height:100px;}

注意此时#test不能再设置overflow的值为hidden，否则模拟

min-height效果将失效

4.如何解决按钮在IE7及更早浏览器下随着value增多两边留白也

随着增加的问题？

方法：

input,button{overflow:visible;}

5. 如何解决IE7及更早浏览器下当li中出现2个或以上的浮动时，li

之间产生的空白间隙的BUG？

方法：

li{vertical-align:top;}

除了top值，还可以设置为text-top|middle|bottom|text-

bottom，甚至特定的<length>和<percentage>值都可以

6. 如何解决IE6及更早浏览器下的3像素BUG？

方法：

.a{color:#f00;}

.main{width:950px;background:#eee;}

.content{float:left;width:750px;height:100px;background:#ccc;_margin-right:-3px;}

.aside{height:100px;background:#aaa;}

<divclass="main">

<divclass="content">content</div>

<divclass="aside">aside</div>

</div>

在IE6及更早浏览器下为.content设置margin-right:-3px；也

可以设置.aside为浮动

7. 如何解决IE6下的文本溢出BUG（江湖匪号：“谍影重重”或“一

只猪的故事”）？

BUG重现：

.test{zoom:1;overflow:hidden;width:500px;}

.box1{float:left;width:100px;}

.box2{float:right;width:400px;}

<divclass="test">

<divclass="box1"></div>



<divclass="box2">↓这就是多出来的那只猪</div>

</div>

运行如上代码，你会发现文字发生了溢出，在IE6下会多

出一只“猪”。造成此BUG的原因可能是多重混合的，如浮

动，注释，宽高定义等等。并且注释条数越多，溢出的文

本也会随之增多。

列举几个解决方法：

　删除box1和box2之间所有的注释；

　不设置浮动；

　调整box1或box2的宽度，比如将box的宽度调整为90px

8. 如何解决IE6使用滤镜PNG图片透明后，容器内链接失效的问

题？

方法：

div{width:300px;height:100px;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='*.png');}

a{_position:relative;}

解决方法是为容器内的链接定义相对定位属性position的值

为relative

9. 如何解决IE6无法识别伪对象:first-letter/:first-line的问题？

方法1：

p:first-letter{float:left;font-size:40px;font-weight:bold;}

p:first-line{color:#090;}

增加空格：在伪对象选择符:first-letter/:first-line与包含规则

的花括号"{"间增加空格。

方法2：

p:first-letter

{float:left;font-size:40px;font-weight:bold;}

p:first-line

{color:#090;}

换行：将整个花括号"{"规则区域换行。细节参见E:first-

letter和E:first-line选择符

10.如何解决IE8会忽略伪对象:first-letter/:first-line里的!important

规则的问题？

BUG重现：

p:first-letter{float:left;font-size:40px;font-weight:bold;color:#f00!important;color:#090;}

如上代码，在IE8下color定义都会失效，原因就是因为有

color使用了!important规则。鉴于此，请尽量不要在:first-

letter/:first-line里使用!important规则。

11.如何解决IE6会忽略同一条样式体内的!important规则的问题？

BUG重现：

div{color:#f00!important;color:#000;}

如上代码，IE6及以下浏览器div的文本颜色为

#000，!important并没有覆盖后面的规则，也就是

说!important被忽略了。解决方案是将该样式拆分为2条，

细节参见!important规则

12. 如何解决IE6及更早浏览器下当li内部元素是定义了

display:block的内联元素时底部产生空白的问题？

BUG重现：

a,span{display:block;background:#ddd;}

<ul>

<li><ahref="http://css.doyoe.com/">CSS参考手册</a></li>

<li><ahref="http://blog.doyoe.com/">CSS探索之旅</a></li>

<li><ahref="http://demo.doyoe.com/">web前端实验室</a></li>

<li><span>测试li内部元素为设置了display:block的内联元素时底部产生空白</span></li>

</ul>

如上代码，IE6及更早浏览器每个li内部的内联元素底部都

会产生空白。解决方案是给li内部的内联元素再加上

zoom:1

13. 如何解决IE6及更早浏览器下未定义宽度的浮动或绝对定位元

素会被内部设置了zoom:1的块元素撑开的问题？

BUG重现：

#test{zoom:1;overflow:hidden;border:1pxsolid#ddd;background:#eee;}

#testh1{float:left;}

#test.nav{float:right;background:#aaa;}

#test.navul{zoom:1;overflow:hidden;margin:0;padding:0;list-style:none;}

#test.navli{float:left;margin:05px;}

<divid="test">

<h1>Doyoe</h1>

<divclass="nav">

<ul>

<li><ahref="http://css.doyoe.com/">CSS参考手册</a></li>

<li><ahref="http://blog.doyoe.com/">CSS探索之旅</a></li>

<li><ahref="http://demo.doyoe.com/">web前端实验室</a></li>

</ul>

</div>

</div>

如上代码，IE6及更早浏览器div.nav会被设置了zoom:1的ul

给撑开。

列举几个解决方法：

　设置ul为浮动元素；

　设置ul为inline元素；

　设置ul的width

14.如何解决IE7及更早浏览器下子元素相对定位时父元素overflow

属性的auto|hidden失效的问题？

BUG重现：

div{overflow:auto;width:260px;height:80px;border:1pxsolid#ddd;}

p{position:relative;margin:0;}

<div>

<p>如果我是相对定位，我的父元素overflow属性设置为auto|hidden将失效。如果你使用的是IE及更早浏览器，你将可以看到这个BUG</p>

<p>如果我是相对定位，我的父元素overflow属性设置为auto|hidden将失效。如果你使用的是IE及更早浏览器，你将可以看到这个BUG</p>

</div>

如上代码，在IE7及更早浏览器下你会看到div的滚动条将

无法工作。解决方案是给div也设置相对定位

position:relative

15.如何解决Chrome在应用transition时页面闪动的问题？

方法：

-webkit-transform-style:preserve-3d;或-webkit-backface-visibility:hidden;

在Chrome下，使用过渡效果transition时有时会出现页面闪

动

待续及修订。。。

提交问题





参考

选


SkillAndExperience

SkillAndExperienceSkillAndExperience

CSS技巧和经验集合

CSSCSS技巧和经验集合技巧和经验集合

提交问题


CSS技巧和经验列表（以下实例默认运行环境都为Standard

mode）：

1.如何清除图片下方出现几像素的空白间隙？

方法1：

img{display:block;}

方法2：

img{vertical-align:top;}

除了top值，还可以设置为text-top|middle|bottom|text-

bottom，甚至特定的<length>和<percentage>值都可以

方法3：

#test{font-size:0;line-height:0;}

#test为img的父元素

2.如何让文本垂直对齐文本输入框？

方法：

input{vertical-align:middle;}

3.如何让单行文本在容器内垂直居中？

方法：

#test{height:25px;line-height:25px;}

只需设置文本的行高等于容器的高度即可

4. 如何让超链接访问后和访问前的颜色不同且访问后仍保留hover

和active效果？

方法：

a:link{color:#03c;}

a:visited{color:#666;}

a:hover{color:#f30;}

a:active{color:#c30;}

按L-V-H-A的顺序设置超链接样式即可，可速记为

LoVe（喜欢）HAte（讨厌）

5. 为什么Standardmode下IE无法设置滚动条的颜色？

方法：

html{

scrollbar-3dlight-color:#999;

scrollbar-darkshadow-color:#999;

scrollbar-highlight-color:#fff;

scrollbar-shadow-color:#eee;

scrollbar-arrow-color:#000;

scrollbar-face-color:#ddd;

scrollbar-track-color:#eee;

scrollbar-base-color:#ddd;

}

将原来设置在body上的滚动条颜色样式定义到html标签选

择符上即可

6. 如何使文本溢出边界不换行强制在一行内显示？

方法：

#test{width:150px;white-space:nowrap;}

设置容器的宽度和white-space为nowrap即可，其效果类似

<nobr>标签

7. 如何使文本溢出边界显示为省略号？

方法（此方法Firefox5.0尚不支持）：

#test{width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

首先需设置将文本强制在一行内显示，然后将溢出的文本

通过overflow:hidden截断，并以text-overflow:ellipsis方式将

截断的文本显示为省略号。

8. 如何使连续的长字符串自动换行？

方法：

#test{width:150px;word-wrap:break-word;}

word-wrap的break-word值允许单词内换行

9. 如何清除浮动？

方法1：

#test{clear:both;}

#test为浮动元素的下一个兄弟元素

方法2：

#test{display:block;zoom:1;overflow:hidden;}

#test为浮动元素的父元素。zoom:1也可以替换为固定的

width或height

方法3：

#test{zoom:1;}

#test:after{display:block;clear:both;visibility:hidden;height:0;content:'';}

#test为浮动元素的父元素

10.如何定义鼠标指针的光标形状为手型并兼容所有浏览器？

方法：

#test{cursor:pointer;}

若将cursor设置为hand，将只有IE和Opera支持，且hand为

非标准属性值

11.如何让已知高度的容器在页面中水平垂直居中？

方法：

#test{position:absolute;top:50%;left:50%;width:200px;height:200px;margin:-100px00-100px;}

KnowMore：已知高度的容器如何在页面中水平垂直居中

12.如何让未知尺寸的图片在已知宽高的容器内水平垂直居中？

方法：

#test{display:table-cell;*display:block;*position:relative;width:200px;height:200px;text-align:center;vertical-align:middle;}

#testp{*position:absolute;*top:50%;*left:50%;margin:0;}

#testpimg{*position:relative;*top:-50%;*left:-50%;vertical-align:middle;}

#test是img的祖父节点，p是img的父节点。KnowMore：未

知尺寸的图片如何水平垂直居中

http://blog.doyoe.com/article.asp?id=74


13. 如何设置span的宽度和高度（即如何设置内联元素的宽高）？

方法：

span{display:block;width:200px;height:100px;}

要使内联元素可以设置宽高，只需将其定义为块级或者内

联块级元素即可。所以方法非常多样，既可以设置display

属性，也可以设置float属性，或者position属性等等。

14. 如何给一个元素定义多个不同的css规则？

方法：

.a{color:#f00;}

.b{background:#eee;}

.c{background:#ccc;}

<divclass="ab">测试1</div>

<divclass="ac">测试2</div>

多个规则之间使用空格分开，并且只有class能同时使用多

个规则，id不可以

15. 如何让某个元素充满整个页面？

方法：

html,body{height:100%;margin:0;}

#test{height:100%;}

16. 如何让某个元素距离窗口上右下左4边各10像素？

方法：

html,body{height:100%;margin:0;}

html{_padding:10px;}

#test{position:absolute;top:10px;right:10px;bottom:10px;left:10px;_position:static;_height:100%;}

17.如何去掉超链接的虚线框？

方法：

a{outline:none;}

IE7及更早浏览器由于不支持outline属性，需要通过js的

blur()方法来实现，如<aonfocus="this.blur();"...

18.如何容器透明，内容不透明？

方法1：

.outer{width:200px;height:200px;background:#000;filter:alpha(opacity=20);opacity:.2;}

.inner{width:200px;height:200px;margin-top:-200px;}

<divclass="outer"></div>

<divclass="inner">我是不透明的内容</div>

原理是容器层与内容层并级，容器层设置透明度，内容层

通过负margin或者position绝对定位等方式覆盖到容器层上

方法2：

.outer{width:200px;height:200px;background:rgba(0,0,0,.2);background:#000\9;filter:alpha(opacity=20)\9;}

.outer.inner{position:relative\9;}

<divclass="outer">

<divclass="inner">我是不透明的内容</div>

</div>

高级浏览器直接使用rgba颜色值实现；IE浏览器在定义容

器透明的同时，让子节点相对定位，也可达到效果

19.如何让整个页面水平居中？

方法：

body{text-align:center;}

#test2{width:960px;margin:0auto;text-align:left;}

定义body的text-align值为center将使得IE5.5也能实现居中

20.为什么容器的背景色没显示出来？为什么容器无法自适应内容

高度？

方法：

清除浮动，方法请参考本页第9条

通常出现这样的情况都是由于没有清除浮动而引起的，所

以Debug时应第一时间想到是否有未清除浮动的地方

21.如何做1像素细边框的table？

方法1：

#test{border-collapse:collapse;border:1pxsolid#ddd;}

#testth,#testtd{border:1pxsolid#ddd;}

<tableid="test">

<tr><th>姓名</th><td>JoyDu</td></tr>

<tr><th>年龄</th><td>26</td></tr>

</table>

方法2：

#test{border-spacing:1px;background:#ddd;}

#testtr{background:#fff;}

<tableid="test"cellspacing="1">

<tr><th>姓名</th><td>JoyDu</td></tr>

<tr><th>年龄</th><td>26</td></tr>

</table>

IE7及更早浏览器不支持border-spacing属性，但是可以通

过table的标签属性cellspacing来替代。

22. 如何使页面文本行距始终保持为n倍字体大小的基调？

方法：

body{line-height:n;}

注意，不要给n加单位。KnowMore：如何使页面文本行距

始终保持为n倍字体大小的基调

23. 标准模式Standardmode和怪异模式Quirksmode下的盒模型区

别？

方法：

标准模式下：Elementwidth=width+padding+border

怪异模式下：Elementwidth=width

相关资料请参阅CSS3属性box-sizing

24. 以图换字的几种方法及优劣分析

思路1：使用text-indent的负值，将内容移出容器


.test1{width:200px;height:50px;text-indent:-9999px;background:#eeeurl(*.png)no-repeat;}

<divclass="test">以图换字之内容负缩进法</div>

该方法优点在于结构简洁，不理想的地方：1.由于使用场

景不同，负缩进的值可能会不一样，不易抽象成公用样

式；2.当该元素为链接时，在非IE下虚线框将变得不完

整；3.如果该元素被定义为内联级或者内联块级，不同浏

览器下会有较多的差异

思路2：使用display:none或visibility:hidden将内容隐藏；

.test{width:200px;height:50px;background:#eeeurl(*.png)no-repeat;}

.testspan{visibility:hidden;/*或者display:none*/}

<divclass="test"><span>以图换字之内容隐藏法</span></div>

该方法优点在于兼容性强并且容易抽象成公用样式，缺点

在于结构较复杂

思路3：使用padding或者line-height将内容挤出容器之

外；

.test{overflow:hidden;width:200px;height:0;padding-top:50px;background:#eeeurl(*.png)no-repeat;}

.test{overflow:hidden;width:200px;height:50px;line-height:50;background:#eeeurl(*.jpg)no-repeat;}

<divclass="test">以图换字之内容排挤法</div>

该方法优点在于结构简洁，缺点在于：1.由于使用场景不

同，padding或line-height的值可能会不一样，不易抽象成

公用样式；2.要兼容IE5.5及更早浏览器还得hack

思路4：使用超小字体和文本全透明法；

.test{overflow:hidden;width:200px;height:50px;font-size:0;line-height:0;color:rgba(0,0,0,0);background:#eeeurl(*.png)no-repeat;}

<divclass="test">以图换字之超小字体+文本全透明法</div>

该方法结构简单易用，推荐使用

25.为什么2个相邻div的margin只有1个生效？

方法：

.box1{margin:10px0;}

.box2{margin:20px0;}

<divclass="box1">box1</div>

<divclass="box2">box2</div>

本例中box1的底部margin为10px，box2的顶部margin为

20px，但表现在页面上2者之间的间隔为20px，而不是预

想中的10+20px=30px，结果是选择2者之间最大的那个

margin，我们把这种机制称之为“外边距合并”；外边距合

并不仅仅出现在相邻的元素间，父子间同样会出现。

简单列举几点注意事项:

　外边距合并只出现在块级元素上；

　浮动元素不会和相邻的元素产生外边距合并；

　绝对定位元素不会和相邻的元素产生外边距合并；

　内联块级元素间不会产生外边距合并；

　根元素间不会不会产生外边距合并（如html与body

间）；

　设置了属性overflow且值不为visible的块级元素不会与它

的子元素发生外边距合并；

26.如何在文本框中禁用中文输入法？

方法：

input,textarea{ime-mode:disabled;}

ime-mode为非标准属性，写该文档时只有IE和Firefox支持

27.如何解决列表中list-style-image不能精准定位的问题？

方法：

不使用list-style-image来定义列表项目标记符号，而

用background-image来代替，并通过background-position来

进行定位

28.如何解决伪对象:before和:after在input标签上的怪异表现的问

题？

现象：

在编写本条目时，除了Opera，在所有浏览器下input标签

使用伪对象:before和:after都没有效果，即使Opera的表现也

同样令人诧异。大家可以试玩一下。浏览器版本：IE6-

IE10,Firefox6.0,Chrome13.0,Safari5.1,Opera11.51

29.如何解决伪对象:before和:after无法在Chrome,Safari,Opera上

定义过渡和动画的问题？

现象：

在编写本条目时，除了Firefox，在所有浏览器下伪对

象:before和:after无法定义过渡和动画效果。浏览器版本：

IE6-IE10,Firefox6.0,Chrome13.0,Safari5.1,Opera11.51。如

果这个过渡或动画效果是必须，可以考虑使用真实对象。


提交问题





参考

选


OtherSkillAndExperience

OtherSkillAndExperienceOtherSkillAndExperience

其它技巧和经验集合

其它技巧和经验集合其它技巧和经验集合

提交问题


其它技巧和经验列表（以下实例默认运行环境都为Standard

mode）：

1.如何让层在falsh上显示？

方法：

<paramname="wmode"value="transparent"/>

设置flash的wmode值为transparent或opaque

2.如何使用标准的方法在页面上插入flash？

方法：

<objectid="flash-show"type="application/x-shockwave-flash"data="*.swf">

<paramname="movie"value="*.swf"/>

<paramname="wmode"value="transparent"/>

<imgsrc="*.jpg"alt="用于不支持flash或屏蔽flash时显示"/>

</object>

至于flash的宽高可以在css里设置

3.如何在点文字时也选中复选框或单选框？

方法1：

<inputtype="checkbox"id="chk1"name="chk"/><labelfor="chk1">选项一</label>

<inputtype="checkbox"id="chk2"name="chk"/><labelfor="chk2">选项二</label>

<inputtype="radio"id="rad1"name="rad"/><labelfor="rad1">选项一</label>

<inputtype="radio"id="rad2"name="rad"/><labelfor="rad2">选项二</label>

该方式所有主流浏览器都支持

方法2：

<label><inputtype="checkbox"name="chk"/>选项一</label>

<label><inputtype="checkbox"name="chk"/>选项二</label>

<label><inputtype="radio"name="rad"/>选项一</label>

<label><inputtype="radio"name="rad"/>选项二</label>

该方式相比方法1更简洁，但IE6及更早浏览器不支持

4. IE下如何对StandardMode与QuirksMode进行切换？

IE6的触发（在DTD申明前加上XML申明）：

<?xmlversion="1.0"encoding="utf-8"?>

<!DOCTYPEhtml>

IE5.5及更早浏览器版本直接以QuirksMode解析。

所有IE版本的触发（在DTD申明前加上HTML注释）：



<!DOCTYPEhtml>

当没有DTD声明时，所有IE版本也会进入QuirksMode。

5. 如何区别display:none与visibility:hidden？

方法：

相同的是display:none与visibility:hidden都可以用来隐藏某

个元素；不同的是display:none在隐藏元素的时候，将其占

位空间也去掉；而visibility:hidden只是隐藏了内容而已，

其占位空间仍然保留。

6. 如何设置IE下的iframe背景透明？

方法：

设置iframe元素的标签属性

allowtransparency="allowtransparency"然后设置iframe内部

页面的body背景色为transparent。不过由此会引发IE下一

些其它问题，如：设置透明后的iframe将不能遮住select


提交问题




web前端开发参考手册

系列之

CSS参考手册»简介其它简介条目

选


CSS参考手册版本：v3.4.0

最后更新时间：

2012.2.28

编著：飘零雾雨

下载最新chm版CSS参考手册在线版

http://css.doyoe.com/css.chm


CSS参考手册»属性列表其它属性参考

选


CSSPropertiesReference

CSSPropertiesReferenceCSSPropertiesReference

CSS属性集合

CSSCSS属性集合属性集合

提交问题


position z-index top

right bottom left

定位Positioning

display float clear

visibility clip overflow

overflow-x overflow-y

布局Layout

width min-width max-width

height min-height max-height

尺寸Dimension

margin margin-top margin-right

margin-bottom margin-left

外补白Margin

padding padding-top padding-right

padding-bottom padding-left

内补白Padding

border border-width border-style

border-color border-top border-top-width

border-top-style border-top-color border-right

border-right-width border-right-style border-right-color

border-bottom border-bottom-width border-bottom-style

border-bottom-color border-left border-left-width

border-left-style border-left-color border-image

border-radius border-top-left-radius border-top-right-radius

border-bottom-right-

radius

border-bottom-left-

radius

box-shadow

box-reflect

边框Border

background background-color background-image

background-repeat background-

attachment

background-position

background-origin

background-clip background-size Multiplebackground

背景Background

color opacity

颜色Color

font font-style font-variant

font-weight font-size font-family

font-stretch

字体Font

text-indent text-overflow text-align

text-transform text-decoration text-decoration-line

text-decoration-color text-decoration-style text-shadow

text-fill-color text-stroke text-stroke-width

text-stroke-color letter-spacing word-spacing

vertical-align word-wrap white-space

direction unicode-bidi line-height

tab-size

文本Text

list-style list-style-image list-style-position

list-style-type

列表List

table-layout border-collapse border-spacing

caption-side empty-cells

表格Table

content counter-increment counter-reset

quotes

内容Content

outline outline-width outline-style

outline-color outline-offset nav-index

nav-up nav-right nav-down

nav-left cursor zoom







column-break-inside

多列Multi-column


转换Transform


transition-timing-

function

transition-delay

过渡Transition


animation-timing-

function


count


动画Animation

page page-break-before page-break-after

page-break-inside

打印Printing





grid


scrollbar-3dlight-color scrollbar-drakshadow-

color

scrollbar-highlight-

color

scrollbar-shadow-colorscrollbar-arrow-color scrollbar-face-color

scrollbar-track-color scrollbar-base-color filter

behavior

OnlyIE



OnlyFirefox

这种颜色的链接表示是CSS3属性或原属性被CSS3修改并增加了新的属

性值

提交问题




CSS参考手册»选择符列表其它选择符参考

选


CSSSelectorsReference

CSSSelectorsReferenceCSSSelectorsReference

CSS选择符集合

CSSCSS选择符集合选择符集合

提交问题


* E E#id

E.class


EF E>F E+F

E~F


E[att] E[att="val"] E[att~="val"]


E[att|="val"]


E:link E:visited E:hover

E:active E:focus E:lang()

E:not() E:root E:first-child

E:last-child E:only-child E:nth-child(n)

E:nth-last-child(n) E:first-of-type E:last-of-type

E:only-of-type E:nth-of-type(n) E:nth-last-of-type(n)

E:empty E:checked E:enabled

E:disabled E:target @page:first

@page:left @page:right



letter




这种颜色的链接表示是CSS3选择符或原选择符被CSS3修改并赋予了新

的特性

提交问题




CSS参考手册»语法与规则列表其它语法与规则

参考

选


CSSRulesandSyntax

CSSRulesandSyntaxCSSRulesandSyntax

语法与规则

语法与规则语法与规则

提交问题



Name名称

CSSVersion版本

Description简介

!important CSS1 提升指定样式条目的应用优先权。

/*comment*/ CSS1 CSS中的注释/*这里是注释内容*/

@import CSS1/CSS3指定导入的外部样式表及目标媒体。该规则必须在样式表头部最先声明

@charset CSS2在外部样式表文件内使用。指定该样式表使用的字符编码。

@media CSS2/CSS3指定样式表规则用于指定的媒体类型和条件。

@font-face CSS3 设置嵌入HTML文档的OpenType字体。

@page CSS2 设置页面容器的版式，方向，边空等。

@keyframes CSS3 指定动画名称和动画效果。

这种颜色的链接表示是CSS3语法规则或语法规则被CSS3修改并增加

了新的特性

提交问题




CSS参考手册»取值列表其它取值参考

选


CSSValuesReference

CSSValuesReferenceCSSValuesReference

CSS取值

CSSCSS取值取值

提交问题


ColorName HEX RGB

RGBA HSL HSLA

transparent

颜色类型ColorType

<string> <url> <identifier>

文本类型TextualDataType

counter() attr() calc()

min() max() cycle()

函数类型FunctionalNotationsType


gradient()

repeating-radial-

gradient()

图像类型ImageType

<number> <integer>

数字类型NumericDataType

<length> <percentage> <angle>

<time> <frequency> <fraction>

<grid>

其它数据类型OtherDataTypes

这种颜色的链接表示是CSS3取值或取值被CSS3修改并赋予了新的特性

提交问题




CSS参考手册»单位列表其它单位参考

选


CSSUnitsReference

CSSUnitsReferenceCSSUnitsReference

CSS单位

CSSCSS单位单位

提交问题


em ex ch

rem vw vh

vm cm mm

in pt pc

px


deg grad rad

turn


s ms


Hz kHz


fr gr


这种颜色的链接表示是CSS3单位

提交问题




CSS参考手册»附录列表其它附录参考

选


AppendixReference

AppendixReferenceAppendixReference

附录

附录附录

提交问题


颜色关键字(Color

Keywords)

媒体类型(Media

Types)

附录Appendix

提交问题




CSS参考手册»CSSHack列表其它CSSHack

参考

选


CSSHack

CSSHackCSSHack

常用CSSHack

常用常用CSSHackCSSHack

提交问题


条件Hack 属性级Hack 选择符级Hack

常用CSSHack

*这里只列举一些使用比率较高的常用CSSHack，且不考虑IE6以下的

版本。若对其它更多Hack有兴趣，可Google或Baidu。

*CSSHack一般都是利用各浏览器的支持CSS的能力和BUG来进行

的。所以对浏览器的选择大致可以分为能力选择和怪癖选择(BUG)。

能力通常是指浏览器对CSS特性的支持程度，而怪癖是指浏览器特有

的一些BUG。

*友情提示：尽量找到通用方法而减少对CSSHack的使用，大规模使

用CSSHack会带来维护成本的提高以及浏览器版本变化而带来类似

Hack失效等系列问题。

提交问题




CSS参考手册»问题和经验列表其它问题和经验

参考

选


QuestionAndExperience

QuestionAndExperienceQuestionAndExperience

问题和经验

问题和经验问题和经验

提交问题


Bugs和解决方案

1.如何在IE6及更早浏览器中定义小高度的容器？

2.如何解决IE6及更早浏览器浮动时产生双倍边距的BUG？

3.如何在IE6及更早浏览器下模拟min-height效果？

4.如何解决按钮在IE7及更早浏览器下随着value增多两边留白

也随着增加的问题？

5.如何解决IE7及更早浏览器下当li中出现2个或以上的浮动时，

li之间产生的空白间隙的BUG？

6.如何解决IE6及更早浏览器下的3像素BUG？

7.如何解决IE6下的文本溢出BUG（江湖匪号：“谍影重

重”或“一只猪的故事”）？

8.如何解决IE6使用滤镜PNG图片透明后，容器内链接失效的问

题？

9.如何解决IE6无法识别伪对象:first-letter/:first-line的问题？

10.如何解决IE8会忽略伪对象:first-letter/:first-line里的!important

规则的问题？

11.如何解决IE6会忽略同一条样式体内的!important规则的问

题？

12.如何解决IE6及更早浏览器下当li内部元素是定义了

display:block的内联元素时底部产生空白的问题？

13.如何解决IE6及更早浏览器下未定义宽度的浮动或绝对定位元

素会被内部设置了zoom:1的块元素撑开的问题？

14.如何解决IE7及更早浏览器下子元素相对定位时父元素

overflow属性的auto|hidden失效的问题？

15.如何解决Chrome在应用transition时页面闪动的问题？

技巧和经验

1.如何清除图片下方出现几像素的空白间隙？

2.如何让文本垂直对齐文本输入框？

3.如何让单行文本在容器内垂直居中？

4.如何让超链接访问后和访问前的颜色不同且访问后仍保留

hover和active效果？

5.为什么Standardmode下IE无法设置滚动条的颜色？

6.如何使文本溢出边界不换行强制在一行内显示？

7.如何使文本溢出边界显示为省略号？

8.如何使连续的长字符串自动换行？

9.如何清除浮动？

10.如何定义鼠标指针的光标形状为手型并兼容所有浏览器？

11.如何让已知高度的容器在页面中水平垂直居中？

12.如何让未知尺寸的图片在已知宽高的容器内水平垂直居中？

13.如何设置span的宽度和高度（即如何设置内联元素的宽

高）？

14.如何给一个元素定义多个不同的css规则？

15.如何让某个元素充满整个页面？

16.如何让某个元素距离窗口上右下左4边各10像素？

17.如何去掉超链接的虚线框？

18.如何容器透明，内容不透明？

19.如何让整个页面水平居中？

20.为什么容器的背景色没显示出来？为什么容器无法自适应内

容高度？

21.如何做1像素细边框的table？

22.如何使页面文本行距始终保持为n倍字体大小的基调？

23.标准模式Standardmode和怪异模式Quirksmode下的盒模型区

别？

24.以图换字的几种方法及优劣分析

25.为什么2个相邻div的margin只有1个生效？

26.如何在文本框中禁用中文输入法？

27.如何解决列表中list-style-image不能精准定位的问题？

28.如何解决伪对象:before和:after在input标签上的怪异表现的问

题？

29.如何解决伪对象:before和:after无法在Chrome,Safari,Opera上定

义过渡和动画的问题？

其它技巧和经验

1.如何让层在falsh上显示？

2.如何使用标准的方法在页面上插入flash？

3.如何在点文字时也选中复选框或单选框？

4. IE下如何对StandardMode与QuirksMode进行切换？

5.如何区别display:none与visibility:hidden？

6.如何设置IE下的iframe背景透明？

提交问题




CSS参考手册»属性列表»定位属性其它定位属性参

考

选


CSSPositioningProperties

CSSPositioningPropertiesCSSPositioningProperties

定位属性

定位属性定位属性

提交问题


定位Positioning

Properties属性

CSSVersion版本

InheritFromParent继承性

Description简介

position CSS2 无检索对象的定位方式

z-index CSS2 无检索或设置对象的层叠顺序

top CSS2 无检索或设置对象与其最近一个定位的父对象顶部相关的位置

right CSS2 无检索或设置对象与其最近一个定位的父对象右边相关的位置

bottom CSS2 无检索或设置对象与其最近一个定位的父对象底边相关的位置

left CSS2 无检索或设置对象与其最近一个定位的父对象左边相关的位置

这种颜色的链接表示是CSS3属性或原属性被CSS3修改并增加了新的

属性值

提交问题




CSS参考手册»属性列表»布局属性其它布局属性参

考

选


CSSLayoutProperties

CSSLayoutPropertiesCSSLayoutProperties

布局属性

布局属性布局属性

提交问题


布局Layout

Properties属性

CSSVersion版本


Description简介

display CSS1/CSS2/CSS3 无设置或检索对象是否及如何显示

float CSS1 无该属性的值指出了对象是否及如何浮动。请参阅clear属性

clear CSS1 无该属性的值指出了不允许有浮动对象的边。请参阅float属性

visibility CSS2 无

设置或检索是否显示对象。与display属性不同，此属性为隐藏的对象保留其占据的物理空间

clip CSS2 无检索或设置对象的可视区域。区域外的部分是透明的

overflow CSS2 无检索或设置当对象的内容超过其指定高度及宽度时如何管理内容

overflow-x CSS3 无检索或设置当对象的内容超过其指定宽度时如何管理内容

overflow-y CSS3 无检索或设置当对象的内容超过其指定高度时如何管理内容


属性值

提交问题




CSS参考手册»属性列表»弹性盒模型属性弹性盒模型属性

参考

选


CSSFlexibleBoxLayoutProperties

CSSFlexibleBoxLayoutPropertiesCSSFlexibleBoxLayoutProperties

弹性盒模型属性

弹性盒模型属性弹性盒模型属性

提交问题



Properties属性

CSSVersion版本


Description简介

box-orient CSS3 无设置或检索弹性盒模型对象的子元素的排列方式。

box-pack CSS3 无设置或检索弹性盒模型对象的子元素的对齐方式。请参阅box-align兄弟属性

box-align CSS3 无设置或检索弹性盒模型对象的子元素的对齐方式。请参阅box-pack兄弟属性

box-flex CSS3 无设置或检索弹性盒模型对象的子元素如何分配其剩余空间。

box-flex-group

CSS3 无设置或检索弹性盒模型对象的子元素的所属组。

box-ordinal-group

CSS3 无设置或检索弹性盒模型对象的子元素的显示顺序。

box-direction

CSS3 无设置或检索弹性盒模型对象的子元素的排列顺序是否反转。

box-lines CSS3 无设置或检索弹性盒模型对象的子元素是否可以换行显示。


属性值。

要使得弹性盒模型属性生效，需先定义display的参数值为box或inline-

box。

根据最新的w3c文档，FlexibleBoxLayout属性可能都要被修改

提交问题



http://www.w3.org/TR/css3-flexbox/


CSS参考手册»属性列表»尺寸属性其它尺寸属性参

考

选


CSSDimensionProperties

CSSDimensionPropertiesCSSDimensionProperties

尺寸属性

尺寸属性尺寸属性

提交问题


尺寸Dimension

Properties属性

CSSVersion版本


Description简介

width CSS1 无检索或设置对象的宽度

min-width CSS2 无设置或检索对象的最小宽度

max-width CSS2 无设置或检索对象的最大宽度

height CSS1 无检索或设置对象的高度

min-height CSS2 无设置或检索对象的最小高度

max-height

CSS2 无设置或检索对象的最大高度


属性值

提交问题




CSS参考手册»属性列表»外补白属性其它外补白属性

参考

选


CSSMarginProperties

CSSMarginPropertiesCSSMarginProperties

外补白属性

外补白属性外补白属性

提交问题


外补白Margin

Properties属性

CSSVersion版本


Description简介

margin CSS1 无检索或设置对象四边的外延边距

margin-top CSS1 无检索或设置对象顶边的外延边距

margin-right

CSS1 无检索或设置对象右边的外延边距

margin-bottom

CSS1 无检索或设置对象底边的外延边距

margin-left CSS1 无检索或设置对象左边的外延边距


属性值

提交问题




CSS参考手册»属性列表»内补白属性其它内补白属性

参考

选


CSSPaddingProperties

CSSPaddingPropertiesCSSPaddingProperties

内补白属性

内补白属性内补白属性

提交问题


内补白Padding

Properties属性

CSSVersion版本


Description简介

padding CSS1 无检索或设置对象四边的内部边距

padding-top

CSS1 无检索或设置对象顶边的内部边距

padding-right

CSS1 无检索或设置对象右边的内部边距

padding-bottom

CSS1 无检索或设置对象底边的内部边距

padding-left

CSS1 无检索或设置对象左边的内部边距


属性值

提交问题




CSS参考手册»属性列表»边框属性其它边框属性参

考

选


CSSBorderProperties

CSSBorderPropertiesCSSBorderProperties

边框属性

边框属性边框属性

提交问题


边框Border

Properties属性

CSSVersion版本


Description简介

border CSS1 无复合属性。设置对象边框的特性

border-width CSS1 无设置或检索对象边框宽度

border-style CSS1 无设置或检索对象边框样式

border-color CSS1 无设置或检索对象边框颜色

border-top CSS1 无复合属性。设置对象顶边的特性

border-top-width

CSS1 无设置或检索对象顶边宽度

border-top-style CSS1 无设置或检索对象顶边样式

border-top-color CSS1 无设置或检索对象顶边颜色

border-right CSS1 无复合属性。设置对象右边的特性

border-right-width

CSS1 无设置或检索对象右边宽度

border-right-style

CSS1 无设置或检索对象右边样式

border-right-color

CSS1 无设置或检索对象右边颜色

border-bottom CSS1 无复合属性。设置对象底边的特性

border-bottom-width

CSS1 无设置或检索对象底边宽度

border-bottom-style

CSS1 无设置或检索对象底边样式

border-bottom-color

CSS1 无设置或检索对象底边颜色

border-left CSS1 无复合属性。置对象左边的特性

border-left-width

CSS1 无设置或检索对象左边宽度

border-left-style CSS1 无设置或检索对象左边样式

border-left-color CSS1 无设置或检索对象左边颜色

border-image CSS3 无设置或检索对象的边框使用图像来填充

border-radius CSS3 无设置或检索对象使用圆角边框

border-top-left-radius

CSS3 无设置或检索对象左上角圆角边框

border-top-right-radius

CSS3 无设置或检索对象右上角圆角边框

border-bottom-right-radius

CSS3 无设置或检索对象右下角圆角边框

border-bottom-left-radius

CSS3 无设置或检索对象左下角圆角边框

box-shadow CSS3 无设置或检索对象阴影

box-reflect CSS3 无设置或检索对象的倒影


属性值

提交问题




CSS参考手册»属性列表»背景属性其它背景属性参

考

选


CSSBackgroundProperties

CSSBackgroundPropertiesCSSBackgroundProperties

背景属性

背景属性背景属性

提交问题


背景Background

Properties属性

CSSVersion版本


Description简介

background CSS1 无复合属性。设置或检索对象的背景特性

background-color

CSS1 无设置或检索对象的背景颜色

background-image

CSS1/CSS3 无设置或检索对象的背景图像

background-repeat

CSS1/CSS3 无设置或检索对象的背景图像如何铺排填充

background-attachment

CSS1/CSS3 无设置或检索对象的背景图像是随对象内容滚动还是固定的

background-position

CSS1/CSS3 无设置或检索对象的背景图像位置

background-origin

CSS3 无设置或检索对象的背景图像显示的原点

background-clip

CSS3 无检索或设置对象的背景向外裁剪的区域

background-size

CSS3 无检索或设置对象的背景图像的尺寸大小

Multiplebackground

CSS3 无检索或设置对象的多重背景图像


属性值

提交问题




CSS参考手册»属性列表»颜色属性其它颜色属性参

考

选


CSSColorProperties

CSSColorPropertiesCSSColorProperties

色彩属性

色彩属性色彩属性

提交问题


色彩Color

Properties属性

CSSVersion版本


Description简介

color CSS1 有指定颜色。请参阅颜色值

opacity CSS3 无检索或设置对象的不透明度。


属性值

提交问题




CSS参考手册»属性列表»字体属性其它字体属性参

考

选


CSSFontProperties

CSSFontPropertiesCSSFontProperties

字体属性

字体属性字体属性

提交问题


字体Font

Properties属性

CSSVersion版本


Description简介

font CSS1/CSS2 有复合属性。设置或检索对象中的文本特性

font-style CSS1 有设置或检索对象中的字体样式

font-variant

CSS1 有设置或检索对象中的文本是否为小型的大写字母

font-weight

CSS1 有设置或检索对象中的文本字体的粗细

font-size CSS1 有设置或检索对象中的字体尺寸

font-family

CSS1 有设置或检索用于对象中文本的字体名称序列

font-stretch

CSS3 有设置或检索对象中的文字是否横向拉伸变形。


属性值

提交问题


CSS参考手册»属性列表»文本属性其它文本属性参

考

选


CSSTextProperties

CSSTextPropertiesCSSTextProperties

文本属性

文本属性文本属性

提交问题


文本Text

Properties属性

CSSVersion版本


Description简介

text-indent CSS1 有检索或设置对象中的文本的缩进

text-overflow

CSS3 无设置或检索是否使用一个省略标记（...）标示对象内文本的溢出

text-align CSS1/CSS3 有设置或检索对象中文本的对齐方式

text-transform

CSS1/CSS3 有检索或设置对象中的文本的大小写

text-decoration

CSS1/CSS3 无复合属性。检索或设置对象中的文本的装饰，如下划线、闪烁等

text-decoration-line

CSS3 无检索或设置对象中的文本装饰线条的位置。

text-decoration-color

CSS3 无检索或设置对象中的文本装饰线条的颜色。

text-decoration-style

CSS3 无检索或设置对象中的文本装饰线条的形状。

text-shadow

CSS3 有设置或检索对象中文本的文字是否有阴影及模糊效果

text-fill-color

CSS3 有设置或检索对象中的文字填充颜色

text-stroke CSS3 有复合属性。设置或检索对象中的文字的描边

text-stroke-width

CSS3 有设置或检索对象中的文字的描边厚度

text-stroke-color

CSS3 有设置或检索对象中的文字的描边颜色

letter-spacing

CSS1 有检索或设置对象中的文字之间的间隔

word-spacing

CSS1 有检索或设置对象中的单词之间插入的空格数。

vertical-align

CSS1/CSS2 无设置或检索对象内容的垂直对其方式

word-wrap CSS3 有设置或检索当当前行超过指定容器的边界时是否断开转行

white-space

CSS1 有设置或检索对象内空格的处理方式

direction CSS2 有检索或设置文本流的方向

unicode-bidi

CSS2 无用于同一个页面里存在从不同方向读进的文本显示。与direction属性一起使用

line-height CSS1 有检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离

检索或设置对象中的制表符的

tab-size CSS3 有长度


属性值

提交问题




CSS参考手册»属性列表»列表属性其它列表属性参

考

选


CSSListProperties

CSSListPropertiesCSSListProperties

列表属性

列表属性列表属性

提交问题


列表List

Properties属性

CSSVersion版本


Description简介

list-style CSS1 有复合属性。设置列表项目相关内容

list-style-image

CSS1 有设置或检索作为对象的列表项标记的图像

list-style-position

CSS1 有设置或检索作为对象的列表项标记如何根据文本排列

list-style-type

CSS1/CSS2 有设置或检索对象的列表项所使用的预设标记


属性值

提交问题




CSS参考手册»属性列表»表格属性其它表格属性参

考

选


CSSTableProperties

CSSTablePropertiesCSSTableProperties

表格属性

表格属性表格属性

提交问题


表格Table

Properties属性

CSSVersion版本


Description简介

table-layout

CSS2 无设置或检索表格的布局算法

border-collapse

CSS2 有设置或检索表格的行和单元格的边是合并在一起还是按照标准的HTML样式分开

border-spacing

CSS2 有设置或检索当表格边框独立时，行和单元格的边框在横向和纵向上的间距

caption-side

CSS2 有设置或检索表格的caption对象是在表格的那一边

empty-cells

CSS2 有设置或检索当表格的单元格无内容时，是否显示该单元格的边框


属性值

提交问题




CSS参考手册»属性列表»内容属性其它内容属性参

考

选


CSSContentProperties

CSSContentPropertiesCSSContentProperties

内容属性

内容属性内容属性

提交问题


内容Content

Properties属性

CSSVersion版本


Description简介

content CSS2 无用来和:after及:before伪元素一起使用，在对象前或后显示内容

counter-increment

CSS2 无设定当一个selector发生时计数器增加的值

counter-reset

CSS2 无将指定selector的计数器复位

quotes CSS2 有设置或检索对象内使用的嵌套标记


属性值

提交问题




CSS参考手册»属性列表»用户界面属性其它用户界面属

性

选


CSSUserInterfaceProperties

CSSUserInterfacePropertiesCSSUserInterfaceProperties

用户界面属性

用户界面属性用户界面属性

提交问题



Properties属性

CSSVersion版本


Description简介

outline CSS2 无复合属性。设置或检索对象外的线条轮廓

outline-width

CSS2 无设置或检索对象外的线条轮廓的宽度

outline-style

CSS2 无设置或检索对象外的线条轮廓的样式

outline-color

CSS2 无设置或检索对象外的线条轮廓的颜色

outline-offset

CSS3 无设置或检索对象外的线条轮廓偏移位置的数值

nav-index CSS3 无设置或检索对象的导航顺序。

nav-up CSS3 无设置或检索对象的导航方向。

nav-right CSS3 无设置或检索对象的导航方向。

nav-down CSS3 无设置或检索对象的导航方向。

nav-left CSS3 无设置或检索对象的导航方向。

cursor CSS2 有设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

zoom CSS2 有设置或检索对象的缩放比例。

box-sizing CSS3 无设置或检索对象的盒模型组成模式。

resize CSS3 无设置或检索对象的区域是否允许用户缩放，调节元素尺寸大小。

ime-mode CSS3 无设置或检索是否允许用户激活输入中文，韩文，日文等的输入法（IME）状态。


属性值

提交问题




CSS参考手册»属性列表»多栏属性其它多栏属性参

考

选


CSSMulti-columnProperties

CSSMulti-columnPropertiesCSSMulti-columnProperties

多列属性

多列属性多列属性

提交问题


多列Multi-column

Properties属性

CSSVersion版本


Description简介

columns CSS3 无设置或检索对象的列数和每列的宽度。复合属性

column-width

CSS3 无设置或检索对象每列的宽度

column-count

CSS3 无设置或检索对象的列数

column-gap CSS3 无设置或检索对象的列与列之间的间隙

column-rule CSS3 无设置或检索对象的列与列之间的边框。复合属性

column-rule-width

CSS3 无设置或检索对象的列与列之间的边框厚度。

column-rule-style

CSS3 无设置或检索对象的列与列之间的边框样式。

column-rule-color

CSS3 无设置或检索对象的列与列之间的边框颜色。

column-span

CSS3 无设置或检索对象元素是否横跨所有列。

column-fill CSS3 无设置或检索对象所有列的高度是否统一。

column-break- CSS3 无

设置或检索对象之前是否断

before 行。

column-break-after

CSS3 无设置或检索对象之前是否断行。

column-break-inside

CSS3 无设置或检索对象内部是否断行。


属性值

提交问题




CSS参考手册»属性列表»2D变换属性其它2D变换属

性

选


CSS2DTransformProperties

CSS2DTransformPropertiesCSS2DTransformProperties

2D变换属性

2D2D变换属性变换属性

提交问题


2D变换2DTransform

Properties属性

CSSVersion版本


Description简介

transform CSS3 无检索或设置对象的变换

transform-origin

CSS3 无检索或设置对象中的变换所参照的原点


属性值

提交问题




CSS参考手册»属性列表»过渡属性其它过渡属性参

考

选


CSSTransitionProperties

CSSTransitionPropertiesCSSTransitionProperties

过渡属性

过渡属性过渡属性

提交问题


过渡Transition

Properties属性

CSSVersion版本


Description简介

transition CSS3 无复合属性。检索或设置对象变换时的过渡效果

transition-property

CSS3 无检索或设置对象中的参与过渡的属性

transition-duration

CSS3 无检索或设置对象过渡的持续时间

transition-timing-function

CSS3 无检索或设置对象中过渡的类型

transition-delay

CSS3 无检索或设置对象延迟过渡的时间


属性值

提交问题




CSS参考手册»属性列表»动画属性其它动画属性参

考

选


CSSAnimationProperties

CSSAnimationPropertiesCSSAnimationProperties

动画属性

动画属性动画属性

提交问题


动画Animation

Properties属性

CSSVersion版本


Description简介

animation CSS3 无复合属性。检索或设置对象所应用的动画特效

animation-name

CSS3 无检索或设置对象所应用的动画名称

animation-duration

CSS3 无检索或设置对象动画的持续时间

animation-timing-function

CSS3 无检索或设置对象动画的过渡类型

animation-delay

CSS3 无检索或设置对象动画延迟的时间

animation-iteration-count

CSS3 无检索或设置对象动画的循环次数

animation-direction

CSS3 无检索或设置对象动画在循环中是否反向运动

animation-play-state

CSS3 无检索或设置对象动画的状态

animation-fill-mode

CSS3 无检索或设置对象动画时间之外的状态


属性值

提交问题




CSS参考手册»属性列表»打印属性其它打印属性参

考

选


CSSPrintingProperties

CSSPrintingPropertiesCSSPrintingProperties

打印属性

打印属性打印属性

提交问题


打印Printing

Properties属性

CSSVersion版本


Description简介

page CSS3 无检索或指定显示对象容器时使用的页面类型。

page-break-before

CSS2 无检索或设置对象之前出现的页分割符。

page-break-after

CSS2 无检索或设置对象之后出现的页分割符。

page-break-inside

CSS2 无检索或设置对象容器内部出现的页分割符。


属性值

提交问题




CSS参考手册»属性列表»媒体查询属性其它媒体查询属

性

选


CSSMediaQueriesProperties

CSSMediaQueriesPropertiesCSSMediaQueriesProperties

版本：CSS3


提交问题


语法：





说明：

通过不同的媒体类型和条件定义样式表规则。

媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同

条件。

媒体查询的大部分媒体特性都接受min和max用于表达“大于或等

于”和“小与或等于”。如：width会有min-width和max-width

媒体查询可以被用在CSS中的@media和@import规则上，也可以被用

在HTML和XML中。

示例代码：

@mediascreenand(width:800px){…}


<linkmedia="screenand(width:800px)"rel="stylesheet"href="example.css"/>

<?xml-stylesheetmedia="screenand(width:800px)"rel="stylesheet"href="example.css"?>

媒体特性MediaFeatures

MediaFeatures媒体特性

Value取值

Acceptsmin/max接受min/max

Description简介

width <length> yes定义输出设备中的页面可见区域宽度

height <length> yes定义输出设备中的页面可见区域高度

device-width <length> yes定义输出设备的屏幕可见宽度

device-height

<length> yes定义输出设备的屏幕可见高度

orientationportrait|landscape

no定义'height'是否大于或等于'width'。值portrait代表是，landscape代表否

aspect-ratio <ratio> yes 定义'width'与'height'的比率

device-aspect-ratio

<ratio> yes定义'device-width'与'device-height'的比率。如常见的显示器比率：4/3,16/9,16/10

color <integer> yes定义每一组输出设备的彩色原件个数。如果不是彩色设备，则值等于0

color-index <integer> yes定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0

定义在一个单色框架缓冲区中每像素包含的单色原件个

monochrome <integer> yes 数。如果不是单色设备，则值等于0

resolution <resolution> yes定义设备的分辨率。如：96dpi,300dpi,118dpcm

scanprogressive|interlace

no 定义电视类设备的扫描工序

grid <integer> no用来查询输出设备是否使用栅格或点阵。只有1和0才是有效值，1代表是，0代表否


属性值

浅绿

=支持红色

=不支持墨绿

=部分支持橙色

=实验性质

兼容性：

支持版本\类型


较早版本

6.0-8.04.0-6.0 5.1 13.0

11.50-11.51较近

版本9.0

提交问题




CSS参考手册»属性列表»OnlyIE属性其它OnlyIE属

性

选


CSSOnlyIEProperties

CSSOnlyIEPropertiesCSSOnlyIEProperties

IE私有属性

IEIE私有属性私有属性

提交问题


常用IE私有属性

Properties属性

CSSVersion版本


Description简介

scrollbar-3dlight-color

CSS1 有检索或设置对象滚动条3d亮色阴影边框(threedlightshadow)的外观颜色。

scrollbar-darkshadow-color

CSS1 有检索或设置对象滚动条3d暗色阴影边框(threeddarkshadow)的外观颜色。

scrollbar-highlight-color

CSS1 有检索或设置对象滚动条3d高亮边框(threedhighlight)的外观颜色。

scrollbar-shadow-color

CSS1 有检索或设置对象滚动条3d阴影边框(threedshadow)的外观颜色。

scrollbar-arrow-color

CSS1 有检索或设置对象滚动条方向箭头的颜色。当滚动条出现但不可用时，此属性失效。

scrollbar-face-color

CSS1 有检索或设置对象滚动条3D表面的(threedface)的外观颜色。

scrollbar-track-color

CSS1 有检索或设置对象滚动条拖动区域的外观颜色。

scrollbar-base-color

CSS1 无检索或设置对象滚动条基准颜色，其它界面颜色将据此自动调整。

设置或检索对象所应用的滤镜效

filter CSS1 无果。

behavior CSS1 无设置或检索对象的DHTML行为。

提交问题




CSS参考手册»选择符列表»元素选择符其它元素选择符

参考

选


CSSElementSelectors

CSSElementSelectorsCSSElementSelectors

元素选择符

元素选择符元素选择符

提交问题



Selectors选择符

Name名称

CSSVersion版本

Description简介

*通配选择符(UniversalSelector)

CSS2 所有元素对象。

E类型选择符(TypeSelector)

CSS1以文档语言对象类型作为选择符。

E#myidid选择符(IDSelector)

CSS1以唯一标识符id属性等于myid的E对象作为选择符。

E.myclassclass选择符(ClassSelector)

CSS1以class属性包含myclass的E对象作为选择符。

这种颜色的链接表示是CSS3选择符或原选择符被CSS3修改并赋予了

新的特性

提交问题




CSS参考手册»选择符列表»关系选择符其它关系选择符

参考

选


CSSRelationshipSelectors

CSSRelationshipSelectorsCSSRelationshipSelectors

关系选择符

关系选择符关系选择符

提交问题



Selectors选择符

Name名称

CSSVersion版本

Description简介

EF包含选择符(Descendantcombinator)

CSS1选择所有被E元素包含的F元素。

E>F子选择符(Childcombinator)

CSS2选择所有作为E元素的子元素F。

E+F相邻选择符(Adjacentsiblingcombinator)

CSS2选择紧贴在E元素之后F元素。

E~F兄弟选择符(Generalsiblingcombinator)

CSS3选择E元素所有兄弟元素F。


新的特性

提交问题




CSS参考手册»选择符列表»属性选择符其它选择符参考

选


CSSAttributeSelectors

CSSAttributeSelectorsCSSAttributeSelectors

属性选择符

属性选择符属性选择符

提交问题



Selectors选择符

CSSVersion版本

Description简介

E[att] CSS2 选择具有att属性的E元素。

E[att="val"] CSS2选择具有att属性且属性值等于val的E元素。

E[att~="val"] CSS2选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素。

E[att^="val"] CSS3选择具有att属性且属性值为以val开头的字符串的E元素。

E[att$="val"] CSS3选择具有att属性且属性值为以val结尾的字符串的E元素。

E[att*="val"] CSS3选择具有att属性且属性值为包含val的字符串的E元素。

E[att|="val"] CSS2选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。


新的特性

提交问题




CSS参考手册»选择符列表»伪类选择符其它伪类选择符

参考

选


CSSPseudo-ClassesSelectors

CSSPseudo-ClassesSelectorsCSSPseudo-ClassesSelectors

伪类选择符

伪类选择符伪类选择符

提交问题



Selectors选择符

CSSVersion版本

Description简介

E:link CSS1 设置超链接a在未被访问前的样式。

E:visited CSS1设置超链接a在其链接地址已被访问过时的样式。

E:hover CSS1/CSS2 设置元素在其鼠标悬停时的样式。

E:active CSS1/CSS2设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。

E:focus CSS1/CSS2设置元素在成为输入焦点（该元素的onfocus事件发生）时的样式。

E:lang() CSS2 匹配使用特殊语言的E元素。

E:not() CSS3 匹配不含有s选择符的元素E。

E:root CSS3 匹配E元素在文档的根元素。

E:first-child CSS2 匹配父元素的第一个子元素E。

E:last-child CSS3 匹配父元素的最后一个子元素E。

E:only-child CSS3 匹配父元素仅有的一个子元素E。

E:nth-child(n)

CSS3 匹配父元素的第n个子元素E。

E:nth-last-child(n)

CSS3 匹配父元素的倒数第n个子元素E。

E:first-of-type

CSS3匹配同类型中的第一个同级兄弟元素E。

E:last-of- 匹配同类型中的最后一个同级兄弟元素

type CSS3 E。

E:only-of-type

CSS3匹配同类型中的唯一的一个同级兄弟元素E。

E:nth-of-type(n)

CSS3 匹配同类型中的第n个同级兄弟元素E。

E:nth-last-of-type(n)

CSS3匹配同类型中的倒数第n个同级兄弟元素E。

E:empty CSS3匹配没有任何子元素（包括text节点）的元素E。

E:checked CSS3匹配用户界面上处于选中状态的元素E。(用于inputtype为radio与checkbox时)

E:enabled CSS3匹配用户界面上处于可用状态的元素E。

E:disabled CSS3匹配用户界面上处于禁用状态的元素E。

E:target CSS3 匹配相关URL指向的E元素。

@page:first CSS2设置页面容器第一页使用的样式。仅用于@page规则

@page:left CSS2设置页面容器位于装订线左边的所有页面使用的样式。仅用于@page规则

@page:right CSS2设置页面容器位于装订线右边的所有页面使用的样式。仅用于@page规则


新的特性

提交问题




CSS参考手册»选择符列表»伪对象选择符其它伪对象选择

符

选


CSSPseudo-ElementSelectors

CSSPseudo-ElementSelectorsCSSPseudo-ElementSelectors

伪对象选择符

伪对象选择符伪对象选择符

提交问题



Selectors选择符

CSSVersion版本

Description简介

E:first-letter/E::first-letter

CSS1/CSS3 设置对象内的第一个字符的样式。

E:first-line/E::first-line

CSS1/CSS3 设置对象内的第一行的样式。

E:before/E::before CSS2/CSS3设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用

E:after/E::after CSS2/CSS3设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用

E::selection CSS3 设置对象被选择时的颜色。

*CSS3将伪对象选择符(Pseudo-ElementSelectors)前面的单个冒号(:)修

改为双冒号(::)用以区别伪类选择符(Pseudo-ClassesSelectors)，但以前

的写法仍然有效。


新的特性

提交问题


CSS参考手册»取值列表»颜色值其它颜色值参考

选


CSSColorTypeValues

CSSColorTypeValuesCSSColorTypeValues

颜色值

颜色值颜色值

提交问题


颜色值ColorTypeValues

Name名称

CSSVersion版本

Description简介

ColorName

CSS1用颜色名称来指定颜色。包括基本颜色关键字、系统颜色、SVG颜色关键字等

HEX CSS1 十六进制记法。语法如：#rrggbb或#rgb

RGB CSS2 rgb记法

RGBA CSS3 rgba记法

HSL CSS3 hsl记法

HSLA CSS3 hsla记法

transparent CSS1/CSS3 全透明

这种颜色的链接表示是CSS3取值或取值被CSS3修改并赋予了新的特

性

提交问题




CSS参考手册»取值列表»文本值其它文本值参考

选


CSSTextualDataTypeValues

CSSTextualDataTypeValuesCSSTextualDataTypeValues

文本值

文本值文本值

提交问题


文本值CSSTextualDataTypeValues

Name名称

CSSVersion版本

Description简介

<string> CSS2 字符串(含转义字符串)。

<url> CSS2在网页上提供一个资源地址。（图像，声频，视频或浏览器支持的其他任何资源）

<identifier> CSS2 使用用户自定义标识名作为组件取值。


性

提交问题




CSS参考手册»取值列表»函数值其它函数值参考

选


CSSFunctionalNotationsTypeValues

CSSFunctionalNotationsTypeValuesCSSFunctionalNotationsTypeValues

函数值

函数值函数值

提交问题


函数值CSSFunctionalNotationsTypeValues

Name名称

CSSVersion版本

Description简介

counter() CSS2 插入计数器。

attr() CSS3 插入元素的属性值。

calc() CSS3 用于动态计算长度值。

min() CSS3 用于比较数值的大小并取出最小的那个。

max() CSS3 用于比较数值的大小并取出最大的那个。

cycle() CSS3允许子孙元素使用取值序列中的值循环替换继承而来的值。


性

提交问题




CSS参考手册»取值列表»图像值其它图像值参考

选


CSSImageTypeTypeValues

CSSImageTypeTypeValuesCSSImageTypeTypeValues

图像值

图像值图像值

提交问题


图像值CSSImageTypeValues

Name名称

CSSVersion版本

Description简介

linear-gradient() CSS3 用线性渐变创建图像。

radial-gradient() CSS3 用径向渐变创建图像。

repeating-linear-gradient()

CSS3用重复的线性渐变创建图像。

repeating-radial-gradient()

CSS3用重复的径向渐变创建图像。


性

提交问题




CSS参考手册»取值列表»数字值其它数字值参考

选


CSSNumericDataTypeValues

CSSNumericDataTypeValuesCSSNumericDataTypeValues

数字值

数字值数字值

提交问题


数字值CSSNumericDataTypeValues

Name名称

CSSVersion版本

Description简介

<number> CSS2 浮点数。

<integer> CSS2 整数。


性

提交问题




CSS参考手册»取值列表»其它值其它取值参考

选


CSSOtherDataTypesValues

CSSOtherDataTypesValuesCSSOtherDataTypesValues

其它类型值

其它类型值其它类型值

提交问题


其它类型值CSSOtherDataTypesValues

Name名称

CSSVersion版本

Description简介

<length> CSS2 <number>接长度单位。

<percentage> CSS2 <number>接%

<angle> CSS3 <number>接角度单位。

<time> CSS3 <number>接时间单位。

<frequency> CSS3 <number>接频率单位。

<fraction> CSS3 <number>接剩余空间数单位。

<grid> CSS3 <number>接网格数单位。


性

提交问题




CSS参考手册»单位列表»长度单位其它长度单位参

考

选


CSSLengthUnits

CSSLengthUnitsCSSLengthUnits

长度单位

长度单位长度单位

提交问题



LengthUnits长度单位

CSSVersion版本

Description简介

文本相对长度单位Font-relativeLengthUnits

em CSS1 相对于当前对象内文本的字体尺寸

ex CSS1 相对于字符“x”的高度。通常为字体高度的一半

ch CSS3 数字“0”的宽度

rem CSS3 相对于根元素(即html元素)font-size计算值的倍数

视口相对长度单位Viewport-relativeLengthUnits

vw CSS3 相对于视口的宽度。视口被均分为100单位的vw

vh CSS3 相对于视口的高度。视口被均分为100单位的vh

vm CSS3相对于视口的宽度或高度，总是相对于小的那个。视口的宽度或高度被均分为100单位的vm

绝对长度单位AbsoluteLengthUnits

cm CSS1 厘米

mm CSS1 毫米

in CSS1 英寸（inches）;1in=2.54cm

pt CSS1 点（points）;1pt=1/72in

pc CSS1 派卡（picas）;1pc=12pt

px CSS1 像素（pixels）;1px=1/96in


提交问题




CSS参考手册»单位列表»角度单位其它角度单位参

考

选


CSSAngleUnits

CSSAngleUnitsCSSAngleUnits

角度单位

角度单位角度单位

提交问题



AngleUnits角度单位

CSSVersion版本

Description简介

deg CSS3 度（Degrees）

grad CSS3 梯度（Gradians）

rad CSS3 弧度（Radians）

turn CSS3 转、圈（Turns）


提交问题




CSS参考手册»单位列表»时间单位其它时间单位参

考

选


CSSTimeUnits

CSSTimeUnitsCSSTimeUnits

时间单位

时间单位时间单位

提交问题



TimeUnits时间单位

CSSVersion版本

Description简介

s CSS3 秒

ms CSS3 毫秒


提交问题




CSS参考手册»单位列表»频率单位其它频率单位参

考

选


CSSFrequencyUnits

CSSFrequencyUnitsCSSFrequencyUnits

频率单位

频率单位频率单位

提交问题



FrequencyUnits频率单位

CSSVersion版本

Description简介

Hz CSS3 赫兹

kHz CSS3 千赫兹


提交问题




CSS参考手册»单位列表»布局单位其它布局单位参

考

选


CSSLayout-specificUnits

CSSLayout-specificUnitsCSSLayout-specificUnits

特殊布局单位

特殊布局单位特殊布局单位

提交问题



Layout-specificUnits特殊布局单位

CSSVersion版本

Description简介

fr CSS3 剩余空间分配数

gr CSS3 网格数


提交问题




CSS参考手册»属性列表»3D变换属性其它3D变换属

性

选


CSS3DTransformProperties

CSS3DTransformPropertiesCSS3DTransformProperties

3D变换属性

3D3D变换属性变换属性

提交问题


3D变换3DTransform

Properties属性

CSSVersion版本


Description简介

3Dtransform

CSS3 无检索或设置对象的变换

3Dtransform-origin

CSS3 无检索或设置对象中的变换所参照的原点


属性值

提交问题





性

选


transform版本：CSS3继承性：无

提交问题


语法：

transform：none|matrix(<number>,<number>,<number>,<number>,

<number>,<number>)?translate(<length>[,<length>])?

translateX(<length>)?translateY(<length>)?rotate(<angle>)?

scale(<number>[,<number>])?scaleX(<number>)?scaleY(<number>)?

skew(<angle>[,<angle>])?skewX(<angle>)||skewY(<angle>)?

默认值：none

none：

matrix(<number>,<number>,<number>,<number>,<number>,

<number>)：

translate(<length>[,<length>])：

translateX(<length>)：

translateY(<length>)：

rotate(<angle>)：

scale(<number>[,<number>])：

scaleX(<number>)：

scaleY(<number>)：

skew(<angle>[,<angle>])：

skewX(<angle>)：

skewY(<angle>)：

取值：

无转换

以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于

直接应用一个[a,b,c,d,e,f]变换矩阵

指定对象的2Dtranslation（2D平

移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未


指定对象X轴（水平方向）的平移

指定对象Y轴（垂直方向）的平移

指定对象的2Drotation（2D旋转），需先有

transform-origin属性的定义

指定对象的2Dscale（2D缩放）。第

一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则

默认取第一个参数的值

指定对象X轴的（水平方向）缩放

指定对象Y轴的（垂直方向）缩放

指定对象skewtransformation（斜切扭

曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未


指定对象X轴的（水平方向）扭曲

指定对象Y轴的（垂直方向）扭曲

说明：

设置或检索对象的转换。

对应的脚本特性为transform。


兼容性：

支持版本\类型

版本 6.0-8.04.0-9.0 5.1 13.0-16.0 11.50-11.60

版本 9.0-10.0

写法：

内核类型写法

Webkit(Chrome/Safari) -webkit-transform

Gecko(Firefox) -moz-transform

Presto(Opera) -o-transform

Trident(IE) -ms-transform

W3C transform

示例：


<title>2Dtransform_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>h1{clear:both;padding-top:10px;font-size:16px;font-family:Arial;}.test{zoom:1;width:700px;margin:0;padding:0;list-style:none;}.testli{float:left;margin:20px30px00;border:1pxsolid#000;}.testlip{width:300px;height:100px;margin:0;background:#ddd;}.test.matrix{-moz-transform:matrix(0,1,1,1,10px,10px);-webkit-transform:matrix(0,1,1,1,10,10);-o-transform:matrix(0,1,1,1,10,10);-ms-transform:matrix(0,1,1,1,10,10);transform:matrix(0,1,1,1,10,10);}.test.translatep{-moz-transform:translate(5%,10px);-webkit-transform:translate(10px,10px);-o-transform:translate(10px,10px);-ms-transform:translate(10px,10px);transform:translate(10px,10px);}.test.translate2p{-moz-transform:translate(-10px,-10px);-webkit-transform:translate(-10px,-10px);-o-transform:translate(-10px,-10px);-ms-transform:translate(-10px,-10px);transform:translate(-10px,-10px);}.test.translateXp{-moz-transform:translateX(20px);-webkit-transform:translateX(20px);-o-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px);}.test.translate3p{-moz-transform:translate(20px);-webkit-transform:translate(20px);-o-transform:translate(20px);-ms-transform:translate(20px);transform:translate(20px);}.test.translateYp{-moz-transform:translateY(10px);-webkit-transform:translateY(10px);-o-transform:translateY(10px);-ms-transform:translateY(10px);transform:translateY(10px);}.test.translate4p{-moz-transform:translate(0,10px);-webkit-transform:translate(0,10px);-o-transform:translate(0,10px);-ms-transform:translate(0,10px);transform:translate(0,10px);}.test.rotate{-moz-transform:rotate(-5deg);-webkit-transform:rotate(-5deg);-o-transform:rotate(-5deg);-ms-transform:rotate(-5deg);transform:rotate(-5deg);}.test.rotate2{-moz-transform:rotate(5deg);-webkit-transform:rotate(5deg);-o-transform:rotate(5deg);-ms-transform:rotate(5deg);transform:rotate(5deg);}.test.scale{-moz-transform:scale(.8);-webkit-transform:scale(.8);-o-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8);}.test.scale2{-moz-transform:scale(1.2);-webkit-transform:scale(1.2);-o-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2);}.test.skew{-moz-transform:skew(-5deg);-webkit-transform:skew(-5deg);-o-transform:skew(-5deg);-ms-transform:skew(-5deg);transform:skew(-5deg);}.test.skew2{-moz-transform:skew(-5deg,-5deg);-webkit-transform:skew(-5deg,-5deg);-o-transform:skew(-5deg,-5deg);-

运行

提交问题





性

选


3Dtransform-origin版本：CSS3继承性：无

提交问题


语法：

transform-origin：[[[<percentage>|<length>|left|center|right][

<percentage>|<length>|top|center|bottom]?]<length>]|[[[left|

center|right]||[top|center|bottom]]<length>]

默认值：50%50%0

<percentage>：

<length>：

left：


top：


取值：

用百分比指定坐标值。可以为负值。

用长度值指定坐标值。可以为负值。

指定原点的横坐标为left

指定原点的横坐标为center

指定原点的横坐标为right

指定原点的纵坐标为top

指定原点的纵坐标为center

指定原点的纵坐标为bottom

说明：

设置或检索对象以某个原点进行转换。




对应的脚本特性为transformOrigin。


兼容性：

支持版本\类型

版本 6.0-8.04.0-9.0 5.1 13.0-16.0 11.50-11.60

版本 9.0-10.0

写法：

内核类型写法

Webkit(Chrome/Safari) -webkit-transform-origin

Gecko(Firefox) -moz-transform-origin

Presto(Opera) -o-transform-origin

Trident(IE) -ms-transform-origin

W3C transform-origin

示例：


<title>transform-origin_CSS参考手册_web前端开发参考手册系列</title><metaname="author"content="JoyDu(飘零雾雨),[email protected]"><metaname="copyright"content="www.doyoe.com"><style>.test{margin:0;padding:0;list-style:none;border:1pxsolid#000;}.testli{width:50px;height:50px;border:1pxsolid#000;background:#ddd; -moz-transform-origin:00;-moz-transform:rotate(45deg); -webkit-transform-origin:00;-webkit-transform:rotate(45deg); -o-transform-origin:00;-o-transform:rotate(45deg); -ms-transform-origin:00;-ms-transform:rotate(45deg); transform-origin:00;transform:rotate(45deg);}</style></head><body><ulclass="test"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li></ul></body></html>

运行

提交问题




CSSSpeechProperties

CSSSpeechPropertiesCSSSpeechProperties

语音属性

语音属性语音属性

提交问题


语音Speech

Properties属性

CSSVersion版本


Description简介

voice-volume

CSS3 有检索或设置音量

voice-balance

CSS3 有检索或设置声音平衡

speakability CSS3 有检索或设置对象过渡的持续时间

speak CSS3 有检索或设置阅读类型

pause CSS3 无检索或设置暂停

pause-before CSS3 无检索或设置暂停前的效果

pause-after CSS3 无检索或设置暂停后的效果

rest CSS3 无检索或设置停止

rest-before CSS3 无检索或设置听之前的效果

rest-after CSS3 无检索或设置停止后的效果

cue CSS3 无检索或设置提示

cue-before CSS3 无检索或设置提示前的效果

cue-after CSS3 无检索或设置提示后的效果

voice-family CSS3 有检索或设置语言

voice-rate CSS3 有检索或设置比率

voice-pitch CSS3 有检索或设置音调

voice-pitch-range

CSS3 有检索或设置音调范围

voice-stress CSS3 有检索或设置重音

voice-duration

CSS3 无检索或设置声音延续时间

phonemes CSS3 无检索或设置音位

提交问题




404你懂的

CSS参考手册»属性列表»OnlyFirefox属性 OnlyFirefox属

性

选


CSSOnlyFirefoxProperties

CSSOnlyFirefoxPropertiesCSSOnlyFirefoxProperties

Firefox私有属性

FirefoxFirefox私有属性私有属性

提交问题


常用Firefox私有属性OnlyFirefox

Properties属性

CSSVersion版本


Description简介

border-colors CSS3 无设置或检索对象边框的多重颜色

border-top-colors

CSS3 无设置或检索对象顶边的多重颜色

border-right-colors

CSS3 无设置或检索对象右边的多重颜色

border-bottom-colors

CSS3 无设置或检索对象底边的多重颜色

border-left-colors

CSS3 无设置或检索对象左边的多重颜色


属性值

提交问题




css参考手册 速查表 速查表快速通道€¦ · box-sizing resize ime-mode 用户界面...

Documents

css参考手册速查表速查表快速通道€¦ · box-sizing resize ime-mode 用户界面...