Skip to main content
Skip to search
Skip to select language

References
Guides
MDN Plus

Search MDN

Log in
Get MDN Plus

Web 开发技术
CSS：层叠样式表
CSS Backgrounds and Borders
圆角边框生成器

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

CSS
教程
CSS 基础
CSS 第一步
CSS 构建
样式化文本
CSS 布局概述
参考
Modules
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-outline-radius 非标准已弃用
  6. -moz-outline-radius-bottomleft 非标准已弃用
  7. -moz-outline-radius-bottomright 非标准已弃用
  8. -moz-outline-radius-topleft 非标准已弃用
  9. -moz-outline-radius-topright 非标准已弃用
  10. -moz-user-focus (en-US) 非标准
  11. -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 (en-US)
  14. -webkit-text-security (en-US) 非标准
  15. -webkit-text-stroke
  16. -webkit-text-stroke-color (en-US)
  17. -webkit-text-stroke-width (en-US)
  18. -webkit-touch-callout 非标准
3. accent-color (en-US)
4. align-*
  1. align-content
  2. align-items
  3. align-self
  4. align-tracks (en-US) 实验性
5. all
6. animation-*
7. appearance
8. aspect-ratio
9. backdrop-filter
10. backface-visibility
11. background-*
12. block-size
13. border-*
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-*
17. caption-side
18. caret-color
19. clear
20. clip 已弃用
21. clip-path
22. color
23. color-scheme
24. column-*
25. columns
26. contain-*
27. container-*
28. content
29. content-visibility (en-US) 实验性
30. counter-*
31. cursor
32. direction
33. display
34. empty-cells
35. filter
36. flex-*
37. float
38. font-*
39. forced-color-adjust (en-US)
40. gap
41. grid-*
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-*
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-*
58. margin-*
59. mask-*
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-*
63. min-*
64. mix-blend-mode
65. object-fit
66. object-position
67. offset-*
68. opacity
69. order
70. orphans (en-US)
71. outline-*
72. overflow-*
73. overscroll-*
74. padding-*
75. page-*
76. paint-order
77. perspective
78. perspective-origin
79. place-*
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 (en-US)
  4. scroll-margin-block-end (en-US)
  5. scroll-margin-block-start (en-US)
  6. scroll-margin-bottom (en-US)
  7. scroll-margin-inline (en-US)
  8. scroll-margin-inline-end (en-US)
  9. scroll-margin-inline-start (en-US)
  10. scroll-margin-left (en-US)
  11. scroll-margin-right (en-US)
  12. scroll-margin-top
  13. scroll-padding (en-US)
  14. scroll-padding-block (en-US)
  15. scroll-padding-block-end (en-US)
  16. scroll-padding-block-start (en-US)
  17. scroll-padding-bottom (en-US)
  18. scroll-padding-inline (en-US)
  19. scroll-padding-inline-end (en-US)
  20. scroll-padding-inline-start (en-US)
  21. scroll-padding-left (en-US)
  22. scroll-padding-right (en-US)
  23. scroll-padding-top (en-US)
  24. scroll-snap-align (en-US)
  25. scroll-snap-coordinate 非标准已弃用
  26. scroll-snap-destination 非标准已弃用
  27. scroll-snap-points-x 非标准已弃用
  28. scroll-snap-points-y 非标准已弃用
  29. scroll-snap-stop (en-US)
  30. scroll-snap-type
  31. scroll-snap-type-x (en-US) 非标准已弃用
  32. scroll-snap-type-y (en-US) 非标准已弃用
  33. scroll-timeline (en-US) 实验性
  34. scroll-timeline-axis (en-US) 实验性
  35. scroll-timeline-name (en-US) 实验性
