Skip to main content
Skip to search

HTML: Markup language

HTML reference

Elements
Global attributes
Attributes
See all…

HTML guides

Responsive images
Video & audio content
Date & time formats
See all…

Markup languages

SVG
MathML
XML

CSS: Styling language

CSS reference

Properties
Selectors
At-rules
Values & units
See all…

CSS guides

Box model
Animations
Flexbox
Colors
See all…

Layout cookbook

Column layouts
Centering an element
Card component
See all…

JavaScript: Scripting language

JS reference

Standard built-in objects
Expressions & operators
Statements & declarations
Functions
See all…

JS guides

Control flow & error handing
Loops and iteration
Working with objects
Using classes
See all…

Web APIs: Programming interfaces

Web API reference

File system API
Fetch API
Geolocation API
HTML DOM API
Push API
Service worker API
See all…

Web API guides

Using the Web animation API
Using the Fetch API
Working with the History API
Using the Web speech API
Using web workers

All web technology

Technologies

Accessibility
HTTP
URI
Web extensions
WebAssembly
WebDriver
See all…

Topics

Media
Performance
Privacy
Security
Progressive web apps

Learn web development

Frontend developer course

Getting started
Common questions
Curriculum

Learn HTML

Introduction to HTML
Getting started with HTML

Learn CSS

What is CSS
Getting started with CSS

Learn JavaScript

How to use data attributes
Add JavaScript to your web page

Discover our tools

Playground
HTTP Observatory

Color picker
Box-shadow generator
Border-image generator
Border-radius generator

Get to know MDN better

About MDN
Advertise with us

Community
MDN on GitHub

Blog

面向开发者的 Web 技术
CSS：层叠样式表
CSS 背景和边框
Border-image 生成器

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

View in English Always switch to English

Border-image 生成器

这个工具用于生成 CSS border-image 的值。

Help improve MDN

Learn how to contribute

This page was last modified on ⁨2025年7月15日⁩ by MDN contributors.

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

CSS
初学者教程
你的第一个网站：样式化内容
CSS 样式基础
CSS 文本样式
CSS 布局概述
CSS 参考
模块
属性
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-*
6. alignment-baseline
7. all
8. anchor-name
9. animation-*
10. appearance
11. aspect-ratio
12. backdrop-filter
13. backface-visibility
14. background-*
15. block-size
16. border-*
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-*
20. caption-side
21. caret-animation
22. caret-color
23. clear
24. clip-*
  1. clip 已弃用
  2. clip-path
  3. clip-rule
25. color-*
26. column-*
27. columns
28. contain-*
29. container-*
30. content
31. content-visibility
32. counter-*
33. cursor
34. cx
35. cy
36. d
37. direction
38. display
39. dominant-baseline
40. empty-cells
41. field-sizing 实验性
42. fill-*
43. filter
44. flex-*
45. float
46. flood-color
47. flood-opacity
48. font-*
49. forced-color-adjust
50. gap
51. grid-*
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-*
61. interpolate-size 实验性
62. isolation
63. justify-*
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-*
69. margin-*
70. marker-*
71. mask-*
72. math-*
  1. math-depth
  2. math-shift 实验性
  3. math-style
73. max-*
74. min-*
75. mix-blend-mode
76. object-fit
77. object-position
78. offset-*
79. opacity
80. order
81. orphans
82. outline-*
83. overflow-*
84. overlay 实验性
85. overscroll-*
86. padding-*
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-*
92. pointer-events
93. position-*
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-*
104. rx
105. ry
106. scale
107. scroll-*
108. scrollbar-*
109. shape-*
110. speak-as 实验性
111. stop-color
112. stop-opacity
113. stroke-*
114. tab-size
115. table-layout
116. text-*
117. timeline-scope
118. top
119. touch-action
120. transform-*
121. transition-*
122. translate
123. unicode-bidi
124. user-modify 非标准已弃用
125. user-select
126. vector-effect
127. vertical-align
128. view-*
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
选择器
关系选择器
伪类
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-*
17. :focus-*
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-*
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-*
  1. :target
  2. :target-current 实验性
  3. :target-within 实验性
63. :user-invalid
64. :user-valid
65. :valid
66. :visited
67. :volume-locked
68. :where()
伪元素
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-*
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
函数
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()
类型
指南
锚点定位
1. Using anchor positioning
2. Handling overflow
动画
1. 动画性 CSS 属性
2. 使用 CSS 动画
背景和边框
盒对齐
盒模型
1. CSS 基础框盒模型介绍
2. 掌握外边距折叠
层叠
自定义属性
1. 使用 CSS 自定义属性（变量）
颜色
多列
条件规则
1. 使用特性查询
2. Using container scroll-state queries
CSS 局限
CSS 对象模型视图
1. 坐标系
2. 视口概念
流式布局
滤镜效果
1. Using filter effects
弹性盒布局
字体
网格布局
图片
列表和计数器
1. 使用 CSS 计数器
2. 使列表缩进一致
逻辑属性
媒体查询
嵌套样式规则
溢出
1. Creating carousels
定位
滚动锚定
1. Overview
滚动吸附
1. 滚动吸附的基本概念
2. Using scroll snap events
选择器
形状
语法
文本
1. Wrapping and breaking text
2. HTML、CSS 和 DOM 中的空白符是如何处理的
Text decoration
1. Text shadows
变换
1. 使用 CSS 变换
过渡
1. 使用 CSS 过渡
值和单位
CSS 布局手册
工具

Your blueprint for a better internet.

MDN

About
Blog
Mozilla careers
Advertise with us
MDN Plus
Product help

Contribute

MDN Community
Community resources
Writing guidelines
MDN Discord
MDN on GitHub

Developers

Web technologies
Learn web development
Guides
Tutorials
Glossary
Hacks blog

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–⁨2025⁩ by individual mozilla.org contributors. Content available under a Creative Commons license.