• 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

      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

  • Curriculum New
  • Blog
    • Playground

      Write, test and share your code

    • HTTP Observatory

      Scan a website for free

    • AI Help

      Get real-time assistance and support

  • Log in
  • Sign up for free
  1. 面向开发者的 Web 技术
  2. CSS：层叠样式表
  3. CSS Masking
    • Deutsch
    • English (US)
    • Français
    • 日本語
    • 한국어

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

在本文中

  • Reference
  • Guides
  • Specifications
  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. 类型、类和 ID 选择器
    4. 属性选择器
    5. 伪类与伪元素
    6. 关系选择器
    7. 层叠、优先级与继承
    8. 层叠层
    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. CSS 布局简介
    3. 一般的流布局
    4. 弹性盒布局
    5. 网格布局
    6. 浮动布局
    7. 定位
    8. 多栏式布局
    9. 响应式布局
    10. 媒体查询入门指南
    11. 传统的布局方法
    12. 支持旧版浏览器
    13. 测验：对布局基础知识的理解
  8. 参考
  9. Modules
    1. CSS anchor positioning
    2. CSS 动画
    3. CSS 背景和边框
    4. CSS Basic User Interface
    5. CSS 盒子对齐
    6. CSS 基础框盒模型
    7. CSS box sizing
    8. CSS cascade and inheritance
    9. CSS custom properties for cascading variables
    10. CSS 颜色调整
    11. CSS Color
    12. CSS compositing and blending
    13. CSS conditional rules
    14. CSS 局限
    15. CSS 计数器样式
    16. CSS display
    17. CSS filter effects
    18. CSS 弹性盒子布局
    19. CSS font loading
    20. CSS 字体
    21. CSS 片段
    22. CSS 生成内容
    23. 网格布局
    24. CSS images
    25. CSS inline layout
    26. CSS lists and counters
    27. CSS 逻辑属性与逻辑值
    28. CSS Masking
    29. 媒体查询
    30. CSS motion path
    31. CSS 多列布局
    32. CSS namespaces
    33. CSS 嵌套
    34. CSS overflow
    35. CSS overscroll behavior
    36. CSS 分页媒体
    37. CSS Positioning
    38. CSS properties and values API
    39. CSS pseudo-elements
    40. CSS ruby layout
    41. CSS scoping
    42. CSS scroll-driven animations
    43. CSS 滚动吸附
    44. CSS Scrollbars
    45. CSS 选择器
    46. CSS shadow parts
    47. CSS 形状
    48. CSS syntax
    49. CSS Table
    50. CSS Text
    51. CSS 文本装饰
    52. CSS Transforms
    53. CSS 过渡
    54. CSS view transitions
    55. CSS Writing Modes CSS 写入模式
    56. CSSOM View
  10. Properties
    1. -moz-*
      1. -moz-float-edge 非标准 已弃用
      2. -moz-force-broken-image-icon 非标准 已弃用
      3. -moz-image-region 非标准
      4. -moz-orient 非标准
      5. -moz-user-focus 非标准 已弃用
      6. -moz-user-input 非标准 已弃用
    2. -webkit-*
      1. -webkit-border-before 非标准
      2. -webkit-box-reflect 非标准
      3. -webkit-line-clamp
      4. -webkit-mask-box-image 非标准
      5. -webkit-mask-composite 非标准
      6. -webkit-mask-position-x 非标准
      7. -webkit-mask-position-y 非标准
      8. -webkit-mask-repeat-x 非标准
      9. -webkit-mask-repeat-y 非标准
      10. -webkit-tap-highlight-color 非标准
      11. -webkit-text-fill-color
      12. -webkit-text-security 非标准
      13. -webkit-text-stroke
      14. -webkit-text-stroke-color
      15. -webkit-text-stroke-width
      16. -webkit-touch-callout 非标准
    3. accent-color
    4. align-*
      1. align-content
      2. align-items
      3. align-self
    5. all
    6. anchor-name 实验性
    7. animation-*
      1. animation
      2. animation-composition
      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 实验性
      11. animation-range-end 实验性
      12. animation-range-start 实验性
      13. animation-timeline 实验性
      14. animation-timing-function
    8. appearance
    9. aspect-ratio
    10. backdrop-filter
    11. backface-visibility
    12. 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
    13. block-size
    14. 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
      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
    15. bottom
    16. box-*
      1. box-align 非标准 已弃用
      2. box-decoration-break
      3. box-direction 非标准 已弃用
      4. box-flex 非标准 已弃用
      5. box-flex-group 非标准 已弃用
      6. box-lines 非标准 已弃用
      7. box-ordinal-group 非标准 已弃用
      8. box-orient 非标准 已弃用
      9. box-pack 非标准 已弃用
      10. box-shadow
      11. box-sizing
    17. break-*
      1. break-after
      2. break-before
      3. break-inside
    18. caption-side
    19. caret-color
    20. clear
    21. clip-*
      1. clip 已弃用
      2. clip-path
      3. clip-rule
    22. color-*
      1. color
      2. color-interpolation
      3. color-interpolation-filters
      4. color-scheme
    23. column-*
      1. column-count
      2. column-fill
      3. column-gap
      4. column-rule
      5. column-rule-color
      6. column-rule-style
      7. column-rule-width
      8. column-span
      9. column-width
    24. columns
    25. 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
    26. container-*
      1. container
      2. container-name
      3. container-type
    27. content
    28. content-visibility
    29. counter-*
      1. counter-increment
      2. counter-reset
      3. counter-set
    30. cursor
    31. cx
    32. cy
    33. d
    34. direction
    35. display
    36. dominant-baseline
    37. empty-cells
    38. field-sizing 实验性
    39. fill-*
      1. fill
      2. fill-opacity
      3. fill-rule
    40. filter
    41. flex-*
      1. flex
      2. flex-basis
      3. flex-direction
      4. flex-flow
      5. flex-grow
      6. flex-shrink
      7. flex-wrap
    42. float
    43. flood-color
    44. flood-opacity
    45. font-*
      1. font
      2. font-family
      3. font-feature-settings
      4. font-kerning
      5. font-language-override
      6. font-optical-sizing
      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-position
      15. font-synthesis-small-caps
      16. font-synthesis-style
      17. font-synthesis-weight
      18. font-variant
      19. font-variant-alternates
      20. font-variant-caps
      21. font-variant-east-asian
      22. font-variant-emoji
      23. font-variant-ligatures
      24. font-variant-numeric
      25. font-variant-position
      26. font-variation-settings
      27. font-weight
    46. forced-color-adjust
    47. gap
    48. 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
      8. grid-column-start
      9. grid-row
      10. grid-row-end
      11. grid-row-start
      12. grid-template
      13. grid-template-areas
      14. grid-template-columns
      15. grid-template-rows
    49. hanging-punctuation
    50. height
    51. hyphenate-character
    52. hyphenate-limit-chars
    53. hyphens
    54. image-*
      1. image-orientation
      2. image-rendering
      3. image-resolution 实验性
    55. initial-letter
    56. inline-size
    57. 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
    58. interpolate-size 实验性
    59. isolation
    60. justify-*
      1. justify-content
      2. justify-items
      3. justify-self
    61. left
    62. letter-spacing
    63. lighting-color
    64. line-*
      1. line-break
      2. line-height
      3. line-height-step 实验性
    65. list-*
      1. list-style
      2. list-style-image
      3. list-style-position
      4. list-style-type
    66. 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 实验性
    67. marker-*
      1. marker
      2. marker-end
      3. marker-mid
      4. marker-start
    68. mask-*
      1. mask
      2. mask-border
      3. mask-border-mode
      4. mask-border-outset
      5. mask-border-repeat
      6. mask-border-slice
      7. mask-border-source
      8. mask-border-width
      9. mask-clip
      10. mask-composite
      11. mask-image
      12. mask-mode
      13. mask-origin
      14. mask-position
      15. mask-repeat
      16. mask-size
      17. mask-type
    69. math-*
      1. math-depth
      2. math-shift 实验性
      3. math-style
    70. max-*
      1. max-block-size
      2. max-height
      3. max-inline-size
      4. max-width
    71. min-*
      1. min-block-size
      2. min-height
      3. min-inline-size
      4. min-width
    72. mix-blend-mode
    73. object-fit
    74. object-position
    75. offset-*
      1. offset
      2. offset-anchor
      3. offset-distance
      4. offset-path
      5. offset-position
      6. offset-rotate
    76. opacity
    77. order
    78. orphans
    79. outline-*
      1. outline
      2. outline-color
      3. outline-offset
      4. outline-style
      5. outline-width
    80. overflow-*
      1. overflow
      2. overflow-anchor
      3. overflow-block
      4. overflow-clip-margin
      5. overflow-inline
      6. overflow-wrap
      7. overflow-x
      8. overflow-y
    81. overlay 实验性
    82. overscroll-*
      1. overscroll-behavior
      2. overscroll-behavior-block
      3. overscroll-behavior-inline
      4. overscroll-behavior-x
      5. overscroll-behavior-y
    83. 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
    84. page-*
      1. page
      2. page-break-after
      3. page-break-before
      4. page-break-inside
    85. paint-order
    86. perspective
    87. perspective-origin
    88. place-*
      1. place-content
      2. place-items
      3. place-self
    89. pointer-events
    90. position-*
      1. position
      2. position-anchor 实验性
      3. position-area
      4. position-try 实验性
      5. position-try-fallbacks 实验性
      6. position-try-order 实验性
      7. position-visibility 实验性
    91. print-color-adjust
    92. quotes
    93. r
    94. resize
    95. right
    96. rotate
    97. row-gap
    98. ruby-align
    99. ruby-position
    100. rx
    101. ry
    102. scale
    103. 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 实验性
      28. scroll-timeline-axis 实验性
      29. scroll-timeline-name 实验性
    104. scrollbar-*
      1. scrollbar-color
      2. scrollbar-gutter
      3. scrollbar-width
    105. shape-*
      1. shape-image-threshold
      2. shape-margin
      3. shape-outside
      4. shape-rendering
    106. stop-color
    107. stop-opacity
    108. stroke-*
      1. stroke
      2. stroke-dasharray
      3. stroke-dashoffset
      4. stroke-linecap
      5. stroke-linejoin
      6. stroke-miterlimit
      7. stroke-opacity
      8. stroke-width
    109. tab-size
    110. table-layout
    111. text-*
      1. text-align
      2. text-align-last
      3. text-anchor
      4. text-combine-upright
      5. text-decoration
      6. text-decoration-color
      7. text-decoration-line
      8. text-decoration-skip 实验性
      9. text-decoration-skip-ink
      10. text-decoration-style
      11. 文本装饰线厚度 (粗细)
      12. text-emphasis
      13. text-emphasis-color
      14. text-emphasis-position
      15. text-emphasis-style
      16. text-indent
      17. text-justify
      18. text-orientation
      19. text-overflow
      20. 文本渲染
      21. text-shadow
      22. text-size-adjust 实验性
      23. text-spacing-trim 实验性
      24. text-transform
      25. text-underline-offset
      26. text-underline-position
      27. text-wrap
      28. text-wrap-mode
      29. text-wrap-style
    112. timeline-scope 实验性
    113. top
    114. touch-action
    115. transform-*
      1. transform
      2. transform-box
      3. transform-origin
      4. transform-style
    116. transition-*
      1. transition
      2. transition-behavior
      3. transition-delay
      4. transition-duration
      5. transition-property
      6. transition-timing-function
    117. translate
    118. unicode-bidi
    119. user-modify 非标准 已弃用
    120. user-select
    121. vector-effect
    122. vertical-align
    123. view-*
      1. view-timeline 实验性
      2. view-timeline-axis 实验性
      3. view-timeline-inset 实验性
      4. view-timeline-name 实验性
      5. view-transition-name
    124. visibility
    125. white-space
    126. white-space-collapse
    127. widows
    128. width
    129. will-change
    130. word-break
    131. word-spacing
    132. writing-mode
    133. x
    134. y
    135. z-index
    136. zoom
  11. Selectors
    1. 属性选择器
    2. 类选择器
    3. ID 选择器
    4. & 嵌套选择器
    5. 类型选择器
    6. 通配选择器
  12. Combinators
    1. 子组合器
    2. 列组合器 实验性
    3. 后代选择器
    4. Namespace separator
    5. 接续兄弟组合器
    6. 选择器列表
    7. 后续兄弟选择器
  13. Pseudo-classes
    1. :-moz-broken 非标准 已弃用
    2. :-moz-drag-over 非标准
    3. :-moz-first-node 实验性 非标准
    4. :-moz-handler-blocked 非标准
    5. :-moz-handler-crashed 非标准
    6. :-moz-handler-disabled 非标准
    7. :-moz-last-node 实验性 非标准
    8. :-moz-loading 非标准
    9. :-moz-locale-dir(ltr) 非标准
    10. :-moz-locale-dir(rtl) 非标准
    11. :blank 非标准
    12. :-moz-submit-invalid 非标准
    13. :-moz-suppressed 非标准
    14. :-moz-user-disabled 非标准
    15. :-moz-window-inactive 非标准
    16. :active
    17. :any-link
    18. :autofill
    19. :blank 实验性
    20. :buffering
    21. :checked
    22. :current
    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
    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
    52. :modal
    53. :muted
    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
    64. :paused
    65. :picture-in-picture
    66. :placeholder-shown
    67. :playing
    68. :popover-open
    69. :read-only
    70. :read-write
    71. :required
    72. :right
    73. :root
    74. :scope
    75. :seeking
    76. :stalled
    77. :state()
    78. :target
    79. :target-within 实验性
    80. :user-invalid
    81. :user-valid
    82. :valid
    83. :visited
    84. :volume-locked
    85. :where()
  14. Pseudo-elements
    1. ::-moz-color-swatch 非标准
    2. ::-moz-focus-inner 实验性 非标准
    3. ::-moz-list-bullet 实验性 非标准
    4. ::-moz-list-number 实验性 非标准
    5. ::-moz-meter-bar 非标准
    6. ::-moz-progress-bar 实验性 非标准
    7. ::-moz-range-progress 非标准
    8. ::-moz-range-thumb 非标准
    9. ::-moz-range-track 非标准
    10. ::-webkit-inner-spin-button 非标准
    11. ::-webkit-meter-bar 非标准 已弃用
    12. ::-webkit-meter-even-less-good-value 非标准
    13. ::-webkit-meter-inner-element 非标准
    14. ::-webkit-meter-optimum-value 非标准
    15. ::-webkit-meter-suboptimum-value 非标准
    16. ::-webkit-progress-bar 非标准
    17. ::-webkit-progress-inner-element 非标准
    18. ::-webkit-progress-value 非标准
    19. ::-webkit-scrollbar 非标准
    20. ::-webkit-search-cancel-button 非标准
    21. ::-webkit-search-results-button 非标准
    22. ::-webkit-slider-runnable-track 实验性
    23. ::-webkit-slider-thumb 实验性
    24. ::after
    25. ::backdrop
    26. ::before
    27. ::cue (:cue)
    28. ::file-selector-button
    29. ::first-letter
    30. ::first-line (:first-line)
    31. ::grammar-error
    32. ::highlight()
    33. ::marker
    34. ::part()
    35. ::placeholder
    36. ::selection
    37. ::slotted()
    38. ::spelling-error
    39. ::target-text
    40. ::view-transition
    41. ::view-transition-group
    42. ::view-transition-image-pair
    43. ::view-transition-new
    44. ::view-transition-old
  15. At-rules
    1. @charset
    2. @color-profile
    3. @container
    4. @counter-style
    5. @document 非标准 已弃用
    6. @font-face
    7. @font-feature-values
    8. @font-palette-values
    9. @import
    10. @keyframes
    11. @layer
    12. @media
    13. @namespace
    14. @page
    15. @position-try 实验性
    16. @property
    17. @scope
    18. @starting-style
    19. @supports
    20. @view-transition 实验性
  16. Functions
    1. -moz-image-rect 非标准 已弃用
    2. abs()
    3. acos()
    4. anchor-size() 实验性
    5. anchor() 实验性
    6. asin()
    7. atan()
    8. atan2()
    9. attr
    10. blur()
    11. brightness()
    12. calc-size() 实验性
    13. calc()
    14. circle()
    15. clamp()
    16. color-contrast() 实验性
    17. color-mix()
    18. color()
    19. conic-gradient()
    20. contrast()
    21. cos()
    22. counter()
    23. counters()
    24. cross-fade()
    25. device-cmyk()
    26. drop-shadow()
    27. element 实验性
    28. ellipse()
    29. env()
    30. exp()
    31. fit-content()
    32. grayscale()
    33. hsl()
    34. hue-rotate()
    35. hwb()
    36. hypot()
    37. image-set()
    38. image()
    39. inset()
    40. invert()
    41. lab()
    42. layer()
    43. lch()
    44. light-dark()
    45. linear-gradient()
    46. log()
    47. matrix()
    48. matrix3d()
    49. max()
    50. min()
    51. minmax()
    52. mod()
    53. oklab()
    54. oklch()
    55. opacity()
    56. paint()
    57. palette-mix() 实验性
    58. path()
    59. perspective()
    60. polygon()
    61. pow()
    62. radial-gradient()
    63. ray()
    64. rect()
    65. rem()
    66. repeat()
    67. repeating-conic-gradient()
    68. repeating-linear-gradient()
    69. repeating-radial-gradient()
    70. rgb()
    71. rotate()
    72. rotate3d()
    73. rotateX()
    74. rotateY()
    75. rotateZ()
    76. round()
    77. saturate()
    78. scale()
    79. scale3d()
    80. scaleX()
    81. scaleY()
    82. scaleZ()
    83. scroll() 实验性
    84. sepia()
    85. shape() 实验性
    86. sign()
    87. sin()
    88. skew()
    89. skewX()
    90. skewY()
    91. sqrt()
    92. symbols()
    93. tan()
    94. translate()
    95. translate3d()
    96. translateX()
    97. translateY()
    98. translateZ()
    99. url()
    100. var()
    101. view() 实验性
    102. xywh()
  17. Types
    1. <absolute-size>
    2. <alpha-value>
    3. <angle>
    4. <angle-percentage>
    5. <basic-shape>
    6. <blend-mode>
    7. <box-edge>
    8. <calc-keyword>
    9. <calc-sum>
    10. <color-interpolation-method>
    11. <color>
    12. <custom-ident>
    13. <dashed-ident>
    14. dimension
    15. <display-box>
    16. <display-inside>
    17. <display-internal>
    18. <display-legacy>
    19. <display-listitem>
    20. <display-outside>
    21. <easing-function>
    22. <filter-function>
    23. <flex>
    24. <frequency>
    25. <frequency-percentage>
    26. <generic-family>
    27. <gradient>
    28. <hex-color>
    29. <hue>
    30. <hue-interpolation-method>
    31. <ident>
    32. <image>
    33. <integer>
    34. <length>
    35. <length-percentage>
    36. <line-style>
    37. <named-color>
    38. <number>
    39. <overflow>
    40. <percentage>
    41. <position-area>
    42. <position>
    43. <ratio>
    44. <relative-size>
    45. <resolution>
    46. <shape> 已弃用
    47. <string>
    48. <system-color>
    49. <time>
    50. <time-percentage>
    51. transform-function
    52. <url>
  18. 指南
  19. 动画
    1. 运用 CSS 动画
  20. 背景和边框
    1. 多个背景的应用
    2. 重设背景图片的大小
  21. 盒子的对齐方式
    1. 块布局中的盒对齐方式
    2. 弹性盒布局中的盒对齐方式
    3. 网格布局中的盒模型对齐
    4. 多栏式布局中的盒对齐方式
  22. 盒模型
    1. CSS 基本盒模型简介
    2. 外边距重叠
  23. 颜色
    1. 使用 CSS 为 HTML 元素添加颜色
    2. Color values
    3. Using relative colors
    4. Using color wisely
    5. Web 无障碍：理解颜色和亮度
    6. Web 无障碍：色彩对比度
  24. 多列
    1. 多栏式布局的基础概念
    2. 多栏式布局的样式
    3. 多栏式布局中的跨列与平衡
    4. 处理多栏式布局的溢出
    5. 多栏式布局中的内容换行
  25. 条件规则
    1. 运用特性查询
  26. Containment
    1. Using CSS containment
    2. CSS 容器查询
    3. Using container size and style queries
  27. CSS 对象模型视图
    1. 坐标系
  28. 弹性盒布局
    1. 弹性盒布局基础
    2. 与其他布局的比较
    3. 弹性盒容器中的对齐方式
    4. 弹性盒布局中的排序方式
    5. 控制弹性盒子元素在主轴上的比例
    6. 包装弹性盒布局中的元素
    7. 经典的弹性盒布局示例
  29. 流式布局
    1. 一般的流式布局中的块式和行式布局
    2. 应用或脱离流式布局
    3. 格式化上下文简介
    4. 流式布局和书写模式
    5. 流式布局和溢出
  30. 字体
    1. OpenType 字体特性指南
    2. 可变字体指南
  31. 网格布局
    1. 网格布局基础概念
    2. 和其他布局方法的联系
    3. 基于网格线的定位
    4. 网格模板区域
    5. 使用命名线布局
    6. 网格布局中的自动定位
    7. 网格布局中的盒模型对齐
    8. 网格、逻辑值和书写模式
    9. 网格布局和无障碍
    10. 网格布局和渐进增强
    11. 运用网格布局实现常见布局
    12. 子网格
    13. Masonry 布局
  32. 图片
    1. 使用 CSS 渐变
  33. 列表和计数器
    1. 使用 CSS 计数器
    2. 使列表缩进一致
  34. 逻辑属性
    1. 基础概念
    2. 浮动和定位
    3. 内外边距和边框
    4. 调整尺寸
  35. 数学函数
    1. 使用 CSS 数学函数
  36. 媒体查询
    1. 使用媒体查询
    2. 无障碍相关的媒体查询
    3. 运用编程方法测试媒体查询
    4. Printing
  37. 嵌套样式规则
    1. 使用 CSS 嵌套
    2. 嵌套 @ 规则
    3. 嵌套与优先级
  38. 定位
    1. 理解 CSS z-index
  39. 滚动吸附
    1. 滚动吸附的基本概念
  40. 形状
    1. 形状概述
    2. 使用 box 值指定形状
    3. 基本形状
    4. 从图片中指定形状
  41. 文本
    1. 包装文本和文本断行
  42. 变换
    1. 使用变换
  43. 过渡
    1. 使用过渡
  44. 布局手册
    1. 媒体对象
    2. 多列
    3. 居中一个元素
    4. 粘性页脚
    5. 分离式导航
    6. 面包屑导航
    7. 带有图标的列表
    8. 分页
    9. 卡片
    10. 网格布局包装器
  46. 工具
    1. 取色器
    2. Box shadow 生成器
    3. 图片边框生成器
    4. 圆角边框生成器

在本文中

  • Reference
  • Guides
  • Specifications

CSS Masking

CSS Masking 是一个 CSS 模块，它定义了部分或完全隐藏视觉元素部分的方法，包括遮罩和剪裁。

Reference

Properties

  • clip 已弃用
  • clip-path
  • clip-rule
  • mask
  • mask-border
  • mask-border-mode
  • mask-border-outset
  • mask-border-repeat
  • mask-border-slice
  • mask-border-source
  • mask-border-width
  • mask-clip
  • mask-composite
  • mask-image
  • mask-mode
  • mask-origin
  • mask-position
  • mask-repeat
  • mask-size
  • mask-type

Guides

None.

Specifications

Specification
CSS Masking Module Level 1

Help improve MDN

Learn how to contribute.

This page was last modified on 2023年5月30日 by MDN contributors.

View this page on GitHub • Report a problem with this content
MDN logo

Your blueprint for a better internet.

  • MDN on Mastodon
  • MDN on X (formerly 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–2024 by individual mozilla.org contributors. Content available under a Creative Commons license.