概覽

API 參考

This section provides detailed reference documentation for working with Master CSS.

Design Token

色彩
Customizing color variables or starting with the crafted palette.
原始色彩
Customizing primitive color variables or starting with the official design system.
邊框色彩
Customizing frame color variables or starting with the official design system.
文本色彩
Customizing text color variables or starting with the official design system.

Syntax

重點色accent-color
Setting the accent color of user interface elements or controls.
內容對齊align-content
Controlling how multiple rows or columns are aligned along its cross axis.
項目對齊align-items
Controlling how items are aligned along its cross axis.
自身對齊align-self
Controlling how an individual item is aligned along its cross axis.
動畫animation
Applying an animation between styles.
動畫延遲animation-delay
Setting a time to delay before beginning to perform the animation.
動畫方向animation-direction
Setting the direction of the animation.
動畫持續時間animation-duration
Setting the length of time that an animation takes to complete one cycle.
動畫填充模式animation-fill-mode
Setting how a CSS animation applies styles to its target before and after its execution.
動畫重複次數animation-iteration-count
Setting the number of times an animation should be played.
動畫名稱animation-name
Setting the names of the animation.
動畫播放狀態animation-play-state
Setting whether an animation is running or paused.
動畫時間函數animation-timing-function
Setting speed curve of the animation.
外觀appearance
Controlling the native appearance of UI controls.
寬高比aspect-ratio
Setting the ratio for the box.
背景濾鏡backdrop-filter
Style syntax for applying filter effects to the area behind an target element.
背景background
Setting all background style properties at once.
背景附著方式background-attachment
Setting whether position of background image is fixed when scrolling.
背景混合模式background-blend-mode
Setting how an element's background images should blend with the background color.
背景裁剪background-clip
Controlling how clip the background.
背景顏色background-color
Setting the background color of an element.
背景圖像background-image
Setting background images on an element.
背景起始位置background-origin
Setting the background's origin.
背景位置background-position
Setting the initial position for background image.
背景重複background-repeat
Setting how background images are repeated.
背景大小background-size
Setting the size of the background image.
邊框border
Setting an element’s border.
邊框合併border-collapse
Setting whether table cell have shared or separate borders.
邊框顏色border-color
Setting the color of an element’s border.
邊框圓角border-radius
Setting radius of an element’s corners.
邊框樣式border-style
Setting the line style for an element’s border.
邊框寬度border-width
Setting the width of an element’s border.
盒子裝飾分割box-decoration-break
Setting how an element's fragments should be rendered when broken across multiple lines, columns, or pages.
盒子陰影box-shadow
Adding shadow effects around an element.
盒模型計算方式box-sizing
Setting how the total width and height of an element is calculated.
段落後分割break-after
Controlling how page, column, or region breaks should occur after an element.
段落前分割break-before
Controlling how page, column, or region breaks should occur before the specified element.
段落內分割break-inside
Controlling how page, column, or region breaks should occur within the specified element.
插入點顏色caret-color
Setting the color of the cursor in text input.
清除浮動clear
Moving an element below floating elements instead of floating to the left or right.
裁剪路徑clip-path
Creating a clipping region.
前景色 colorcolor
Setting foreground color of an element.
欄跨度column-span
Setting how elements span across multiple columns.
多欄columns
Setting the number of columns within the container.
內容限制contain
Providing performance benefits by limiting calculations of layout.
內容content
Replacing an element with a generated value.
游標cursor
Setting the mouse cursor style.
文字方向direction
Setting the direction of text.
顯示display
Controlling the element's inner and outer display types.
填充fill
Setting the color of an SVG shape.
濾鏡filter
Applying graphic effects to an element.
彈性盒子flex
Setting how flex items grow or shrink.
彈性基準flex-basis
Setting the initial main size of a flex item.
彈性方向flex-direction
Setting the direction of flex items.
彈性增長flex-grow
Setting how flex items grow.
彈性收縮flex-shrink
Setting how flex items shrink.
彈性換行flex-wrap
Setting how flex items wrap.
浮動float
Placing an element on the left or right side of its container.
字型font
Setting font properties of an element.
字型系列font-family
Setting the font for an element.
字型特性設定font-feature-settings
Controlling advanced typographic features in OpenType fonts.
字型大小font-size
Setting the font size of elements.
字型平滑font-smoothing
Controlling the font smoothing of an element.
字型樣式font-style
Setting font style of an element.
字型數字變體font-variant-numeric
Controlling the usage of alternate glyphs for numbers, fractions, and ordinal markers.
字型粗細font-weight
Setting the weight of the font.
間距gap
Setting the gutters between rows and columns.
網格grid
Setting layout of grid system.
網格區域grid-area
Setting a size and location within a grid.
網格自動欄寬grid-auto-columns
Setting the size of the grid columns.
網格自動排列grid-auto-flow
Controlling how auto-placed items get inserted in the grid.
網格自動列高grid-auto-rows
Setting the size of the grid rows.
網格欄grid-column
Setting a grid items's size and location in a grid layout.
網格多欄grid-columns
Style utility for creating multiple grid columns.
網格列grid-row
Setting a grid items's size and location in a grid layout.
網格多列grid-rows
Style utility for creating multiple grid rows.
網格模板grid-template
Setting grid columns, grid rows, and grid areas.
網格模板區域grid-template-areas
Setting areas in the grid container
網格模板欄grid-template-columns
Creating columns in a grid layout.
網格模板列grid-template-rows
Creating rows in a grid layout.
高度height
Setting an element’s height.
斷詞hyphens
Set how to split words to improve the layout of paragraphs.
內嵌inset
Setting distance between an element and the parent element.
隔離isolation
Controlling whether an element should create a new stacking context.
內容對齊方式justify-content
Controlling how items are aligned along its main axis.
項目對齊方式justify-items
Controlling how items are aligned along its inline axis.
自身對齊方式justify-self
Controlling how an individual item is aligned along its inline axis.
字母間距letter-spacing
Setting the spacing between text characters.
行數限制line-clamp
Limiting the contents of a container to the specified number of lines.
行高line-height
Setting the height of a line box.
列表樣式list-style
Setting all the list style properties at once.
列表樣式圖像list-style-image
Replacing the list item marker with an image.
列表樣式位置list-style-position
Setting the position of the list item marker.
列表樣式類型list-style-type
Setting the style of the list item marker.
外邊距margin
Setting the margin area on all four sides of an element.
遮罩圖像mask-image
Setting the image that is used as mask layer for an element.
最大高度max-height
Setting the maximum height of an element.
最大尺寸max-size
Style shorthand for setting the max-width and max-height of an element.
最大寬度max-width
Setting the maximum width of an element.
最小高度min-height
Setting the minimum height of an element.
最小尺寸min-size
Style shorthand for setting the min-width and min-height of an element.
最小寬度min-width
Setting the minimum width of an element.
混合模式mix-blend-mode
Setting how an element's content should blend with its parent background.
物件適應object-fit
Setting how the content should be resized to fit its container.
物件位置object-position
Setting the alignment of the selected replaced element within the element's box.
透明度opacity
Setting the opacity of an element.
排列順序order
Changing the order of item in flex or grid container.
外框outline
Setting all the outline properties at once.
外框顏色outline-color
Setting the color of an element’s outline.
外框偏移outline-offset
Setting the spacing between an outline and the border of an element.
外框樣式outline-style
Setting the style of an element's outline.
外框寬度outline-width
Setting the thickness of an element's outline.
溢出overflow
Controlling the desired behavior for an element's overflow.
滾動行為overscroll-behavior
Setting what a browser does when reaching the boundary of a scrolling area.
內邊距padding
Setting the padding area on all four sides of an element.
內容位置place-content
Setting align-content and justify-content at the same time.
項目位置place-items
Setting align-items and justify-items at the same time.
自身位置place-self
Setting align-self and justify-self at the same time.
指針事件pointer-events
Setting whether an element reacts to pointer events.
定位position
Setting an element is positioned in a document.
調整大小resize
Setting whether an element is resizable.
螢幕閱讀器screen-readers
Style utility for imporving the accessibility with screen readers.
滾動行為scroll-behavior
Setting the scrolling behavior for a scrolling box.
滾動外邊距scroll-margin
Setting the scroll margin of an element.
滾動內邊距scroll-padding
Setting the scroll padding of an element.
滾動對齊scroll-snap-align
Setting the scroll snap position.
滾動停止scroll-snap-stop
Setting whether scroll container is pass over snap positions.
滾動類型scroll-snap-type
Setting how strictly snap points are enforced on the scroll container.
形狀圖像閾值shape-image-threshold
Setting the alpha channel threshold for a CSS shape.
形狀邊距shape-margin
Setting a margin for a CSS shape.
形狀外部shape-outside
Setting a shape around which adjacent inline content should wrap.
尺寸size
Style shorthand for setting the width and height of an element.
描邊stroke
Setting the outline color of an SVG shape.
描邊寬度stroke-width
Setting the width of the stroke to be applied to the SVG shape.
文字對齊text-align
Setting the text alignment of an element.
文字裝飾text-decoration
Setting the appearance of decorative lines on text.
文字裝飾顏色text-decoration-color
Setting the color of decorative lines on text.
文字裝飾線text-decoration-line
Setting the kind of decoration that is used on text.
文字裝飾樣式text-decoration-style
Setting the style of the decoration line that is used on text.
文字裝飾厚度text-decoration-thickness
Setting thickness of the decoration line.
文字填充顏色text-fill-color
Setting the color of text.
文字縮排text-indent
Setting indentation of the first line.
文字方向text-orientation
Setting orientation of the text characters in a line.
文字溢出text-overflow
Handling how hidden overflow content.
文字渲染text-rendering
Setting what to optimize when rendering text.
文字陰影text-shadow
Adding shadows to text.
文字大小text-size
Style utility for setting the font size with a golden-ratio line height.
文字描邊text-stroke
Setting the width and color of strokes for text characters.
文字描邊顏色text-stroke-color
Setting the color of the stroke for text characters.
文字描邊寬度text-stroke-width
Setting the width of the stroke for text characters.
文字轉換text-transform
Controlling capitalization of text.
文字底線偏移text-underline-offset
Setting the distance of a text decoration line from its original position.
文字換行text-wrap
Controlling how text inside an element is wrapped.
觸控操作touch-action
Setting how an element's region can be manipulated by a touchscreen user.
變形transform
Controlling rotate, scale, skew, or translate an element.
變形框transform-box
Defining the layout box to which transform and transform-origin properties relate.
變形原點transform-origin
Setting the origin for an element’s transformations.
變形樣式transform-style
Setting how children of an element are rendered in the 3D space.
過渡transition
Controlling animation speed when changing CSS properties.
過渡延遲transition-delay
Setting a time to delay before starting transition.
過渡持續時間transition-duration
Setting the length of time a transition should takes to complete.
過渡屬性transition-property
Setting the CSS properties to which a transition effect should be applied.
過渡時間函數transition-timing-function
Setting speed curve of the transition effect.
用戶拖曳user-drag
Controlling whether the user can drag element.
用戶選取user-select
Controlling whether the user can select text.
變數variable
CSS variables defined specific values to be reused throughout a document.
垂直對齊vertical-align
Setting vertical alignment.
可見性visibility
Controlling whether an element is visible.
空白處理white-space
Controlling how whitespace and line breaks within an element are handled.
寬度width
Setting an element’s width.
預期更改will-change
Setting how an element is expected to change in the browser.
單字換行word-break
Setting whether words should break.
單字間距word-spacing
Setting the spacing between words.
書寫模式writing-mode
Setting different writing mode.
層級索引z-index
Set the z-order of a positioned element.

Integration

創建應用
Set up or create a modern web app by running one command.
CLI
Command line interface for Master CSS.
核心
The core syntax parsing of Master CSS.
DevTools Hook
A global bridge injected into the browser runtime.
ESLint
The ESLint configuration and plugin reference for Master CSS.
提取器
Master CSS static extractor for various raw text extraction.
語言
The language declaration, TextMate grammars provide syntax highlighting and improved editor integration.
語言伺服器
The language server reference for Master CSS.
語言服務
The language service reference for Master CSS.
正規化 CSS
Normalize modern browser styles.
React
A React integration for Master CSS
Runtime
The core syntax parsing and runtime engine of Master CSS.
驗證器
Validator for Master CSS syntactic class.
設計標記
色彩

Customizing color variables or starting with the crafted palette.

© Aoyue Design LLC.