TL
Tool Lab
💰捐贈
💰捐贈

CSS Properties Reference

Comprehensive CSS property reference — flexbox, grid, typography, animation, and more.

52 個屬性

display版面配置

Defines how element is rendered in the document.

block | inline | flex | grid | inline-flex | inline-grid | none | contents
position版面配置

Specifies positioning method.

static | relative | absolute | fixed | sticky
top / right / bottom / left版面配置

Offset for positioned elements.

<length> | <percentage> | auto
float版面配置

Moves element to left/right of container.

left | right | none | inline-start | inline-end
clear版面配置

Specifies what happens with the element next to a floated element.

none | left | right | both | inline-start | inline-end
z-index版面配置

Sets stacking order of elements.

auto | <integer>
overflow版面配置

Controls content that overflows element box.

visible | hidden | scroll | auto | clip
width / height盒模型

Sets element dimensions.

<length> | <percentage> | auto | min-content | max-content | fit-content
max-width / max-height盒模型

Sets maximum element dimensions.

<length> | <percentage> | none | min-content | max-content
min-width / min-height盒模型

Sets minimum element dimensions.

<length> | <percentage> | auto | min-content | max-content
margin盒模型

Space outside the element border.

<length> | <percentage> | auto (shorthand: top right bottom left)
padding盒模型

Space between content and border.

<length> | <percentage> (shorthand: top right bottom left)
border盒模型

Shorthand for border-width, border-style, border-color.

<border-width> || <border-style> || <color>
border-radius盒模型

Rounds corners of element border box.

<length> | <percentage> (1-4 values for corners)
box-sizing盒模型

How width/height is calculated.

content-box | border-box
box-shadow盒模型

Adds shadow effects around element frame.

<offset-x> <offset-y> <blur> <spread> <color> | inset | none
flex-direction彈性盒

Sets main axis of flex container.

row | row-reverse | column | column-reverse
flex-wrap彈性盒

Whether flex items wrap onto multiple lines.

nowrap | wrap | wrap-reverse
justify-content彈性盒

Alignment along main axis.

flex-start | flex-end | center | space-between | space-around | space-evenly
align-items彈性盒

Default alignment along cross axis.

stretch | flex-start | flex-end | center | baseline
align-content彈性盒

Multi-line flex container alignment.

flex-start | flex-end | center | space-between | space-around | stretch
flex彈性盒

Shorthand for flex-grow, flex-shrink, flex-basis.

none | auto | <flex-grow> <flex-shrink> <flex-basis>
gap彈性盒

Space between flex/grid items.

<length> | <percentage> (row-gap column-gap)
grid-template-columns格線

Defines columns of the grid.

none | <track-size> | repeat() | minmax() | auto-fill | auto-fit
grid-template-rows格線

Defines rows of the grid.

none | <track-size> | repeat() | minmax()
grid-column格線

Shorthand for grid-column-start and grid-column-end.

<line> / <line> | span <number>
grid-row格線

Shorthand for grid-row-start and grid-row-end.

<line> / <line> | span <number>
grid-area格線

Named grid area or row/column shorthand.

<name> | <row-start> / <col-start> / <row-end> / <col-end>
font-size排版

Size of the font.

<length> | <percentage> | xx-small...xx-large | smaller | larger
font-family排版

Prioritized list of font family names.

<family-name> | <generic-family> (comma-separated list)
font-weight排版

Weight/boldness of the font.

normal | bold | bolder | lighter | 100–900
font-style排版

Italic or oblique font.

normal | italic | oblique
line-height排版

Height of a line box.

normal | <number> | <length> | <percentage>
text-align排版

Horizontal alignment of text.

left | right | center | justify | start | end
text-decoration排版

Decorative lines on text.

none | underline | overline | line-through | blink
text-transform排版

Capitalization of text.

none | uppercase | lowercase | capitalize
letter-spacing排版

Space between characters.

normal | <length>
word-spacing排版

Space between words.

normal | <length>
color視覺

Foreground color of text and text decorations.

<color> (name, hex, rgb(), hsl(), oklch())
background視覺

Shorthand for all background properties.

<color> | <image> | <position> / <size> <repeat> <attachment>
background-color視覺

Background color of element.

<color> | transparent
opacity視覺

Transparency of element (0–1).

<number> (0 = transparent, 1 = opaque)
visibility視覺

Shows or hides element without changing layout.

visible | hidden | collapse
transition動畫

Shorthand for transition properties.

<property> <duration> <easing> <delay>
animation動畫

Shorthand for animation properties.

<name> <duration> <easing> <delay> <iteration> <direction> <fill-mode>
transform動畫

Applies 2D/3D transforms.

none | translate() rotate() scale() skew() matrix()
will-change動畫

Hints browser about expected changes for optimization.

auto | scroll-position | contents | transform | opacity
cursorUI

Type of mouse cursor.

auto | default | pointer | text | move | grab | not-allowed | crosshair | ...
pointer-eventsUI

Controls when element can be target of pointer events.

auto | none | all | fill | stroke | painted
user-selectUI

Controls if text can be selected.

auto | none | text | all | contain
outlineUI

Outline drawn around element outside border.

<outline-width> || <outline-style> || <color> | none
resizeUI

Whether/how user can resize element.

none | both | horizontal | vertical

關於本工具

本參考涵蓋八個類別中最常用的 CSS 屬性：版面配置、盒模型、彈性盒、格線、排版、視覺、動畫和 UI 互動。

使用搜尋框按屬性名稱、說明或允許值過濾。使用類別篩選器瀏覽特定群組。

使用方法

  1. 在搜尋框中輸入屬性名稱或關鍵字來過濾列表。
  2. 從下拉選單中選擇類別，只顯示該群組。
  3. 每行顯示屬性名稱、類別標籤、說明和允許值。

使用情境

前端開發人員在開發過程中查找屬性名稱和有效值。學習 CSS 的學生使用參考來探索可用的屬性。

常見問題

  • 是否包含所有 CSS 屬性？ — 否。本參考只涵蓋最常用的屬性。
  • 是否列出了帶供應商前綴的屬性？ — 否。只列出不帶前綴的標準屬性。