CSS 伪类、伪元素、规则、以及属性的速查列表，根据 MDN 归纳整理。 

  1. /* Logical Combinations */
  2. :matches() /*:any()*/   /* 匹配 集合内指定 的元素 */
  3. :not()                  /* 排除 满足指定关系 的元素 */
  4. :has()                  /* 匹配 满足指定关系 的元素*/
  5. /* Linguistic Pseudo-classes */
  6. :dir()                  /* 匹配 设置dir(文字书写方向)属性 的元素 */
  7. :lang()                 /* 匹配 设置lang(定义元素语言)属性 的元素 */
  8. /* Location Pseudo-classes */
  9. :any-link               /* 匹配 任意有链接锚点 的元素*/
  10. :link                   /* 匹配 未处于访问记录中 的链接 */
  11. :visited                /* 匹配 处于访问记录中 的链接 */
  12. :target                 /* 匹配 URL指向的锚点 的元素 */
  13. :scope                  /* 匹配 设置scoped属性的style标签 的作用域 */
  14. /* User Action Pseudo-classes */
  15. :hover                  /* 匹配 处于鼠标悬停状态 的元素 */
  16. :active                 /* 匹配 处于激活状态 的元素 */
  17. :focus                  /* 匹配 处于聚焦状态 的元素 */
  18. :focus-ring             /* 匹配 处于聚焦状态元素 的UA样式(聚焦轮廓) */
  19. :focus-within           /* 匹配 子节点处于聚焦状态 的元素 */
  20. :drop                   /* 匹配 处于拖拽状态 的元素 */
  21. :drop()                 /* 匹配 处于指定拖拽状态 的元素 */
  22. /* Time-dimensional Pseudo-classes */
  23. :current                /* 匹配 处于当前状态 的定义了timeline属性的元素 */
  24. :past                   /* 匹配 处于过去状态 的定义了timeline属性的元素 */
  25. :future                 /* 匹配 处于将来状态 的定义了timeline属性的元素 */
  26. /* Resource State Pseudos */
  27. :playing                /* 匹配 处于播放状态 的元素 */
  28. :paused                 /* 匹配 处于暂停状态 的元素 */
  29. /* The Input Pseudo-classes */
  30. :enabled                /* 匹配 可以编辑 的元素 */
  31. :disabled               /* 匹配 禁止编辑 的元素 */
  32. :read-only              /* 匹配 内容只读 的元素 */
  33. :read-write             /* 匹配 内容可编辑 的元素 */
  34. :placeholder-shown      /* 匹配 显示字段占位符文本 的元素 */
  35. :default                /* 匹配 页面载入默认选中 的元素 */
  36. :checked                /* 匹配 选中状态 的元素 */
  37. :indeterminate          /* 匹配 模糊状态 的元素 */
  38. :valid                  /* 匹配 输入内容通过类型验证 的元素 */
  39. :invalid                /* 匹配 输入内容无法通过类型验证 的元素 */
  40. :in-range               /* 匹配 输入数值符合范围 的元素 */
  41. :out-of-range           /* 匹配 输入数值溢出范围 的元素 */
  42. :required               /* 匹配 设置必填属性 的元素 */
  43. :optional               /* 匹配 可选字段 的元素 */
  44. :user-invalid           /* 匹配 用户输入内容未通过验证 的元素 */
  45. /* Tree-Structural pseudo-classes */
  46. :root                   /* 匹配 文档树 的根元素*/
  47. :empty                  /* 匹配 无子节点 的元素 */
  48. :blank                  /* 匹配 仅包含空格或者换行符 的元素 */
  49. :nth-child(n)           /* 匹配 符合元素集合中指定位置 的元素 */
  50. :nth-last-child(n)      /* 反序匹配 符合元素集合内指定位置 的元素 */
  51. :first-child            /* 匹配 符合元素集合内首个 的元素 */
  52. :last-child             /* 匹配 符合元素集合内末尾 的元素 */
  53. :only-child             /* 匹配 无兄弟节点 的元素 */
  54. :nth-of-type(n)         /* 匹配 符合元素集合中同类型指定位置 的元素 */
  55. :nth-last-of-type(n)    /* 反序匹配 符合元素集合中同类型指定位置 的元素 */
  56. :first-of-type          /* 匹配 每个在元素集合中初次出现 的元素 */
  57. :last-of-type           /* 匹配 每个在元素集合中末次出现 的元素 */
  58. :only-of-type           /* 匹配 无同类兄弟节点 的元素*/
  59. /* Fullscreen API */
  60. :fullscreen             /* 匹配 全屏显示模式中 的元素 */
  61. /* Page Selectors */
  62. :first                  /* 打印文档时首页的样式 */
  63. :left                   /* 打印文档时左侧的样式 */
  64. :right                  /* 打印文档时右侧的样式 */

Pseudo-elements 伪元素

