相关文章推荐
帅气的消防车  ·  回顾主网启动周第一天·  6 天前    · 
温文尔雅的罐头  ·  論感嘆詞之字幕翻譯__臺灣博碩士論文知識加值系統·  1 月前    · 
豁达的针织衫  ·  首支退出LPL的战队，RA确认退出英雄联盟职 ...·  1 月前    · 
淡定的菠萝  ·  南京公积金贷款可以用来装修吗- 南京本地宝·  8 月前    · 
深沉的便当  ·  张鹭_百度百科·  10 月前    · 
小百科  ›  font-smooth - CSS
字体渲染 css优化 css选择器 font css
鬼畜的番茄
1 周前

非标准: 该特性尚未标准化。我们不建议在生产环境中使用非标准特性，因为它们在浏览器中的支持有限，且可能发生变化或被移除。不过，在没有标准选项的特定情况下，它们可以作为合适的替代方案。

font-smooth CSS 属性控制字体渲染时应用的抗锯齿效果。

Webkit 实现了名为 -webkit-font-smoothing 的相似属性。该属性仅适用于 macOS。

  • auto ——由浏览器决定（如果可用，则使用亚像素抗锯齿；这是默认值）。
  • none ——关闭字体平滑；显示带有锯齿边缘的文本。
  • antialiased ——在像素（而不是亚像素）级别平滑字体。对于深色背景上的浅色文本，从亚像素渲染切换为抗锯齿渲染可以使其看起来更清晰。
  • subpixel-antialiased ——在大多数非视网膜显示器上，这将会提供最清晰的文本。
    • Firefox 实现了名为 -moz-osx-font-smoothing 的相似属性。该属性仅适用于 macOS。

  • auto ——允许浏览器选择字体平滑的优化方式，通常为 grayscale 。
  • grayscale ——用灰度抗锯齿（而不是亚像素）渲染文本。对于深色背景上的浅色文本，从亚像素渲染切换为抗锯齿渲染可以使其看起来更清晰。
    • 初始值 auto
    适用元素 所有元素
    是否是继承属性 是
    计算值 as specified
    动画类型 离散值 
    font-smooth =
  auto | never | always | <absolute-size> | <length>
    
    基础使用示例
    
    
    以下示例展示了在 macOS 上打开字体平滑的 Safari/Chromium 和 Firefox 的等效结果。对于这两类情况，平滑的字体应该看起来更细一些。
    

    对于那些没有使用 macOS 系统的用户，这里有一张截图（后面会有实时版本）：
    

    html
    <p>Without font smoothing</p>
