• Skip to main content
  • Skip to search
  • Skip to select language
MDN Web Docs
  • References
    • Overview / Web Technology

      Web technology reference for developers

    • HTML

      Structure of content on the web

    • CSS

      Code used to describe document style

    • JavaScript

      General-purpose scripting language

    • HTTP

      Protocol for transmitting web resources

    • Web APIs

      Interfaces for building web applications

    • Web Extensions

      Developing extensions for web browsers

    • Web Technology

      Web technology reference for developers

  • Guides
    • Overview / MDN Learning Area

      Learn web development

    • MDN Learning Area

      Learn web development

    • HTML

      Learn to structure web content with HTML

    • CSS

      Learn to style content using CSS

    • JavaScript

      Learn to run scripts in the browser

    • Accessibility

      Learn to make the web accessible to all

  • Plus
    • Overview

      A customized MDN experience

    • AI Help (beta)

      Get real-time assistance and support

    • Updates

      All browser compatibility updates at a glance

    • Documentation

      Learn how to use MDN Plus

    • FAQ

      Frequently asked questions about MDN Plus

  • Blog
  • Play
  • AI Help Beta
  • Log in
  • Sign up for free
  1. Web 开发技术
  2. CSS：层叠样式表
  3. CSS 生成内容

此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

In this article

  • 参考
  • 规范
  1. CSS
  2. 教程
  3. CSS 基础
  4. CSS 第一步
    1. CSS 第一步概述
    2. 什么是 CSS?
    3. CSS 入门
    4. CSS 的结构是怎样的
    5. CSS 是如何工作的
    6. 测验：为传记页面添加样式
  5. CSS 构建
    1. CSS 构建基础概述
    2. CSS 选择器
    3. Type, class, and ID selectors
    4. Attribute selectors
    5. Pseudo-classes and pseudo-elements
    6. Combinators
    7. 级联与继承
    8. Cascade layers
    9. 盒子模型
    10. 背景和边框
    11. 处理不同方向的文本
    12. 溢出
    13. CSS 值和单位
    14. 在 CSS 中调整大小
    15. 图像、媒体和表单元素
    16. 样式化表格
    17. 调试 CSS
    18. 组织你的 CSS
    19. 测验：基本的 CSS 理解
    20. 测验：创建精美的信纸
    21. 测验：一个漂亮的盒子
  6. 样式化文本
    1. 样式化文本概述
    2. 基础文本与字体样式化
    3. 样式化列表
    4. 样式化链接
    5. Web 字体
    6. 测验：排版社区大学首页
  7. CSS 布局概述
    1. CSS 布局概述
    2. Introduction to CSS layout
    3. 一般的流布局
    4. Flex 布局
    5. 网格
    6. 浮动
    7. 定位
    8. 多栏式布局
    9. 响应式布局
    10. 媒体查询入门指南
    11. 传统的布局方法
    12. 支持旧版浏览器
    13. 测验：对布局基础知识的理解
  8. 参考
  9. Modules
    1. CSS animations
    2. CSS backgrounds and borders
    3. CSS basic user interface
    4. CSS box alignment
    5. CSS box model
    6. CSS cascade and inheritance (en-US)
    7. CSS cascading variables (en-US)
    8. CSS charsets (en-US)
    9. CSS color adjustment (en-US)
    10. CSS colors
    11. CSS compositing and blending (en-US)
    12. CSS conditional rules (en-US)
    13. CSS containment
    14. CSS counter styles
    15. CSS display (en-US)
    16. CSS filter effects (en-US)
    17. CSS flexible box layout
    18. CSS font loading (en-US)
    19. CSS fonts
    20. CSS fragmentation
    21. CSS generated content
    22. CSS grid layout
    23. CSS images (en-US)
    24. CSS lists (en-US)
    25. CSS logical properties and values
    26. CSS masking
    27. CSS media queries
    28. CSS miscellaneous (en-US)
    29. CSS motion path (en-US)
    30. CSS multi-column layout
    31. CSS namespaces (en-US)
    32. CSS nesting (en-US)
    33. CSS overflow (en-US)
    34. CSS paged media
    35. CSS positioned layout
    36. CSS pseudo-elements (en-US)
    37. CSS ruby layout (en-US)
    38. CSS scoping (en-US)
    39. CSS scroll-driven animations (en-US)
    40. CSS scroll snap
    41. CSS scrollbars styling
    42. CSS selectors
    43. CSS shadow parts (en-US)
    44. CSS shapes
    45. CSS table
    46. CSS text
    47. CSS text decoration
    48. CSS transforms
    49. CSS transitions
    50. CSS writing modes
    51. CSSOM view
  10. Properties
    1. -moz-*
      1. -moz-float-edge (en-US) 非标准 已弃用
      2. -moz-force-broken-image-icon (en-US) 非标准 已弃用
      3. -moz-image-region (en-US) 非标准
      4. -moz-orient (en-US) 非标准
      5. -moz-user-focus (en-US) 非标准
      6. -moz-user-input 非标准 已弃用
    2. -webkit-*
      1. -webkit-border-before 非标准
      2. -webkit-box-reflect 非标准
      3. -webkit-line-clamp
      4. -webkit-mask-attachment 非标准
      5. -webkit-mask-box-image (en-US) 非标准
      6. -webkit-mask-composite (en-US) 非标准
      7. -webkit-mask-position-x (en-US) 非标准
      8. -webkit-mask-position-y (en-US) 非标准
      9. -webkit-mask-repeat-x (en-US) 非标准
      10. -webkit-mask-repeat-y (en-US) 非标准
      11. -webkit-overflow-scrolling 非标准
      12. -webkit-tap-highlight-color 非标准
      13. -webkit-text-fill-color
      14. -webkit-text-security (en-US) 非标准
      15. -webkit-text-stroke
      16. -webkit-text-stroke-color
      17. -webkit-text-stroke-width
      18. -webkit-touch-callout 非标准
    3. accent-color
    4. align-*
      1. align-content
      2. align-items
      3. align-self
      4. align-tracks (en-US) 实验性
    5. all
    6. animation-*
      1. animation
      2. animation-composition (en-US)
      3. animation-delay
      4. animation-direction
      5. animation-duration
      6. animation-fill-mode
      7. animation-iteration-count
      8. animation-name
      9. animation-play-state
      10. animation-range (en-US) 实验性
      11. animation-range-end (en-US) 实验性
      12. animation-range-start (en-US) 实验性
      13. animation-timeline (en-US) 实验性
      14. animation-timing-function
    7. appearance
    8. aspect-ratio
    9. backdrop-filter
    10. backface-visibility
    11. background-*
      1. background
      2. background-attachment
      3. background-blend-mode
      4. background-clip
      5. background-color
      6. background-image
      7. background-origin
      8. background-position
      9. background-position-x
      10. background-position-y
      11. background-repeat
      12. background-size
    12. block-size
    13. border-*
      1. border
      2. border-block
      3. border-block-color
      4. border-block-end
      5. border-block-end-color
      6. border-block-end-style
      7. border-block-end-width
      8. border-block-start
      9. border-block-start-color
      10. border-block-start-style
      11. border-block-start-width
      12. border-block-style
      13. border-block-width
      14. border-bottom
      15. border-bottom-color
      16. border-bottom-left-radius
      17. border-bottom-right-radius (en-US)
      18. border-bottom-style
      19. border-bottom-width
      20. border-collapse
      21. border-color
      22. border-end-end-radius
      23. border-end-start-radius
      24. border-image
      25. border-image-outset
      26. border-image-repeat
      27. border-image-slice
      28. border-image-source
      29. border-image-width
      30. border-inline
      31. border-inline-color
      32. border-inline-end
      33. border-inline-end-color
      34. border-inline-end-style
      35. border-inline-end-width
      36. border-inline-start
      37. border-inline-start-color
      38. border-inline-start-style
      39. border-inline-start-width
      40. border-inline-style
      41. border-inline-width
      42. border-left
      43. border-left-color
      44. border-left-style
      45. border-left-width
      46. border-radius
      47. border-right
      48. border-right-color
      49. border-right-style
      50. border-right-width
      51. border-spacing
      52. border-start-end-radius
      53. border-start-start-radius
      54. border-style
      55. border-top
      56. border-top-color
      57. border-top-left-radius
      58. border-top-right-radius
      59. border-top-style
      60. border-top-width
      61. border-width
    14. bottom
    15. box-*
      1. box-align (en-US) 非标准 已弃用
      2. box-decoration-break
      3. box-direction (en-US) 非标准 已弃用
      4. box-flex (en-US) 非标准 已弃用
      5. box-flex-group (en-US) 非标准 已弃用
      6. box-lines (en-US) 非标准 已弃用
      7. box-ordinal-group (en-US) 非标准 已弃用
      8. box-orient 非标准 已弃用
      9. box-pack (en-US) 非标准 已弃用
      10. box-shadow
      11. box-sizing
    16. break-*
      1. break-after
      2. break-before (en-US)
      3. break-inside
    17. caption-side
    18. caret-color
    19. clear
    20. clip 已弃用
    21. clip-path
    22. color
    23. color-scheme
    24. column-*
      1. column-count
      2. column-fill (en-US)
      3. column-gap
      4. column-rule
      5. column-rule-color
      6. column-rule-style
      7. column-rule-width
      8. column-span
      9. column-width (en-US)
    25. columns
    26. contain-*
      1. contain
      2. contain-intrinsic-block-size
      3. contain-intrinsic-height
      4. contain-intrinsic-inline-size
      5. contain-intrinsic-size
      6. contain-intrinsic-width
    27. container-*
      1. container (en-US)
      2. container-name (en-US)
      3. container-type (en-US)
    28. content
    29. content-visibility 实验性
    30. counter-*
      1. counter-increment
      2. counter-reset
      3. counter-set
    31. cursor
    32. direction
    33. display
    34. empty-cells
    35. filter
    36. flex-*
      1. flex
      2. flex-basis
      3. flex-direction
      4. flex-flow
      5. flex-grow
      6. flex-shrink
      7. flex-wrap
    37. float
    38. font-*
      1. font
      2. font-family
      3. font-feature-settings
      4. font-kerning
      5. font-language-override
      6. font-optical-sizing (en-US)
      7. font-palette
      8. font-size
      9. font-size-adjust
      10. font-smooth 非标准
      11. font-stretch
      12. font-style
      13. font-synthesis
      14. font-synthesis-small-caps (en-US)
      15. font-synthesis-style (en-US)
      16. font-synthesis-weight (en-US)
      17. font-variant
      18. font-variant-alternates
      19. font-variant-caps
      20. font-variant-east-asian (en-US)
      21. font-variant-emoji (en-US)
      22. font-variant-ligatures
      23. font-variant-numeric
      24. font-variant-position
      25. font-variation-settings
      26. font-weight
    39. forced-color-adjust (en-US)
    40. gap
    41. grid-*
      1. grid
      2. grid-area
      3. grid-auto-columns
      4. grid-auto-flow
      5. grid-auto-rows
      6. grid-column
      7. grid-column-end (en-US)
      8. grid-column-start (en-US)
      9. grid-row
      10. grid-row-end (en-US)
      11. grid-row-start (en-US)
      12. grid-template
      13. grid-template-areas
      14. grid-template-columns
      15. grid-template-rows
    42. hanging-punctuation
    43. height
    44. hyphenate-character (en-US)
    45. hyphenate-limit-chars (en-US)
    46. hyphens
    47. image-*
      1. image-orientation
      2. image-rendering
      3. image-resolution (en-US) 实验性
    48. initial-letter (en-US) 实验性
    49. initial-letter-align (en-US) 实验性
    50. inline-size
    51. inset-*
      1. inset
      2. inset-block
      3. inset-block-end
      4. inset-block-start
      5. inset-inline
      6. inset-inline-end
      7. inset-inline-start
    52. isolation
    53. justify-*
      1. justify-content
      2. justify-items
      3. justify-self
      4. justify-tracks (en-US) 实验性
    54. left
    55. letter-spacing
    56. line-*
      1. line-break
      2. line-height
      3. line-height-step (en-US) 实验性
    57. list-*
      1. list-style
      2. list-style-image
      3. list-style-position
      4. list-style-type
    58. margin-*
      1. margin
      2. margin-block
      3. margin-block-end
      4. margin-block-start
      5. margin-bottom
      6. margin-inline
      7. margin-inline-end
      8. margin-inline-start
      9. margin-left
      10. margin-right
      11. margin-top
      12. margin-trim (en-US) 实验性
    59. mask-*
      1. mask
      2. mask-border
      3. mask-border-mode
      4. mask-border-outset (en-US)
      5. mask-border-repeat
      6. mask-border-slice
      7. mask-border-source (en-US)
      8. mask-border-width
      9. mask-clip (en-US)
      10. mask-composite (en-US)
      11. mask-image
      12. mask-mode
      13. mask-origin (en-US)
      14. mask-position (en-US)
      15. mask-repeat
      16. mask-size (en-US)
      17. mask-type (en-US)
    60. masonry-auto-flow (en-US) 实验性
    61. math-*
      1. math-depth (en-US)
      2. math-shift (en-US) 实验性
      3. math-style (en-US)
    62. max-*
      1. max-block-size (en-US)
      2. max-height
      3. max-inline-size
      4. max-width
    63. min-*
      1. min-block-size
      2. min-height
      3. min-inline-size
      4. min-width
    64. mix-blend-mode
    65. object-fit
    66. object-position
    67. offset-*
      1. offset
      2. offset-anchor (en-US)
      3. offset-distance (en-US)
      4. offset-path (en-US)
      5. offset-position (en-US) 实验性
      6. offset-rotate (en-US)
    68. opacity
    69. order
    70. orphans (en-US)
    71. outline-*
      1. outline
      2. outline-color
      3. outline-offset
      4. outline-style
      5. outline-width
    72. overflow-*
      1. overflow
      2. overflow-anchor
      3. overflow-block
      4. overflow-clip-margin (en-US)
      5. overflow-inline
      6. overflow-wrap
      7. overflow-x
      8. overflow-y
    73. overscroll-*
      1. overscroll-behavior
      2. overscroll-behavior-block (en-US)
      3. overscroll-behavior-inline (en-US)
      4. overscroll-behavior-x
      5. overscroll-behavior-y
    74. padding-*
      1. padding
      2. padding-block
      3. padding-block-end
      4. padding-block-start
      5. padding-bottom
      6. padding-inline
      7. padding-inline-end
      8. padding-inline-start
      9. padding-left
      10. padding-right
      11. padding-top
    75. page-*
      1. page (en-US)
      2. page-break-after
      3. page-break-before (en-US)
      4. page-break-inside (en-US)
    76. paint-order
    77. perspective
    78. perspective-origin
    79. place-*
      1. place-content
      2. place-items
      3. place-self (en-US)
    80. pointer-events
    81. position
    82. print-color-adjust (en-US)
    83. quotes
    84. resize
    85. right
    86. rotate
    87. row-gap
    88. ruby-align (en-US) 实验性
    89. ruby-position (en-US)
    90. scale
    91. scroll-*
      1. scroll-behavior
      2. scroll-margin
      3. scroll-margin-block
      4. scroll-margin-block-end
      5. scroll-margin-block-start
      6. scroll-margin-bottom
      7. scroll-margin-inline
      8. scroll-margin-inline-end
      9. scroll-margin-inline-start
      10. scroll-margin-left
      11. scroll-margin-right
      12. scroll-margin-top
      13. scroll-padding
      14. scroll-padding-block
      15. scroll-padding-block-end
      16. scroll-padding-block-start
      17. scroll-padding-bottom
      18. scroll-padding-inline
      19. scroll-padding-inline-end
      20. scroll-padding-inline-start
      21. scroll-padding-left
      22. scroll-padding-right
      23. scroll-padding-top
      24. scroll-snap-align
      25. scroll-snap-stop
      26. scroll-snap-type
      27. scroll-timeline (en-US) 实验性
      28. scroll-timeline-axis (en-US) 实验性
      29. scroll-timeline-name (en-US) 实验性
    92. scrollbar-*
      1. scrollbar-color
      2. scrollbar-gutter (en-US)
      3. scrollbar-width
    93. shape-*
      1. shape-image-threshold
      2. shape-margin
      3. shape-outside
    94. tab-size
    95. table-layout
    96. text-*
      1. text-align
      2. text-align-last
      3. text-combine-upright (en-US)
      4. text-decoration
      5. text-decoration-color
      6. text-decoration-line
      7. text-decoration-skip 实验性
      8. text-decoration-skip-ink (en-US)
      9. text-decoration-style
      10. text-decoration-thickness
      11. text-emphasis (en-US)
      12. text-emphasis-color (en-US)
      13. text-emphasis-position (en-US)
      14. text-emphasis-style (en-US)
      15. text-indent
      16. text-justify
      17. text-orientation
      18. text-overflow
      19. text-rendering
      20. text-shadow
      21. text-size-adjust 实验性
      22. text-transform
      23. text-underline-offset
      24. text-underline-position
      25. text-wrap (en-US) 实验性
    97. timeline-scope (en-US) 实验性
    98. top
    99. touch-action
    100. transform-*
      1. transform
      2. transform-box
      3. transform-origin
      4. transform-style
    101. transition-*
      1. transition
      2. transition-delay
      3. transition-duration
      4. transition-property
      5. transition-timing-function
    102. translate
    103. unicode-bidi
    104. user-modify (en-US) 非标准 已弃用
    105. user-select
    106. vertical-align
    107. view-*
      1. view-timeline (en-US) 实验性
      2. view-timeline-axis (en-US) 实验性
      3. view-timeline-inset (en-US) 实验性
      4. view-timeline-name (en-US) 实验性
      5. view-transition-name 实验性
    108. visibility
    109. white-space
    110. white-space-collapse (en-US) 实验性
    111. widows
    112. width
    113. will-change
    114. word-break
    115. word-spacing
    116. writing-mode
    117. z-index
    118. zoom (en-US) 非标准
  11. Selectors
    1. Attribute selectors
    2. Class selectors
    3. ID selectors
    4. & nesting selector (en-US)
    5. Type selectors
    6. Universal selectors
  12. Combinators
    1. Adjacent sibling combinator
    2. Child combinator
    3. Column combinator 实验性
    4. Descendant combinator
    5. General sibling combinator
    6. Namespace separator (en-US)
    7. Selector list
  13. Pseudo-classes
    1. :-moz-broken 非标准
    2. :-moz-drag-over 非标准
    3. :-moz-first-node 非标准
    4. :-moz-handler-blocked (en-US) 非标准
    5. :-moz-handler-crashed (en-US) 非标准
    6. :-moz-handler-disabled (en-US) 非标准
    7. :-moz-last-node (en-US) 非标准
    8. :-moz-loading (en-US) 非标准
    9. :-moz-locale-dir(ltr) (en-US) 非标准
    10. :-moz-locale-dir(rtl) (en-US) 非标准
    11. :-moz-only-whitespace 非标准
    12. :-moz-submit-invalid (en-US) 非标准
    13. :-moz-suppressed (en-US) 非标准
    14. :-moz-user-disabled (en-US) 非标准
    15. :-moz-window-inactive 非标准
    16. :active
    17. :any-link
    18. :autofill
    19. :blank 实验性
    20. :buffering (en-US)
    21. :checked
    22. :current (en-US)
    23. :default
    24. :defined
    25. :dir()
    26. :disabled
    27. :empty
    28. :enabled
    29. :first
    30. :first-child
    31. :first-of-type
    32. :focus
    33. :focus-visible
    34. :focus-within
    35. :fullscreen
    36. :future (en-US) 实验性
    37. :has()
    38. :host
    39. :host-context()
    40. :host()
    41. :hover
    42. :in-range
    43. :indeterminate
    44. :invalid
    45. :is()
    46. :lang()
    47. :last-child
    48. :last-of-type
    49. :left
    50. :link
    51. :local-link (en-US)
    52. :modal (en-US)
    53. :muted (en-US)
    54. :not()
    55. :nth-child()
    56. :nth-last-child()
    57. :nth-last-of-type()
    58. :nth-of-type()
    59. :only-child
    60. :only-of-type
    61. :optional
    62. :out-of-range
    63. :past (en-US) 实验性
    64. :paused
    65. :picture-in-picture
    66. :placeholder-shown
    67. :playing
    68. :popover-open (en-US) 实验性
    69. :read-only
    70. :read-write
    71. :required
    72. :right
    73. :root
    74. :scope
    75. :seeking (en-US)
    76. :stalled (en-US)
    77. :target
    78. :target-within (en-US) 实验性
    79. :user-invalid (en-US)
    80. :user-valid (en-US)
    81. :valid
    82. :visited
    83. :volume-locked (en-US)
    84. :where()
  14. Pseudo-elements
    1. ::-moz-color-swatch (en-US) 非标准
    2. ::-moz-focus-inner (en-US) 非标准
    3. ::-moz-list-bullet (en-US) 非标准
    4. ::-moz-list-number (en-US) 非标准
    5. ::-moz-page (en-US) 非标准
    6. ::-moz-page-sequence (en-US) 非标准
    7. ::-moz-progress-bar 非标准
    8. ::-moz-range-progress 非标准
    9. ::-moz-range-thumb (en-US) 非标准
    10. ::-moz-range-track (en-US) 非标准
    11. ::-moz-scrolled-page-sequence (en-US) 非标准
    12. ::-webkit-inner-spin-button (en-US) 非标准
    13. ::-webkit-meter-bar (en-US) 非标准
    14. ::-webkit-meter-even-less-good-value (en-US) 非标准
    15. ::-webkit-meter-inner-element (en-US) 非标准
    16. ::-webkit-meter-optimum-value (en-US) 非标准
    17. ::-webkit-meter-suboptimum-value (en-US) 非标准
    18. ::-webkit-outer-spin-button (en-US) 非标准
    19. ::-webkit-progress-bar 非标准
    20. ::-webkit-progress-inner-element 非标准
    21. ::-webkit-progress-value 非标准
    22. ::-webkit-scrollbar 非标准
    23. ::-webkit-search-cancel-button (en-US) 非标准
    24. ::-webkit-search-results-button (en-US) 非标准
    25. ::-webkit-slider-runnable-track 非标准
    26. ::-webkit-slider-thumb 非标准
    27. ::after
    28. ::backdrop
    29. ::before
    30. ::cue
    31. ::cue-region (en-US)
    32. ::file-selector-button
    33. ::first-letter
    34. ::first-line
    35. ::grammar-error 实验性
    36. ::highlight() (en-US) 实验性
    37. ::marker
    38. ::part()
    39. ::placeholder
    40. ::selection
    41. ::slotted()
    42. ::spelling-error 实验性
    43. ::target-text 实验性
    44. ::view-transition 实验性
    45. ::view-transition-group 实验性
    46. ::view-transition-image-pair 实验性
    47. ::view-transition-new 实验性
    48. ::view-transition-old 实验性
  15. At-rules
    1. @charset
    2. @color-profile (en-US)
    3. @container (en-US)
    4. @counter-style
    5. @document 非标准 已弃用
    6. @font-face
    7. @font-feature-values
    8. @font-palette-values (en-US)
    9. @import
    10. @keyframes
    11. @layer
    12. @media
    13. @namespace
    14. @page
    15. @property
    16. @supports
  16. Functions
    1. -moz-image-rect 实验性 非标准
    2. abs() (en-US)
    3. acos()
    4. asin()
    5. atan()
    6. atan2()
    7. attr()
    8. calc()
    9. clamp()
    10. cos()
    11. counter()
    12. counters()
    13. cross-fade() (en-US)
    14. element() 实验性
    15. env()
    16. exp()
    17. fit-content()
    18. hypot()
    19. log()
    20. max()
    21. min()
    22. minmax()
    23. mod() (en-US)
    24. path() (en-US)
    25. pow()
    26. ray() (en-US) 实验性
    27. rem() (en-US)
    28. repeat()
    29. round() (en-US)
    30. sign() (en-US)
    31. sin()
    32. sqrt()
    33. symbols() (en-US)
    34. tan()
    35. url()
    36. var()
  17. Types
    1. <absolute-size> (en-US)
    2. <alpha-value>
    3. <angle>
    4. <angle-percentage>
    5. <basic-shape>
    6. <blend-mode>
    7. <box-edge> (en-US)
    8. <calc-constant> (en-US)
    9. <calc-sum> (en-US)
    10. <color-interpolation-method>
    11. <color>
    12. <custom-ident>
    13. <dashed-ident> (en-US)
    14. <dimension>
    15. <display-box>
    16. <display-inside> (en-US)
    17. <display-internal>
    18. <display-legacy>
    19. <display-listitem> (en-US)
    20. <display-outside>
    21. <easing-function>
    22. <filter-function>
    23. <flex>
    24. <frequency>
    25. <frequency-percentage> (en-US)
    26. <generic-family> (en-US)
    27. <gradient>
    28. <hex-color>
    29. <hue> (en-US)
    30. <hue-interpolation-method>
    31. <ident> (en-US)
    32. <image>
    33. <integer>
    34. <length>
    35. <length-percentage>
    36. <line-style> (en-US)
    37. <named-color>
    38. <number>
    39. <overflow> (en-US)
    40. <percentage>
    41. <position>
    42. <ratio>
    43. <relative-size> (en-US)
    44. <resolution>
    45. <shape> (en-US) 已弃用
    46. <string>
    47. <system-color>
    48. <time>
    49. <time-percentage>
    50. <transform-function>
  18. 指南
  19. 动画
    1. 运用 CSS 动画
  20. 背景和边框
    1. 多个背景的应用
    2. 重设背景图片的大小
  21. 盒子的对齐方式
    1. 块布局中的对齐方式 (en-US)
    2. Flex 布局中的对齐方式
    3. Grid 布局中的盒模型对齐 (en-US)
    4. 多栏式布局中的对齐方式 (en-US)
  22. 盒子模型
    1. 盒子模型基础简介
    2. 外边距重叠
  23. 列
    1. 多列布局的基础概念
    2. 多列布局的样式
    3. 多列布局中的跨越与平衡 (en-US)
    4. 处理多列布局的溢出
    5. 多列布局中的内容换行 (en-US)
  24. 条件规则
    1. 运用查询特性
  25. CSS 对象模型视图
    1. 坐标系
  26. Flex 布局
    1. Flex 布局基础
    2. 与其他布局的比较
    3. Flex 容器中的对齐方式
    4. Flex 布局中的排序方式
    5. 控制 Flex 子元素在主轴上的比例
    6. 包装 Flex 布局中的元素
    7. 经典的 Flex 布局示例
    8. Flex 布局的向下兼容性
  27. 流布局
    1. 一般的流布局中的块和内联布局
    2. 应用或脱离流布局
    3. 格式化上下文简介
    4. 流布局和书写模式
    5. 流布局和溢出
  28. 字体
    1. OpenType 字体特性指南
    2. 可变字体
  29. Grid 布局
    1. Grid 布局基础概念
    2. 和其他布局方法的联系
    3. 基于网格线的定位
    4. Grid 模板区域
    5. 使用命名线布局
    6. Grid 布局中的自动定位
    7. Grid 布局中的盒模型对齐
    8. 网格、逻辑值和书写模式
    9. Grid 布局和无障碍
    10. Grid 布局和渐进增强
    11. 运用 Grid 布局实现常见布局
    12. 子网格 (en-US)
    13. Masonry 布局 (en-US)
  30. 图片
    1. 使用 CSS 渐变
  31. 列表和计数器
    1. 运用 CSS 计数器
    2. 调整列表缩进
  32. 逻辑属性
    1. 基础概念
    2. 浮动和定位
    3. Margins, borders and padding
    4. 调整尺寸
  33. 媒体查询
    1. 运用媒体查询
    2. 无障碍相关的媒体查询 (en-US)
    3. 运用编程方法测试媒体查询
  34. Nesting style rules
    1. Using CSS nesting (en-US)
    2. Nesting at-rules (en-US)
    3. Nesting and specificity (en-US)
  35. 定位
    1. CSS z-index
  36. Scroll snap
    1. scroll snap 基础概念
  37. 形状
    1. 形状概述
    2. 使用 box 值指定形状
    3. 基础的形状 (en-US)
    4. 从图片中指定形状 (en-US)
  38. 文本
    1. 包装文本和文本断行 (en-US)
  39. 变换
    1. 运用变换
  40. 过渡
    1. 运用过渡
  41. 布局的 cookbook
    1. 媒体对象
    2. 列
    3. 居中一个元素
    4. 固定的页脚
    5. 分块导航
    6. 面包屑导航
    7. 带有图标的列表 (en-US)
    8. 分页 (en-US)
    9. 卡片
    10. Grid 布局包装器 (en-US)
  43. 工具
    1. 取色器
    2. Box shadow 生成器
    3. 图片边框生成器

In this article

  • 参考
  • 规范

CSS 生成内容

CSS Generated Content 是 CSS 其中一个模块，定义了如何给一个元素添加内容

参考

属性

  • content
  • quotes

规范

Specification
CSS Generated Content Module Level 3

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.
Want to get more involved? Learn how to contribute.

This page was last modified on 2023年6月8日 by MDN contributors.

MDN logo

Your blueprint for a better internet.

  • MDN on Twitter
  • MDN on GitHub
  • MDN Blog RSS Feed

MDN

  • About
  • Blog
  • Careers
  • Advertise with us

Support

  • Product help
  • Report an issue

Our communities

  • MDN Community
  • MDN Forum
  • MDN Chat

Developers

  • Web Technologies
  • Learn Web Development
  • MDN Plus
  • Hacks Blog
Mozilla logo
  • Website Privacy Notice
  • Cookies
  • Legal
  • Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998–2023 by individual mozilla.org contributors. Content available under a Creative Commons license.