按属性切页
每个 CSS 属性单独一个页面,按属性名就能定位。transition-timing-function 页从语法写到兼容性表,一页讲清一个属性。
官方说明 ↗拖动滑块完成拼图,通过后发送验证码
独立第三方 AI 评测平台 · 只用实测数据
中文版的 CSS3 属性速查手册,每个属性都配语法、取值说明和浏览器兼容表。
css3中文手册是 apiref.com 上的 CSS3 中文参考文档,把每个 CSS 属性的语法、可选值、默认值、继承性、动画性和浏览器兼容情况整理成一页一查的格式。以 transition-timing-function 这一页为例,列出了 ease、linear、ease-in、ease-out、ease-in-out、step-start、step-end、steps()、cubic-bezier() 全部取值及各自的贝塞尔曲线参数,并逐条给出 IE、Firefox、Chrome、Safari、Opera 等浏览器的支持版本。适合写样式时随手翻查某个属性怎么写、哪些浏览器要加前缀。官网未公开使用条款与内容更新说明。
css3中文手册是 apiref.com 上的一个中文技术参考文档栏目,专门收录 CSS3 相关的属性说明。apiref.com 本身是一个面向开发者的在线参考站,除 CSS 外还涵盖 Android、Bootstrap、C、C++、Docker、Go、Java、JavaScript、jQuery、Linux、MongoDB、MySQL、Nginx、Node、PHP、Python、Redis、Spring 等语言与框架的文档条目,首页按首字母 A 到 S 排列。CSS 部分被单独整理成一个中文手册入口,地址是 apiref.com/css-zh/。
手册的组织方式是按「属性」切分页面。每个属性页的结构一致:先给语法定义和默认值,再逐条解释取值含义,最后附一张兼容性表。以 transition-timing-function 页为例,语法写成 transition-timing-function:<single-transition-timing-function> [, <single-transition-timing-function>]*,默认值为 ease,适用于所有元素(含伪对象 :after 和 :before),无继承性,无动画性,计算值取指定值,媒体类型为交互;取值部分把 ease 对应到贝塞尔曲线 (0.25, 0.1, 0.25, 1.0),linear 对应 (0.0, 0.0, 1.0, 1.0),ease-in 对应 (0.42, 0, 1.0, 1.0),ease-out 对应 (0, 0, 0.58, 1.0),ease-in-out 对应 (0.42, 0, 0.58, 1.0)。
用法上,它更适合当作查证工具而不是系统教程。写过渡动画时不确定 steps() 的第二个参数默认是 start 还是 end,翻到对应页面即可确认默认值是 end;不确定某个取值在旧版浏览器上要不要加 -webkit- 或 -moz- 前缀,兼容性表里会直接标出带前缀的版本区间。普通前端开发者、需要临时查 CSS 语法的后端或全栈人员,都可以直接按属性名定位到页面。
每个 CSS 属性单独一个页面,按属性名就能定位。transition-timing-function 页从语法写到兼容性表,一页讲清一个属性。
官方说明 ↗把该属性可选值全部列出并配中文说明。transition-timing-function 覆盖 linear、ease、ease-in、ease-out、ease-in-out、step-start、step-end、steps()、cubic-bezier()。
官方说明 ↗常用关键字直接给等价曲线数值,省去自己查表。ease 等于 (0.25, 0.1, 0.25, 1.0),ease-in-out 等于 (0.42, 0, 0.58, 1.0)。
官方说明 ↗每页开头统一列出语法、默认值、适用于、继承性、动画性、计算值、媒体七项元信息,transition-timing-function 的默认值标为 ease,继承性为无。
官方说明 ↗按 IE、Firefox、Chrome、Safari、Opera、iOS Safari、Android Browser、Android Chrome 分列,标出支持、不支持、部分支持及需加 -webkit-、-moz- 前缀的版本区间。
官方说明 ↗apiref.com 除 CSS 外还收录 Android、Bootstrap、C、C++、Docker、Go、Java、JavaScript、jQuery、Linux、MongoDB、MySQL、Nginx、Node、PHP、Python、Redis、Spring 等条目,统一在一个站内检索。
官方说明 ↗当「查一个 CSS 属性的确切写法和浏览器支持情况」用时,这份中文手册很顺手:取值解释和兼容性表都在同一页,不用在多个站点之间跳转,中文说明也免去了读英文规范的负担。当「系统学 CSS3」用时它就不合适,因为页面是按属性散落的,没有章节顺序,也没有配套练习或示例工程。另外它只覆盖 CSS 这一块,遇到需要结合框架或工具链的问题还得去别处找。
日常写样式时需要即查即用某个属性的准确语法和取值列表,中文说明加兼容性表能省下对照规范的时间。
要兼容老版本浏览器,兼容性表直接标出各浏览器加前缀的版本区间,比凭记忆写前缀可靠。
不常写 CSS,需要快速确认某个属性怎么用。按属性名检索即可,不必通读整本规范。
页面按属性分散,没有学习顺序和配套练习,作为入门教程使用会缺少连贯的进阶路径。
手册以单个属性为单位,若目标是掌握 Flexbox、Grid 这类整套布局方案,还需要另找专题资料配合。
公开页面可以直接访问查阅,按属性名进入对应页面即可看到语法、取值与兼容性表,不需登录。官网未公开收费说明,也未说明是否提供付费增值内容。
相同点是都按属性组织、都附浏览器兼容信息。不同点是这份手册为中文撰写,属性页结构统一为语法、取值、说明、兼容性四段。MDN 覆盖面更广、含更多示例与指南,但以英文内容为主。查单个属性写法时这份中文页面读起来更快。
表格按 IE、Firefox、Chrome、Safari、Opera、iOS Safari、Android Browser、Android Chrome 分列,绿色表示支持、红色表示不支持、粉色表示部分支持,并标出需要加 -webkit- 或 -moz- 前缀的版本区间。
官方包括的取值有 ease、linear、ease-in、ease-out、ease-in-out、step-start、step-end、steps() 和 cubic-bezier()。默认值为 ease,对应贝塞尔曲线 (0.25, 0.1, 0.25, 1.0),多个值之间用逗号分隔。
第一个参数必须为正整数,指定函数的步数;第二个参数取 start 或 end,指定每一步的值发生变化的时间点。第二个参数可省略,默认值为 end。step-start 等同于 steps(1, start),step-end 等同于 steps(1, end)。