<p class="smoothed">With font smoothing</p>

    css
    html {
  background-color: black;
  color: white;
  font-size: 3rem;
  text-align: center;
.smoothed {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
    
    不属于任何规范。
    
    
    浏览器兼容性
    
    

  • 请停止“修复”字体平滑——UsabilityPost
    • 

  • 不干涉字体平滑和抗锯齿
    • 
      
    1. CSS
    2. 初学者教程
    3. 你的第一个网站：样式化内容
    4. CSS 样式基础
      1. CSS 如何运行
      2. 让我们开始 CSS 的学习之旅
      3. 挑战：为传记页面添加样式
      4. CSS 选择器
      5. 属性选择器
      6. 伪类和伪元素
      7. 关系选择器
      8. 盒模型
      9. 层叠、优先级与继承
      10. 值和单位
      11. 在 CSS 中调整大小
      12. 背景与边框
      13. 溢出的内容
      14. 图像、媒体和表单元素
      15. 样式化表格
      16. 调试 CSS
      17. 挑战：基本的 CSS 理解
      18. 挑战：创建精美的信纸
      19. CSS 构建
    5. CSS 文本样式
      1. 基本文本和字体样式
      2. 为列表添加样式
      3. 样式化链接
      4. Web 字体
      5. 挑战：排版社区大学首页
    6. CSS 布局概述
      1. 介绍 CSS 布局
      2. 浮动
      3. 定位
      4. 弹性盒子
      5. 网格
      6. 响应式设计
      7. 媒体查询入门指南
      8. 挑战：基本布局理解
    7. CSS 参考
    8. 模块
      1. CSS anchor positioning
      2. CSS 动画
      3. CSS 背景和边框
      4. CSS Basic User Interface
      5. CSS borders and box decorations
      6. CSS 盒子对齐
      7. CSS 基础框盒模型
      8. CSS box sizing
      9. CSS cascading and inheritance
      10. CSS 颜色调整
      11. CSS 颜色
      12. CSS compositing and blending
      13. CSS conditional rules
      14. CSS 局限
      15. CSS 计数器样式
      16. CSS custom highlight API
      17. CSS custom properties for cascading variables
      18. CSS display
      19. CSS easing functions
      20. CSS environment variables
      21. CSS filter effects
      22. CSS 弹性盒子布局
      23. CSS font loading
      24. CSS 字体
      25. CSS 片段
      26. CSS 生成内容
      27. 网格布局
      28. CSS images
      29. CSS inline layout
      30. CSS lists and counters
      31. CSS 逻辑属性与逻辑值
      32. CSS Masking
      33. 媒体查询
      34. CSS motion path
      35. CSS 多列布局
      36. CSS namespaces
      37. CSS 嵌套
      38. CSS overflow
      39. CSS overscroll behavior
      40. CSS 分页媒体
      41. CSS 定位布局
      42. CSS properties and values API
      43. CSS pseudo-elements
      44. CSS round display
      45. CSS ruby layout
      46. CSS scoping
      47. CSS scroll anchoring
      48. CSS 滚动吸附
      49. CSS scroll-driven animations
      50. CSS Scrollbars
      51. CSS 选择器
      52. CSS 影子部件
      53. CSS 形状
      54. CSS syntax
      55. CSS Table
      56. CSS 文本
      57. CSS 文本装饰
      58. CSS Transforms
      59. CSS 过渡
      60. CSS 值和单位
      61. CSS 视图过渡
      62. CSS 书写模式
      63. CSS 对象模型视图
    9. 属性
      1. -moz-*
        1. -moz-float-edge

        2. -moz-force-broken-image-icon

        3. -moz-orient

        4. -moz-user-focus

        5. -moz-user-input

      2. -webkit-*
        1. -webkit-border-before

        2. -webkit-box-reflect

        3. -webkit-mask-box-image

        4. -webkit-mask-composite

        5. -webkit-mask-position-x

        6. -webkit-mask-position-y

        7. -webkit-mask-repeat-x

        8. -webkit-mask-repeat-y

        9. -webkit-tap-highlight-color

        10. -webkit-text-fill-color
        11. -webkit-text-security

        12. -webkit-text-stroke
        13. -webkit-text-stroke-color
        14. -webkit-text-stroke-width
        15. -webkit-touch-callout

      3. 自定义属性（--*）：CSS 变量
      4. accent-color
      5. align-*
        1. align-content
        2. align-items
        3. align-self
      6. alignment-baseline
      7. all
      8. anchor-name
      9. 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
      10. appearance
      11. aspect-ratio
      12. backdrop-filter
      13. backface-visibility
      14. 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
      15. block-size
      16. 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
      17. bottom
      18. 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
      19. break-*
        1. break-after
        2. break-before
        3. break-inside
      20. caption-side
      21. caret-animation

      22. caret-color
      23. clear
      24. clip-*
        1. clip

        2. clip-path
        3. clip-rule
      25. color-*
        1. color
        2. color-interpolation
        3. color-interpolation-filters
        4. color-scheme
      26. 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
      27. columns
      28. 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
      29. container-*
        1. container
        2. container-name
        3. container-type
      30. content
      31. content-visibility
      32. counter-*
        1. counter-increment
        2. counter-reset
        3. counter-set
      33. cursor
      34. cx
      35. cy
      36. d
      37. direction
      38. display
      39. dominant-baseline
      40. empty-cells
      41. field-sizing

      42. fill-*
        1. fill
        2. fill-opacity
        3. fill-rule
      43. filter
      44. flex-*
        1. flex
        2. flex-basis
        3. flex-direction
        4. flex-flow
        5. flex-grow
        6. flex-shrink
        7. flex-wrap
      45. float
      46. flood-color
      47. flood-opacity
      48. 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
      49. forced-color-adjust
      50. gap
      51. 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
      52. hanging-punctuation
      53. height
      54. hyphenate-character
      55. hyphenate-limit-chars
      56. hyphens
      57. image-*
        1. image-orientation
        2. image-rendering
        3. image-resolution

      58. initial-letter
      59. inline-size
      60. 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
      61. interpolate-size

      62. isolation
      63. justify-*




    

        1. justify-content
        2. justify-items
        3. justify-self
      64. left
      65. letter-spacing
      66. lighting-color
      67. line-*
        1. line-break
        2. line-clamp
        3. line-height
        4. line-height-step

      68. list-*
        1. list-style
        2. list-style-image
        3. list-style-position
        4. list-style-type
      69. 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

      70. marker-*
        1. marker
        2. marker-end
        3. marker-mid
        4. marker-start
      71. 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
      72. math-*
        1. math-depth
        2. math-shift

        3. math-style
      73. max-*
        1. max-block-size
        2. max-height
        3. max-inline-size
        4. max-width
      74. min-*
        1. min-block-size
        2. min-height
        3. min-inline-size
        4. min-width
      75. mix-blend-mode
      76. object-fit
      77. object-position
      78. offset-*
        1. offset
        2. offset-anchor
        3. offset-distance
        4. offset-path
        5. offset-position
        6. offset-rotate
      79. opacity
      80. order
      81. orphans
      82. outline-*
        1. outline
        2. outline-color
        3. outline-offset
        4. outline-style
        5. outline-width
      83. 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
      84. overlay

      85. overscroll-*
        1. overscroll-behavior
        2. overscroll-behavior-block
        3. overscroll-behavior-inline
        4. overscroll-behavior-x
        5. overscroll-behavior-y
      86. 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
      87. page-*
        1. page
        2. page-break-after

        3. page-break-before

        4. page-break-inside

      88. paint-order
      89. perspective
      90. perspective-origin
      91. place-*
        1. place-content
        2. place-items
        3. place-self
      92. pointer-events
      93. position-*
        1. position
        2. position-anchor
        3. position-area
        4. position-try
        5. position-try-fallbacks
        6. position-try-order
        7. position-visibility

      94. print-color-adjust
      95. quotes
      96. r
      97. reading-flow

      98. reading-order

      99. resize
      100. right
      101. rotate
      102. row-gap
      103. ruby-*
        1. ruby-align
        2. ruby-overhang
        3. ruby-position
      104. rx
      105. ry
      106. scale
      107. 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-marker-group

        14. scroll-padding
        15. scroll-padding-block
        16. scroll-padding-block-end
        17. scroll-padding-block-start
        18. scroll-padding-bottom
        19. scroll-padding-inline
        20. scroll-padding-inline-end
        21. scroll-padding-inline-start
        22. scroll-padding-left
        23. scroll-padding-right
        24. scroll-padding-top
        25. scroll-snap-align
        26. scroll-snap-stop
        27. scroll-snap-type
        28. scroll-timeline
        29. scroll-timeline-axis
        30. scroll-timeline-name
      108. scrollbar-*
        1. scrollbar-color
        2. scrollbar-gutter
        3. scrollbar-width
      109. shape-*
        1. shape-image-threshold
        2. shape-margin
        3. shape-outside
        4. shape-rendering
      110. speak-as

      111. stop-color
      112. stop-opacity
      113. stroke-*
        1. stroke
        2. stroke-dasharray
        3. stroke-dashoffset
        4. stroke-linecap
        5. stroke-linejoin
        6. stroke-miterlimit
        7. stroke-opacity
        8. stroke-width
      114. tab-size
      115. table-layout
      116. text-*
        1. text-align
        2. text-align-last
        3. text-anchor
        4. text-box
        5. text-box-edge
        6. text-box-trim
        7. text-combine-upright
        8. text-decoration
        9. text-decoration-color
        10. text-decoration-line
        11. text-decoration-skip

        12. text-decoration-skip-ink
        13. text-decoration-style
        14. 文本装饰线厚度 (粗细)
        15. text-emphasis
        16. text-emphasis-color
        17. text-emphasis-position
        18. text-emphasis-style
        19. text-indent
        20. text-justify
        21. text-orientation
        22. text-overflow
        23. 文本渲染
        24. text-shadow
        25. text-size-adjust

        26. text-spacing-trim

        27. text-transform
        28. text-underline-offset
        29. text-underline-position
        30. text-wrap
        31. text-wrap-mode
        32. text-wrap-style
      117. timeline-scope
      118. top
      119. touch-action
      120. transform-*




    

        1. transform
        2. transform-box
        3. transform-origin
        4. transform-style
      121. transition-*
        1. transition
        2. transition-behavior
        3. transition-delay
        4. transition-duration
        5. transition-property
        6. transition-timing-function
      122. translate
      123. unicode-bidi
      124. user-modify

      125. user-select
      126. vector-effect
      127. vertical-align
      128. view-*
        1. view-timeline
        2. view-timeline-axis
        3. view-timeline-inset
        4. view-timeline-name
        5. view-transition-class
        6. view-transition-name
      129. visibility
      130. white-space
      131. white-space-collapse
      132. widows
      133. width
      134. will-change
      135. word-break
      136. word-spacing
      137. writing-mode
      138. x
      139. y
      140. z-index
      141. zoom
    10. 选择器
      1. & 嵌套选择器
      2. 属性选择器
      3. 类选择器
      4. ID 选择器
      5. 类型选择器
      6. 通配选择器
    11. 关系选择器
      1. 子组合器
      2. 列组合器

      3. 后代选择器
      4. Namespace separator
      5. 接续兄弟组合器
      6. 选择器列表
      7. 后续兄弟选择器
    12. 伪类
      1. :-moz-*
        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

      2. :active
      3. :active-view-transition
      4. :any-link
      5. :autofill
      6. :blank

      7. :buffering
      8. :checked
      9. :current

      10. :default
      11. :defined
      12. :dir()
      13. :disabled
      14. :empty
      15. :enabled
      16. :first-*
        1. :first
        2. :first-child
        3. :first-of-type
      17. :focus-*
        1. :focus
        2. :focus-visible
        3. :focus-within
      18. :fullscreen
      19. :future
      20. :has-slotted
      21. :has()
      22. :heading

      23. :heading()

      24. :host
      25. :host-context()
      26. :host()
      27. :hover
      28. :in-range
      29. :indeterminate
      30. :invalid
      31. :is()
      32. :lang()
      33. :last-child
      34. :last-of-type
      35. :left
      36. :link
      37. :local-link

      38. :modal
      39. :muted
      40. :not()
      41. :nth-*
        1. :nth-child()
        2. :nth-last-child
        3. :nth-last-of-type
        4. :nth-of-type
      42. :only-child
      43. :only-of-type
      44. :open
      45. :optional
      46. :out-of-range
      47. :past
      48. :paused
      49. :picture-in-picture
      50. :placeholder-shown
      51. :playing
      52. :popover-open
      53. :read-only
      54. :read-write
      55. :required
      56. :right
      57. :root
      58. :scope
      59. :seeking
      60. :stalled
      61. :state()
      62. :target
      63. :target-current

      64. :user-invalid
      65. :user-valid
      66. :valid
      67. :visited
      68. :volume-locked
      69. :where()
    13. 伪元素
      1. ::-moz-*
        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

      2. ::-webkit-*
        1. ::-webkit-inner-spin-button

        2. ::-webkit-meter-bar

        3. ::-webkit-meter-even-less-good-value

        4. ::-webkit-meter-inner-element

        5. ::-webkit-meter-optimum-value

        6. ::-webkit-meter-suboptimum-value

        7. ::-webkit-progress-bar

        8. ::-webkit-progress-inner-element

        9. ::-webkit-progress-value

        10. ::-webkit-scrollbar

        11. ::-webkit-search-cancel-button

        12. ::-webkit-search-results-button

        13. ::-webkit-slider-runnable-track

        14. ::-webkit-slider-thumb

      3. ::after
      4. ::backdrop
      5. ::before
      6. ::checkmark

      7. ::column

      8. ::cue (:cue)
      9. ::details-content
      10. ::file-selector-button
      11. ::first-letter
      12. ::first-line (:first-line)
      13. ::grammar-error
      14. ::highlight()
      15. ::marker
      16. ::part()
      17. ::picker-icon

      18. ::picker()

      19. ::placeholder
      20. ::scroll-*




    

        1. ::scroll-button()

        2. ::scroll-marker

        3. ::scroll-marker-group

      21. ::selection
      22. ::slotted()
      23. ::spelling-error
      24. ::target-text
      25. ::view-*
        1. ::view-transition
        2. ::view-transition-group
        3. ::view-transition-image-pair
        4. ::view-transition-new
        5. ::view-transition-old
    14. At 规则
      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
    15. 函数
      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-mix()
      17. color()
      18. conic-gradient()
      19. contrast-color()

      20. contrast()
      21. cos()
      22. counter()
      23. counters()
      24. cross-fade()
      25. cubic-bezier()
      26. device-cmyk()
      27. drop-shadow()
      28. element

      29. ellipse()
      30. env()
      31. exp()
      32. fit-content()
      33. grayscale()
      34. hsl()
      35. hue-rotate()
      36. hwb()
      37. hypot()
      38. if()

      39. image-set()
      40. image()
      41. inset()
      42. invert()
      43. lab()
      44. layer()
      45. lch()
      46. light-dark()
      47. linear-gradient()
      48. linear()
      49. log()
      50. matrix()
      51. matrix3d()
      52. max()
      53. min()
      54. minmax()
      55. mod()
      56. oklab()
      57. oklch()
      58. opacity()
      59. paint()
      60. palette-mix()

      61. path()
      62. perspective()
      63. polygon()
      64. pow()
      65. radial-gradient()
      66. ray()
      67. rect()
      68. rem()
      69. repeat()
      70. repeating-conic-gradient()
      71. repeating-linear-gradient()
      72. repeating-radial-gradient()
      73. rgb()
      74. rotate()
      75. rotate3d()
      76. rotateX()
      77. rotateY()
      78. rotateZ()
      79. round()
      80. saturate()
      81. scale()
      82. scale3d()
      83. scaleX()
      84. scaleY()
      85. scaleZ()
      86. scroll()
      87. sepia()
      88. shape()
      89. sibling-count()

      90. sibling-index()

      91. sign()
      92. sin()
      93. skew()
      94. skewX()
      95. skewY()
      96. sqrt()
      97. steps()
      98. symbols()
      99. tan()
      100. translate()
      101. translate3d()
      102. translateX()
      103. translateY()
      104. translateZ()
      105. url()
      106. var()
      107. view()
      108. xywh()
    16. 类型
      1. <absolute-size>
      2. <alpha-value>
      3. <angle-percentage>
      4. <angle>
      5. <baseline-position>
      6. <basic-shape>
      7. <blend-mode>
      8. <box-edge>
      9. <calc-keyword>
      10. <calc-sum>
      11. <color-interpolation-method>
      12. <color>
      13. <content-distribution>
      14. <content-position>
      15. <custom-ident>
      16. <dashed-ident>
      17. dimension
      18. <display-box>
      19. <display-inside>
      20. <display-internal>
      21. <display-legacy>
      22. <display-listitem>
      23. <display-outside>
      24. <easing-function>
      25. <filter-function>
      26. <flex>
      27. <frequency-percentage>
      28. <frequency>
      29. <generic-family>
      30. <gradient>
      31. <hex-color>
      32. <hue-interpolation-method>
      33. <hue>
      34. <ident>
      35. <image>
      36. <integer>
      37. <length-percentage>
      38. <length>
      39. <line-style>
      40. <named-color>
      41. <number>
      42. <overflow-position>
      43. <overflow>
      44. <percentage>
      45. <position-area>
      46. <position>
      47. <ratio>
      48. <relative-size>
      49. <resolution>
      50. <self-position>
      51. <shape>

      52. <string>
      53. <system-color>
      54. <text-edge>
      55. <time-percentage>
      56. <time>
      57. transform-function
      58. <url>
    17. 指南
    18. 锚点定位
      1. Using anchor positioning
      2. Handling overflow
    19. 动画
      1. 动画性 CSS 属性
      2. 使用 CSS 动画
    20. 背景和边框
      1. 多个背景的应用
      2. 调整背景图片的大小
      3. SVG 背景缩放
    21. 盒对齐
      1. Overview
      2. 块布局中的盒对齐方式
      3. 弹性盒布局中的盒对齐方式
      4. Box alignment in grid layout
      5. Box alignment in multi-column layout
    22. 盒模型
      1. CSS 基础框盒模型介绍
      2. 掌握外边距折叠
    23. 层叠
      1. CSS 层叠
      2. 继承
      3. 优先级
      4. 属性值处理
      5. CSS 的简写属性
    24. 自定义属性
      1. 使用 CSS 自定义属性（变量）
    25. 颜色
      1. 为 HTML 元素应用颜色
      2. Color values
      3. Using relative colors
      4. Using color wisely
      5. 无障碍：理解颜色和亮度
      6. Web 无障碍：色彩对比度
    26. 多列
      1. Basic Concepts of Multicol
      2. 多列布局的样式
      3. 使用 CSS 的多列布局
      4. Spanning and balancing columns
      5. 处理 Multicol 中的溢出
      6. Handling content breaks
    27. 条件规则
      1. 使用特性查询
      2. Using container scroll-state queries
    28. CSS 局限
      1. CSS 容器查询
      2. 使用 CSS 局限
      3. Using container size and style queries
    29. CSS 对象模型视图
      1. 坐标系
      2. 视口概念
    30. 流式布局
      1. 常规流中的块和内联布局
      2. CSS 流式布局
      3. 流式布局和溢出
      4. 流式布局和书写模式
      5. 应用或脱离流式布局
      6. 布局和包含块
      7. 格式化上下文简介
      8. 区块格式化上下文
      9. 行内格式化上下文
      10. Using multi-keyword syntax
      11. 视觉格式化模型
    31. 滤镜效果
      1. Using filter effects
    32. 弹性盒布局
      1. flex 布局的基本概念
      2. 弹性盒子与其他布局方法的联系
      3. 对齐弹性容器中的项目
      4. Flex 项排序
      5. 控制弹性元素在主轴上的比例
      6. 掌握弹性物件的包装
      7. 弹性盒子的典型用例
    33. 字体
      1. OpenType 字体特性指南
      2. Variable fonts guide
      3. Web 开放字体格式（WOFF）
    34. 网格布局
      1. 网格布局的基本概念
      2. 网格布局和其他布局方法的联系
      3. 网格模板区域
      4. CSS 网格中基于线的定位
      5. 使用命名线布局
      6. CSS 网格布局中的自动定位
      7. 网格布局中的盒模型对齐
      8. CSS 网格，逻辑值和书写模式
      9. 利用 CSS 网格布局实现常用布局
      10. Subgrid
      11. CSS 网格布局和无障碍
      12. Masonry layout

    35. 图片
      1. 使用 CSS 渐变
      2. 可替换元素
      3. 在 CSS 中实现图像合并
    36. 列表和计数器
      1. 使用 CSS 计数器
      2. 使列表缩进一致
    37. 逻辑属性
      1. 逻辑属性与逻辑值的基本概念
      2. 用于浮动和定位的逻辑属性
      3. 用于外边距、边框和内边距的逻辑属性
      4. 逻辑尺寸属性
    38. 媒体查询
      1. 使用媒体查询
      2. Using media queries for accessibility
      3. 使用编程方法测试媒体查询
      4. 打印
    39. 嵌套样式规则
      1. CSS at 规则嵌套
      2. CSS 嵌套与优先级
      3. 使用 CSS 嵌套
    40. 溢出
      1. Creating carousels
    41. 定位
      1. 层叠上下文
      2. 层叠与浮动
      3. 理解 CSS 的 z-index 属性
      4. 使用 z-index
      5. 堆叠时不使用 z-index 属性
    42. 滚动锚定
      1. Overview
    43. 滚动吸附
      1. 滚动吸附的基本概念
      2. Using scroll snap events
    44. 选择器
      1. 隐私与:visited 选择器
      2. Selector structure
      3. Selectors and combinators
      4. 在选择器中使用 :target 伪类
    45. 形状
      1. CSS 的图形（Shape）概览
      2. 使用 box 值指定形状
      3. Image-based shapes
      4. Using shape-outside
    46. 语法
      1. 语法
      2. CSS 注释
      3. At-rule functions
      4. Error handling
    47. 文本
      1. Wrapping and breaking text
      2. HTML、CSS 和 DOM 中的空白符是如何处理的
    48. Text decoration
      1. Text shadows
    49. 变换
      1. 使用 CSS 变换
    50. 过渡
      1. 使用 CSS 过渡
    51. 值和单位
      1. CSS 属性值定义语法
      2. Numeric data types
      3. Textual data types
      4. Using math functions
    52. CSS 布局手册
      1. 指南：媒体对象
      2. 列布局
      3. 居中一个元素
      4. 粘性页脚
      5. 分离式导航菜单
      6. 面包屑导航
      7. List group with badges
      8. Pagination
      9. 卡片
      10. Grid wrapper
    54. 工具
      1. 色彩选择工具
      2. Box-shadow 生成器
      3. Border-image 生成器
      4. 圆角边框生成器
      5. Shape generator
     
    推荐文章
    帅气的消防车  ·  回顾主网启动周第一天
    6 天前
    温文尔雅的罐头  ·  論感嘆詞之字幕翻譯__臺灣博碩士論文知識加值系統
    1 月前
    豁达的针织衫  ·  首支退出LPL的战队，RA确认退出英雄联盟职业联赛_赛事_席位_ ...
    1 月前
    淡定的菠萝  ·  南京公积金贷款可以用来装修吗- 南京本地宝
    8 月前
    深沉的便当  ·  张鹭_百度百科
    10 月前
    今天看啥   ·   Py中国   ·   codingpro   ·   小百科   ·   link之家   ·   卧龙AI搜索
    删除内容请联系邮箱 2879853325@qq.com
    小百科 - 百科知识指南
    © 2024 ~ 沪ICP备11025650号