[↑ top](#note-css-order)

需要查询完整的规范内容？[CSS Pseudo-Elements Module Level 4](https://www.w3.org/TR/css-pseudo-4/)

  1. /* Typographic Pseudo-elements */
  2. ::first-line            /* 选取文字块首行字符 */
  3. ::first-letter          /* 选取文字块首行首个字符 */
  4. /* Highlight Pseudo-elements */
  5. ::selection             /* 选取文档中高亮(反白)的部分*/
  6. ::inactive-selection    /* 选取非活动状态时文档中高亮(反白)的部分*/
  7. ::spelling-error        /* 选取被 UA 标记为拼写错误的文本 */
  8. ::grammar-error         /* 选取被 UA 标记为语法错误的文本 */
  9. /* Tree-Abiding Pseudo-elements */
  10. ::before                /* 在选中元素中创建一个前置的子节点 */
  11. ::after                 /* 在选中元素中创建一个后置的子节点 */
  12. ::marker                /* 选取列表自动生成的项目标记符号 */
  13. ::placeholder           /* 选取字段的占位符文本(提示信息) */
  14. /* WebVTT Format */
  15. ::cue                   /* 匹配所选元素中 WebVTT 提示 */
  16. /* Fullscreen API */
  17. ::backdrop              /* 匹配全屏模式下的背景 */

At-rule 规则

[↑ top](#note-css-order)

需要查询完整的内容？[MDN-CSS At-rule](https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule)

  1. @charset ;                              /* 声明样式表的字符集 */
  2.     @import ;                               /* 引入一个外部样式表 */
  3.     @namespace ;                            /* 使用 XML 命名空间 */
  4.     @media () {/*...*/};                    /* 符合媒体查询后块内的样式生效 */
  5.     @supports() {/*...*/};                  /* 检查到CSS属性可用后块内样式生效 */
  6.     @document() {/*...*/};                  /* 符合文档条件后块内样式生效*/
  7.     @page {/*...*/};                        /* 文档进行打印时的样式变化 */
  8.     @font-face {/* ... */};                 /* 声明字体属性集 */
  9.     @keyframes {/*...*/};                   /* 描述 CSS 动画的变化过程 */
  10.     @viewport {/*...*/};                    /* 控制移动设备的视窗尺寸 */
  11.     @counter-style {/*...*/};               /* 声明计数器(counter)样式 */
  12.     @font-feature-values {/*...*/};         /* 定义字体特定的替换和花饰 */

Properties 属性

需要查询完整的内容？[MDN-CSS reference](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference)

summary list

[↑ top](#note-css-order)

  1. ┌── 布局定位
  2.     |   ├── 元素定位
  3.     |   |   └── position...
  4.     |   └── 元素浮动
  5.     |       └── float...
  6.     |—— 盒子模型
  7.     |   ├── 盒子类型
  8.     |   |   ├── display
  9.     |   |   ├── 弹性盒子
  10.     |   |   |   └── flex...
  11.     |   |   ├── 网格系统
  12.     |   |   |   └── grid...
  13.     |   |   ├── 表格模型
  14.     |   |   |   └── table-layout...
  15.     |   |   ├── 列表盒子
  16.     |   |   |   └── list-style...
  17.     |   |   └── 标注模型
  18.     |   |       └── ruby-align...
  19.     |   ├── 盒子属性
  20.     |   |   ├── box-sizing
  21.     |   |   ├── 盒子尺寸
  22.     |   |   |   ├── width...
  23.     |   |   |   ├── height...
  24.     |   |   |   ├── padding...
  25.     |   |   |   ├── border...
  26.     |   |   |   ├── outline...
  27.     |   |   |   └── margin...
  28.     |   |   └── 盒子样式
  29.     |   |       ├── color
  30.     |   |       ├── background...
  31.     |   |       ├── background-blend-mode...
  32.     |   |       ├── clip-path
  33.     |   |       ├── mask...
  34.     |   |       ├── filter
  35.     |   |       ├── box-shadow
  36.     |   |       ├── opacity
  37.     |   |       └── visibility
  38.     |   └── 盒子内容
  39.     |       ├── 溢出处理
  40.     |       |   └── overflow...
  41.     |       ├── 垂直对齐
  42.     |       |   └── vertical-align
  43.     |       ├── 内容分列
  44.     |       |   └── columns...
  45.     |       ├── 文本渲染
  46.     |       |   ├── 排版模式
  47.     |       |   |   └── writing-mode...
  48.     |       |   ├── 文本样式
  49.     |       |   |   ├── text-rendering
  50.     |       |   |   ├── font-feature-settings...
  51.     |       |   |   └── font...
  52.     |       |   ├── 文本控制
  53.     |       |   |   ├── text-overflow
  54.     |       |   |   ├── white-space
  55.     |       |   |   ├── overflow-wrap...
  56.     |       |   |   ├── word-break...
  57.     |       |   |   ├── text-align...
  58.     |       |   |   ├── font-synthesis
  59.     |       |   |   ├── font-size-adjust
  60.     |       |   |   ├── letter-spacing...
  61.     |       |   |   └── text-transform...
  62.     |       |   └── 文本装饰
  63.     |       |       ├── quotes
  64.     |       |       ├── tab-size
  65.     |       |       ├── text-indent
  66.     |       |       ├── text-emphasis...
  67.     |       |       ├── text-decoration...
  68.     |       |       └── text-shadow
  69.     |       └── 图片元素
  70.     |           ├── image-rendering...
  71.     |           └── shape-image-threshold...
  72.     |—— 盒子变形
  73.     |   ├── transform-style...
  74.     |   ├── perspective...
  75.     |   └── backface-visibility
  76.     |—— 动态效果
  77.     |   ├── 过渡动画
  78.     |   |   ├── transition...
  79.     |   |   └── animation...
  80.     |   └── 滚动效果
  81.     |       └── scroll-behavior...
  82.     └── 其他属性
  83.         ├── 用户行为
  84.         |   ├── resize
  85.         |   ├── cursorresize...
  86.         |   ├── touch-action
  87.         |   ├── caret-color
  88.         |   └── ime-mode
  89.         ├── 元素属性
  90.         |   └── object-fit
  91.         |   ├── object-position
  92.         |   ├── content
  93.         |   ├── counter-reset...
  94.         |   ├── will-change
  95.         |   ├── pointer-events
  96.         |   ├── z-index
  97.         |   └── all
  98.         ├── 定义变量
  99.         |   └── --*
  100.         └── 页面打印
  101.             ├── page-break-before...
  102.             └── widows

detail list

[↑ top](#note-css-order)

  1. <length>:      .em | .ex | .ch | .rem | .lh | .rlh | .vh | .vw | .vi | .vb | .wmin | .vmax | .px | .mm | .cm | .in | .pt | .pc | .mozmm;
  2. <url>:         url();
  3. <number>:      1 | 1.1 | -1 | +1;
  4. <integer>:     1 | -1 | +1;
  5. <color>:       <hex-color> | <named-color> | transparent | currentcolor | rgb() | hsl() | rgba() | hsla() | <deprecated-system-color>;
  6. div {
  7. /* ------------------------------------------------ */
  8. /* -------------------- 布局定位 ------------------- */
  9. /* ------------------------------------------------ */
  10. /* ---------------------------- */
  11. /* ---------- 元素定位 --------- */
  12. /* ---------------------------- */
  13. /* 元素的定位方式 */
  14. position: static | relative | absolute | fixed | sticky;
  15. /* 使定位后的元素产生位置偏移 */
  16. top:    <length> | <percentages> | auto;
  17. right:  <length> | <percentages> | auto;
  18. bottom: <length> | <percentages> | auto;
  19. left:   <length> | <percentages> | auto;
  20. /* ---------------------------- */
  21. /* ---------- 元素浮动 --------- */
  22. /* ---------------------------- */
  23. /* 元素浮动 */
  24. float: left | right | none | inline-start | inline-end;
  25. /* 是否清除浮动 */
  26. clear: none | left | right | both | inline-start | inline-end;
  27. /* ------------------------------------------------ */
  28. /* -------------------- 盒子模型 ------------------- */
  29. /* ------------------------------------------------ */
  30. /* ---------------------------- */
  31. /* ---------- 盒子类型 --------- */
  32. /* ---------------------------- */
  33. /* 定义元素的盒子类型 */
  34. display: none | inline | block | list-item | inline-list-item | inline-block | inline-table | table | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group | flex | inline-flex | grid | inline-grid | run-in | ruby | ruby-base | ruby-text | ruby-base-container | ruby-text-container | contents;
  35. /* ------------------- */
  36. /* ----- 弹性盒子 ----- */
  37. /* ------------------- */
  38. /* 项目的空间分配 */
  39.     [-] flex: auto | initial | none | ...;
  40. /* 定义项目的拉伸因子 */
  41. flex-grow:   <number>;
  42. /* 定义项目的收缩规则 */
  43. flex-shrink: <number>;
  44. /* 指定项目在主轴方向的初始大小 */
  45. flex-basis:  <length> | <percentages> | content;
  46. /* 容器的主轴方向和换行规则 */
  47.     [-] flex-flow: ...;
  48. /* 定义主轴的方向 */
  49. flex-direction: row | row-reverse | column | column-reverse;
  50. /* 声明是否允许换行 */
  51. flex-wrap:      nowrap | wrap | wrap-reverse;
  52. /* 项目在主轴上的空间分配 */
  53. justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
  54. /* 如何分配侧轴的空间位置 */
  55. align-content:   flex-start | flex-end | center | space-between | space-around | stretch;
  56. /* 项目在侧轴上的空间分配 */
  57. align-items:     flex-start | flex-end | center | baseline | stretch;
  58. /* 独立声明项目在侧轴上的空间分配 */
  59. align-self:      auto | flex-start | flex-end | center | baseline | stretch;
  60. /* 项目的排序权重 */
  61. order:           <integer>;
  62. /* ------------------- */
  63. /* ----- 网格系统 ----- */
  64. /* ------------------- */
  65. /* 网格容器属性 */
  66.     [-] grid: ...;
  67. /* 横向网格线名称和网格高度 */
  68. grid-template-rows:    none | auto | [linename] | <length> |  <percentage> | <flex> | max-content | min-content | minmax() |   fit-content() | repeat();
  69. /* 纵向网格线名称和网格宽度 */
  70. grid-template-columns: none | auto | [linename] | <length> |  <percentage> | <flex> | max-content | min-content | minmax() |   fit-content() | repeat();
  71. /* 设置网格区域名称 */
  72. grid-template-areas:   none | <string> | .;
  73. /* 声明隐式网格行*/
  74. grid-auto-rows:        auto | <length> | <percentage> | <flex> |  max-content | min-content | minmax();
  75. /* 声明隐式网格列*/
  76. grid-auto-columns:     auto | <length> | <percentage> | <flex> |  max-content | min-content | minmax() | fit-content();
  77. /* 网格流的方向 */
  78. grid-auto-flow:        row | column | dense;
  79. /* 网格列的间距 */
  80. grid-column-gap:       <length> | <percentage>;
  81. /* 网格行的间距 */
  82. grid-row-gap:          <length> | <percentage>;
  83. /* 网格容器行列属性 */
  84.     [-] grid-template: ...;
  85. grid-template-rows: ;
  86. grid-template-columns: ;
  87. grid-template-areas: ;
  88. /* 网格行列间距 */
  89.     [-] grid-gap: ...;
  90. grid-row-gap: ;
  91. grid-column-gap: ;
  92. /* 项目空间位置 */
  93.     [-] grid-area: <custom-ident> | ...;
  94. /* 项目行的初始位置 */
  95. grid-row-start:    auto | span | <integer> | <custom-ident>;
  96. /* 项目行的结束位置 */
  97. grid-row-end:      auto | span | <integer> | <custom-ident>;
  98. /* 项目列的初始位置 */
  99. grid-column-start: auto | span | <integer> | <custom-ident>;
  100. /* 项目列的结束位置 */
  101. grid-column-end:   auto | span | <integer> | <custom-ident>;
  102. /* 项目行的空间位置 */
  103.     [-] grid-column: ...;
  104. grid-column-start: ;
  105. grid-column-end: ;
  106. /* 项目列的空间位置 */
  107.     [-] grid-row: ...;
  108. grid-row-start: ;
  109. grid-row-end: ;
  110. /* ------------------- */
  111. /* ----- 表格模型 ----- */
  112. /* ------------------- */
  113. /* 表格布局算法 */
  114. table-layout:    auto | fixed;
  115. /* 表格空单元格的样式显示处理 */
  116. empty-cells:     show | hide;
  117. /* 表格标题位置 */
  118. caption-side:    top | bottom | block-start | block-end | inline-start | inline-end;
  119. /* 表格的边框是否合并 */
  120. border-collapse: collapse | separate;
  121. /* 设置相邻单元格边框之间的边距 */
  122. border-spacing:  <length> ;
  123. /* ------------------- */
  124. /* ----- 列表盒子 ----- */
  125. /* ------------------- */
  126. /* 列表符号 */
  127.     [-] list-style: ...;
  128. /* 列表符号风格 */
  129. list-style-type:     none | <counter-style> | <string>;
  130. /* 列表符号定位 */
  131. list-style-position: inside | outside;
  132. /* 指定图片作为列表符号 */
  133. list-style-image:    none | <url>;
  134. /* ------------------- */
  135. /* ----- 标注模型 ----- */
  136. /* ------------------- */
  137. /* 注释的对齐方式 */
  138. ruby-align: start | center | space-between | space-around;
  139. /* 在一个ruby容器内如何处理多个注释 */
  140. ruby-merge: auto | collapse | separate;
  141. /* 注释的放置位置 */
  142. ruby-position: over | under | inter-character;
  143. /* ---------------------------- */
  144. /* ---------- 盒子属性 --------- */
  145. /* ---------------------------- */
  146. /* 改变盒模型对元素宽高的计算方式 */
  147. box-sizing: content-box | border-box;
  148. /* ------------------- */
  149. /* ----- 盒子尺寸 ----- */
  150. /* ------------------- */
  151. /* 指定了元素内容区的宽度。*/
  152. width:     <length> | <percentage> | auto | max-content | min-content | fill-available | fit-content;
  153. /* 为元素设置最小宽度 */
  154. min-width: <length> | <percentage> | max-content | min-content | fill-available | fit-content;
  155. /* 为元素设置最大宽度 */
  156. max-width: none | <length> | <percentage> | max-content | min-content | fill-available | fit-content;
  157. /* 指定了元素内容区的高度 */
  158. height:     <length> | <percentage> | auto;
  159. /* 为元素设置最小高度 */
  160. min-height: <length> | <percentage> | max-content | min-content | fill-available | fit-content;
  161. /* 为元素设置最大高度 */
  162. max-height: none | <length> | <percentage> | max-content | min-content | fill-available | fit-content;
  163. /* 盒子内边距 */
  164.     [-] padding: ...;
  165. padding-top:    <length> | <percentage>;
  166. padding-right:  <length> | <percentage>;
  167. padding-bottom: <length> | <percentage>;
  168. padding-left:   <length> | <percentage>;
  169. /* 盒子边框属性 */
  170.     [-] border: ...;
  171. /* 边框宽度 */
  172.           [-] border-width: ...;
  173. border-top-width:    <length> | thin | medium | thick;
  174. border-right-width:  <length> | thin | medium | thick;
  175. border-bottom-width: <length> | thin | medium | thick;
  176. border-left-width:   <length> | thin | medium | thick;
  177. /* 边框样式*/
  178.           [-] border-style: ...;
  179. border-top-style:    none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;
  180. border-right-style:  none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;
  181. border-bottom-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;
  182. border-left-style:   none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;
  183. /* 边框颜色 */
  184.           [-] border-color: ...;
  185. border-top-color:    <color>;
  186. border-right-color:  <color>;
  187. border-bottom-color: <color>;
  188. border-left-color:   <color>;
  189. /* 边框图片属性，会覆盖 border-style */
  190.           [-] border-image: ...;
  191. /* 图片资源路径 */
  192. border-image-source: none | <url>;
  193. /* 图像边框的向内偏移 */
  194. border-image-slice:  <number> | <percentage> | fill;
  195. /* 边框宽度，会覆盖 border-width 属性 */
  196. border-image-width:  <length> | <percentage> | <number> | auto;
  197. /* 边框图像可超出边框盒的大小 */
  198. border-image-outset: <length> | <number>;
  199. /* 图片如何填充边框 */
  200. border-image-repeat: stretch | repeat | round;
  201. /* 上边框的属性 */
  202.           [-] border-top: ...;
  203. border-top-width: ;
  204. border-top-style: ;
  205. border-top-color: ;
  206. /* 右边框的属性 */
  207.           [-] border-right: ...;
  208. border-right-width: ;
  209. border-right-style: ;
  210. border-right-color: ;
  211. /* 下边框的属性 */
  212.           [-] border-bottom: ...;
  213. border-bottom-width: ;
  214. border-bottom-style: ;
  215. border-bottom-color: ;
  216. /* 左边框的属性 */
  217.           [-] border-left: ...;
  218. border-left-width: ;
  219. border-left-style: ;
  220. border-left-color: ;
  221. /* 边框圆角 */
  222.     [-] border-radius: ...;
  223. border-top-right-radius:    <length> | <percentage>;
  224. border-bottom-right-radius: <length> | <percentage>;
  225. border-bottom-left-radius:  <length> | <percentage>;
  226. border-top-left-radius:     <length> | <percentage>;
  227. /* 盒子轮廓线 */
  228.     [-] outline: ...;
  229. /* 轮廓线宽度 */
  230. outline-width: <length> | thin | medium | thick;
  231. /* 轮廓线颜色 */
  232. outline-color: <color> | inver;
  233. /* 轮廓线风格 */
  234. outline-style: auto | none | dotted | dashed | solid | double | groove | ridge | inset | outset;
  235. /* 对轮廓进行偏移 */
  236. outline-offset: <length>;
  237. /* 为元素声明外边距 */
  238.     [-] margin: ...;
  239. margin-top:    <length> | <percentage> | auto;
  240. margin-right:  <length> | <percentage> | auto;
  241. margin-bottom: <length> | <percentage> | auto;
  242. margin-left:   <length> | <percentage> | auto;
  243. /* ------------------- */
  244. /* ----- 盒子样式 ----- */
  245. /* ------------------- */
  246. /* 设置元素前景色 */
  247. color: <color>;
  248. /* 声明背景属性 */
  249.     [-] background: ...;
  250. /* 为元素设置一个或多个背景图像 */
  251. background-image:      none | <url>;
  252. /* 背景图片的初始位置 */
  253. background-position:   left | center | right | top | bottom | <percentage> | <length>;
  254. /* 设置背景图片大小 */
  255. background-size:       <length> | <percentage> | auto | cover | contain;
  256. /* 背景图片平铺方式 */
  257. background-repeat:     no-repeat | repeat-x | repeat-y | repeat | space | round;
  258. /* 指定背景图片原点位置的背景相对区域 */
  259. background-origin:     border-box | padding-box | content-box;
  260. /* 背景在元素内的覆盖范围 */
  261. background-clip:       border-box | padding-box | content-box;
  262. /* 背景是否随跟随容器滚动 */
  263. background-attachment: fixed | local | scroll;
  264. /* 背景色 */
  265. background-color:      <color> | transparent;
  266. /* 背景图片以及背景色的混合模式 */
  267. background-blend-mode: <blend-mode>;
  268. /* 定义元素是否创建新的混合环境 */
  269. isolation:             auto | isolate;
  270. /* 对元素进行裁剪 */
  271. clip-path: url | none | <basic-shape> | <geometry-box>;
  272. /* 对元素使用遮罩 */
  273.     [-] mask: ...;
  274. /* 遮罩层图像 */
  275. mask-image:     none | <url>;
  276. /* 遮罩层模式 */
  277. mask-mode:      alpha | luminance | match-source;
  278. /* 遮罩层位置 */
  279. mask-position:  <position>;
  280. /* 遮罩层大小 */
  281. mask-size:      <length> | <percentage> | auto | cover | contain;
  282. /* 遮罩层如何重复性 */
  283. mask-repeat:    repeat-x | repeat-y | repeat | space | round | no-repeat;
  284. /* 遮罩层的定位区域 */
  285. mask-origin:    border-box | padding-box | content-box | margin-box | fill-box | stroke-box | view-box;
  286. /* 遮罩层的影响范围 */
  287. mask-clip:      border-box | padding-box | content-box | margin-box | fill-box | stroke-box | view-box | no-clip;
  288. /* 选择遮罩层的叠加方式 */
  289. mask-composite: add | subtract | intersect | exclude;
  290. /* <mask>标签中遮罩以亮度或是透明度呈现 */
  291. mask-type: luminance | alpha;
  292. /* 滤镜属性 */
  293. filter: <url> | <filter-function>;
  294. /* 设置元素投影 */
  295. box-shadow: inset | <offset-x> <offset-y> | <blur-radius> | <spread-radius> | <color>;
  296. /* 设置透明度 */
  297. opacity: <number>;
  298. /* 隐藏元素并保留空间位置 */
  299. visibility: visible | hidden | collapse;
  300. /* ---------------------------- */
  301. /* ---------- 盒子内容 --------- */
  302. /* ---------------------------- */
  303. /* ------------------- */
  304. /* ----- 溢出处理 ----- */
  305. /* ------------------- */
  306. /* 规定了内容溢出容器时的处理 */
  307.     [-] overflow: ...;
  308. /* 水平溢出的处理 */
  309. overflow-x: visible | hidden | scroll | auto;
  310. /* 垂直溢出的处理 */
  311. overflow-y: visible | hidden | scroll | auto;
  312. /* ------------------- */
  313. /* ----- 垂直对齐 ----- */
  314. /* ------------------- */
  315. /* 指定行内元素或表格单元格元素的垂直对齐方式 */
  316. vertical-align: baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length>;
  317. /* ------------------- */
  318. /* ----- 内容分列 ----- */
  319. /* ------------------- */
  320. /* 设置列属性 */
  321.     [-] columns: ...;
  322. /* 设置列的宽度 */
  323. column-width: <length> | auto;
  324. /* 设置被划分的列数 */
  325. column-count: <number> | auto;
  326. /* 声明列的样式 */
  327.     [-] column-rule: ...;
  328. /* 列之间的宽度 */
  329. column-rule-width: <length> | thin | medium | thick;
  330. /* 列之间的分割样式 */
  331. column-rule-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;
  332. /* 列之间的颜色 */
  333. column-rule-color: <color>;
  334. /* 声明内容如何分割成列 */
  335. column-fill: auto | balance;
  336. /* 规定元素横跨列数 */
  337. column-span: none | all;
  338. /* 声明列之间的间隔 */
  339. column-gap:  <length> | normal;
  340. /* 指定留在容器底部元素最小行的数量 */
  341. orphans:     <integer>;
  342. /* ------------------- */
  343. /* ----- 文本渲染 ----- */
  344. /* ------------------- */
  345. /* ------------- */
  346. /* -- 排版模式 -- */
  347. /* ------------- */
  348. /* 规定文本的排版模式 */
  349. writing-mode:         horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr;
  350. /* 纵横混排 */
  351. text-combine-upright: none | all | <integer>;
  352. /* 双向排列 */
  353. unicode-bidi:         normal | embed | bidi-override | isolate | isolate-override | plaintext;
  354. /* 控制字符方向 */
  355. text-orientation:     mixed | upright | sideways;
  356. /* 规定文本书写方向 */
  357. direction:            ltr | rtl;
  358. /* ------------- */
  359. /* -- 文本样式 -- */
  360. /* ------------- */
  361. /* 定义如何渲染字体 */
  362. text-rendering: auto | optimizeSpeed | optimizeLegibility | geometricPrecision;
  363. /* 设置OpenType字体样式集，https://blogs.msdn.microsoft.com/ie_cn/2012/01/17/css-4 */
  364. font-feature-settings:  normal | <feature-tag-value>;
  365. /* 声明OpenType文本的语言渲染处理 */
  366. font-language-override: normal | <string>;
  367. /* 文本效果样式 */
  368.     [-] font: caption | icon | menu | message-box | small-caption | status-bar | ...;
  369. /* 选择字体风格 */
  370. font-style:   normal | italic | oblique;
  371. /* 西文字体小写转换大写 */
  372. font-variant: normal | none | small-caps...;
  373. /* 指定字重 */
  374. font-weight:  normal | bold｜lighter | bolder | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
  375. /* 对字体进行变形 */
  376. font-stretch: normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded;
  377. /* 字体大小 */
  378. font-size:    <length> | <percentage> | larger | smaller | xx-small | x-small | small | medium | large | x-large | xx-large;
  379. /* 声明渲染字体 */
  380. font-family:  <family-name> | <generic-name>;
  381. /* 设置行高 */
  382. line-height:  normal | <number> | <length> | <percentage>;
  383. /* ------------- */
  384. /* -- 文本控制 -- */
  385. /* ------------- */
  386. /* 文本溢出处理 white-space:nowrap; overflow: hidden;*/
  387. text-overflow: clip | ellipsis | <string>;
  388. /* 处理元素中的空白符 */
  389. white-space: normal | pre | nowrap | pre-wrap | pre-line;
  390. /* 是否允许单词中断换行 */
  391. overflow-wrap: normal | break-word;
  392. word-wrap:     normal | break-word;
  393. /* 声明单词断行规则 */
  394. word-break: normal | break-all | keep-all;
  395. /* 声明文本断行规则 */
  396. line-break: auto | loose | normal | strict;
  397. /* 西文文本换行时如何处理连字符 */
  398. hyphens:    none | manual | auto;
  399. /* 元素内的内容如何对齐 */
  400. text-align:      start | end | left | right | center | justify | match-parent;
  401. /* 规定如何对齐末行元素 */
  402. text-align-last: auto | start | end | left | right | center | justify;
  403. /* 文本两侧对齐时的空白填充方式 */
  404. text-justify:    auto | inter-character | inter-word | none;
  405. /* 字体合成 */
  406. font-synthesis: none | weight | style;
  407. /* 定义字体的aspect值（字体的小写字母x的高度与font-size高度之间的比率被称为一个字体的 aspect 值） */
  408. font-size-adjust: none | <number>;
  409. /* 定义字间距 */
  410. letter-spacing: normal | <length>;
  411. /* 控制西文字符间隙距离 */
  412. font-kerning:   auto | normal | none;
  413. /* 声明标签和单词的间距 */
  414. word-spacing:   normal | <length> | <percentage>;
  415. /* 控制文本大小写 */
  416. text-transform: none | capitalize | uppercase | lowercase | full-width;
  417. /* ------------- */
  418. /* -- 文本装饰 -- */
  419. /* ------------- */
  420. /* 为元素内容添加引用符号 */
  421. quotes: none | <string>;
  422. /* 制表符（U+0009）宽度 */
  423. tab-size: <integer> | <length>;
  424. /* 文本首行缩进 */
  425. text-indent: <length> | <percentage> | hanging | each-line;
  426. /* 文本重点标记 */
  427.     [-] text-emphasis: ...;
  428. /* 标记符号的类型 */
  429. text-emphasis-style:    none | open | dot | circle | double-circle | triangle | sesame | <string>;
  430. /* 标记符号的颜色 */
  431. text-emphasis-color:    <color>;
  432. /* 文本重点标记的渲染位置 */
  433. text-emphasis-position: over | under | right | left;
  434. /* 文本修饰线 */
  435.     [-] text-decoration: ...;
  436. /* 文本修饰线的颜色 */
  437. text-decoration-color: <color>;
  438. /* 文本修饰线的类型 */
  439. text-decoration-style: solid | double | dotted | dashed | wavy;
  440. /* 文本修饰线的渲染位置 */
  441. text-decoration-line:  none | underline | overline | line-through | blink;
  442. /* 文本下划线位置 */
  443. text-underline-position: auto | under | left | right | under left | right under;
  444. /* 文本阴影 */
  445. text-shadow: none | <color> | <offset-x> <offset-y> | <blur-radius>;
  446. /* ------------------- */
  447. /* ----- 图片元素 ----- */
  448. /* ------------------- */
  449. /* 定义图片缩放算法 */
  450. image-rendering:   auto | crisp-edges | pixelated;
  451. /* 修正图片的预设方向 */
  452. image-orientation: from-image | <angle> | flip;
  453. /* 设定图片分辨率 */
  454. image-resolution:  <resolution>;
  455. /* 设定alpha值提取图像形状 */
  456. shape-image-threshold: <number>;
  457. /* 为形状添加轮廓 */
  458. shape-outside:         none | <shape-box> | <basic-shape> | <url>;
  459. /* 为形状添加外边距 */
  460. shape-margin:          <length> | <percentage>;
  461. /* ------------------------------------------------ */
  462. /* -------------------- 盒子变形 ------------------- */
  463. /* ------------------------------------------------ */
  464. /* 子元素空间状态（2d/3d）*/
  465. transform-style:  flat | preserve-3d;
  466. /* 元素变形 */
  467. transform:        none | <transform-function>;
  468. /* 元素变形范围 */
  469. transform-box:    border-box | fill-box | view-box;
  470. /* 元素变形的中心点*/
  471. transform-origin: <percentage> | <length> | left | center | right | top | bottom | center;
  472. /* 设置透视的观测距离 */
  473. perspective:        none | <length>;
  474. /* 设置透视的灭点位置 */
  475. perspective-origin: <x-position> | <y-position> | <percentage> | <length>;
  476. /* 3d状态下，声明元素背面是否可见 */
  477. backface-visibility: visible | hidden;
  478. /* ------------------------------------------------ */
  479. /* -------------------- 动态效果 ------------------- */
  480. /* ------------------------------------------------ */
  481. /* ---------------------------- */
  482. /* ---------- 过渡动画 --------- */
  483. /* ---------------------------- */
  484. /* 定义元素过渡效果 */
  485.     [-] transition: none | ...;
  486. /* 指定需过渡的属性 */
  487. transition-property:        none | all | <transition-ident>;
  488. /* 过渡效果执行时间 */
  489. transition-duration:        <time>;
  490. /* 定义过渡缓动函数 */
  491. transition-timing-function: <timing-function>;
  492. /* 延迟过渡 */
  493. transition-delay:           <time>;
  494. /* 动画属性 */
  495.     [-] animation: ...;
  496. /* 指定应用声明过的动画标识 */
  497. animation-name:            none | <animation-ident>;
  498. /* 指定动画执行周期 */
  499. animation-duration:        <time>;
  500. /* 定义动画缓动函数 */
  501. animation-timing-function: <timing-function>;
  502. /* 定义延时 */
  503. animation-delay:           <time>;
  504. /* 定义动画循环次数 */
  505. animation-iteration-count: infinite | <number>;
  506. /* 指示是否反向播放 */
  507. animation-direction:       normal | reverse | alternate | alternate-reverse;
  508. /* 指定动画执行前后的元素样式 */
  509. animation-fill-mode:       none | forwards | backwards | both;
  510. /* 定义或查询一个动画的当前状态 */
  511. animation-play-state:      running | paused;
  512. /* ---------------------------- */
  513. /* ---------- 滚动效果 --------- */
  514. /* ---------------------------- */
  515. /* 导航或者CSSOM api产生滚动的过渡效果 */
  516. scroll-behavior:         auto | smooth;
  517. /* 定义元素滚动的snap点类型 */
  518. scroll-snap-type:        none | mandatory | proximity;
  519. /* 定义元素滚动的snap点坐标位置*/
  520. scroll-snap-destination: <position>;
  521. /* 定义元素滚动的snap点坐标偏移位置 */
  522. scroll-snap-coordinate:  none | <position>;
  523. /* ------------------------------------------------ */
  524. /* -------------------- 其他属性 ------------------- */
  525. /* ------------------------------------------------ */
  526. /* ---------------------------- */
  527. /* ---------- 用户行为 --------- */
  528. /* ---------------------------- */
  529. /* 是否可由用户调整元素的尺寸 */
  530. resize: none | both | horizontal | vertical;
  531. /* 声明鼠标悬浮样式 */
  532. cursor:   <url> | auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | -zoom-in | -zoom-out | grab | grabbing;
  533. /* 规定用户手势操作方式 */
  534. touch-action: auto | none | pan-x | pan-left | pan-right | pan-y | pan-up | pan-down | pinch-zoom | manipulation;
  535. /* 声明插入光标的颜色 */
  536. caret-color: auto | <color>;
  537. /* 是否允许激活输入法（IME）状态 */
  538. ime-mode:    auto | normal | active | inactive | disabled;
  539. /* ---------------------------- */
  540. /* ---------- 元素属性 --------- */
  541. /* ---------------------------- */
  542. /* 替换元素的内容如何适应容器 */
  543. object-fit:      fill | contain | cover | none | scale-down;
  544. /* 确定替换元素的位置 */
  545. object-position: left | center | right | top | bottom | <length> | <percentage>;
  546. /* 在::before和::after中插入内容*/
  547. content: none | normal | <string> | <uri> | <counter> | attr() | open-quote | close-quote | no-open-quote | no-close-quote;
  548. /* 为计数器设置初始值 */
  549. counter-reset:     <custom-ident> <integer> | none;
  550. /* 为元素添加计数器 */
  551. counter-increment: <custom-ident> <integer> | none;
  552. /* 通知浏览器进行元素动效的优化 */
  553. will-change: auto | scroll-position | contents | <custom-ident>;
  554. /* 设置鼠标事件穿透 */
  555. pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit;
  556. /* 声明元素重叠时显示的权重 */
  557. z-index: <integer> | auto;
  558. /* 重置除了 unicode-bidi 和 direction 之外的所有属性至初始值或继承值 */
  559. all: initial | inherit | unset;
  560. /* ---------------------------- */
  561. /* ---------- 定义变量 --------- */
  562. /* ---------------------------- */
  563. /* 自定义属性 */
  564.     --*: ...;
  565. /* ---------------------------- */
  566. /* ---------- 页面打印 --------- */
  567. /* ---------------------------- */
  568. /* 设置元素之前的分页符 */
  569. page-break-before: auto | always | avoid | left | right;
  570. /* 设置元素之后的分页符 */
  571. page-break-after:  auto | always | avoid | left | right;
  572. /* 设置元素容器内的分页符 */
  573. page-break-inside: auto | avoid;
  574. /* 页面打印时分页保留的最少行数 */
  575. widows: <integer>;
  576. }