92. scrollbar-*
93. shape-*
94. tab-size
95. table-layout
96. text-*
97. top
98. touch-action
99. transform-*
100. transition-*
101. translate
102. unicode-bidi
103. user-modify (en-US) 非标准已弃用
104. user-select
105. vertical-align
106. view-transition-name (en-US) 实验性
107. visibility
108. white-space
109. widows
110. width
111. will-change
112. word-break
113. word-spacing
114. writing-mode
115. z-index
116. zoom (en-US) 非标准
Selectors
Combinators
Pseudo-classes
1. :-moz-broken (en-US) 非标准
2. :-moz-drag-over (en-US) 非标准
3. :-moz-first-node (en-US) 非标准
4. :-moz-focusring (en-US) 非标准
5. :-moz-handler-blocked (en-US) 非标准
6. :-moz-handler-crashed (en-US) 非标准
7. :-moz-handler-disabled (en-US) 非标准
8. :-moz-last-node (en-US) 非标准
9. ::-moz-list-bullet (en-US) 非标准
10. ::-moz-list-number (en-US) 非标准
11. :-moz-loading (en-US) 非标准
12. :-moz-locale-dir(ltr) (en-US) 非标准
13. :-moz-locale-dir(rtl) (en-US) 非标准
14. :-moz-only-whitespace 非标准
15. :-moz-submit-invalid (en-US) 非标准
16. :-moz-suppressed (en-US) 非标准
17. :-moz-user-disabled (en-US) 非标准
18. :-moz-window-inactive 非标准
19. :active
20. :any-link
21. :autofill (en-US)
22. :blank 实验性
23. :checked
24. :current (en-US)
25. :default
26. :defined
27. :dir()
28. :disabled
29. :empty
30. :enabled
31. :first
32. :first-child
33. :first-of-type
34. :focus
35. :focus-visible
36. :focus-within
37. :fullscreen
38. :future (en-US) 实验性
39. :has()
40. :host
41. :host-context()
42. :host()
43. :hover
44. :in-range
45. :indeterminate
46. :invalid
47. :is()
48. :lang()
49. :last-child
50. :last-of-type
51. :left
52. :link
53. :local-link (en-US)
54. :modal (en-US)
55. :not()
56. :nth-child()
57. :nth-col() (en-US)
58. :nth-last-child()
59. :nth-last-col() (en-US)
60. :nth-last-of-type()
61. :nth-of-type()
62. :only-child
63. :only-of-type
64. :optional
65. :out-of-range
66. :past (en-US) 实验性
67. :paused (en-US)
68. :picture-in-picture
69. :placeholder-shown
70. :playing (en-US)
71. :read-only
72. :read-write
73. :required
74. :right
75. :root
76. :scope
77. :target
78. :target-within (en-US) 实验性
79. :user-invalid (:-moz-ui-invalid) (en-US) 实验性
80. :user-valid (:-moz-ui-valid) (en-US) 实验性
81. :valid
82. :visited
83. :where()
Pseudo-elements
1. ::-moz-color-swatch (en-US) 非标准
2. ::-moz-focus-inner (en-US) 非标准
3. ::-moz-page (en-US) 非标准
4. ::-moz-page-sequence (en-US) 非标准
5. ::-moz-progress-bar 非标准
6. ::-moz-range-progress 非标准
7. ::-moz-range-thumb (en-US) 非标准
8. ::-moz-range-track (en-US) 非标准
9. ::-moz-scrolled-page-sequence (en-US) 非标准
10. ::-webkit-inner-spin-button (en-US) 非标准
11. ::-webkit-meter-bar (en-US) 非标准
12. ::-webkit-meter-even-less-good-value (en-US) 非标准
13. ::-webkit-meter-inner-element (en-US) 非标准
14. ::-webkit-meter-optimum-value (en-US) 非标准
15. ::-webkit-meter-suboptimum-value (en-US) 非标准
16. ::-webkit-outer-spin-button (en-US) 非标准
17. ::-webkit-progress-bar 非标准
18. ::-webkit-progress-inner-element 非标准
19. ::-webkit-progress-value 非标准
20. ::-webkit-scrollbar 非标准
21. ::-webkit-search-cancel-button (en-US) 非标准
22. ::-webkit-search-results-button (en-US) 非标准
23. ::-webkit-slider-runnable-track 非标准
24. ::-webkit-slider-thumb 非标准
25. ::after
26. ::backdrop
27. ::before
28. ::cue
29. ::cue-region (en-US)
30. ::file-selector-button
31. ::first-letter
32. ::first-line
33. ::grammar-error 实验性
34. ::highlight() (en-US) 实验性
35. ::marker
36. ::part()
37. ::placeholder
38. ::selection
39. ::slotted()
40. ::spelling-error 实验性
41. ::target-text (en-US) 实验性
42. ::view-transition (en-US) 实验性
43. ::view-transition-group (en-US) 实验性
44. ::view-transition-image-pair (en-US) 实验性
45. ::view-transition-new (en-US) 实验性
46. ::view-transition-old (en-US) 实验性
At-rules
Functions
1. -moz-image-rect 实验性非标准
2. abs() (en-US) 实验性
3. acos() (en-US)
4. asin() (en-US)
5. atan() (en-US)
6. atan2() (en-US)
7. attr()
8. calc()
9. clamp()
10. cos() (en-US)
11. counter()
12. counters()
13. cross-fade() (en-US)
14. element() 实验性
15. env()
16. exp() (en-US) 实验性
17. fit-content()
18. hypot() (en-US) 实验性
19. log() (en-US) 实验性
20. max()
21. min()
22. minmax()
23. mod() (en-US) 实验性
24. path() (en-US)
25. pow() (en-US) 实验性
26. rem() (en-US) 实验性
27. repeat()
28. round() (en-US) 实验性
29. sign() (en-US) 实验性
30. sin() (en-US)
31. sqrt() (en-US) 实验性
32. symbols() (en-US)
33. tan() (en-US)
34. url()
35. var()
Types
指南
动画
1. 运用 CSS 动画
背景和边框
1. 多个背景的应用
2. 重设背景图片的大小
盒子的对齐方式
盒子模型
1. 盒子模型基础简介
2. 外边距重叠
列
条件规则
1. 运用查询特性
CSS 对象模型视图
1. 坐标系
Flex 布局
流布局
字体
1. OpenType 字体特性指南
2. 可变字体
Grid 布局
图片
1. 使用 CSS 渐变
列表和计数器
1. 运用 CSS 计数器
2. 调整列表缩进
逻辑属性
媒体查询
定位
1. CSS z-index
Scroll snap
1. scroll snap 基础概念 (en-US)
形状
文本
1. 包装文本和文本断行 (en-US)
变换
1. 运用变换
过渡
1. 运用过渡
布局的 cookbook
工具

圆角边框生成器

此工具可用于生成 CSS border-radius 样式。

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年1月24日 by MDN contributors.

Your blueprint for a better internet.

MDN on Twitter
MDN on GitHub

MDN

About
Hacks 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

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.