CSS 參考手冊

CSS 屬性

A

accent-color 指定用戶界面控件的強調色。
align-content 規定彈性容器內的行之間的對齊方式，當項目不使用所有可用空間時。
align-items 規定彈性容器內項目的對齊方式。
align-self 規定彈性容器內所選項目的對齊方式。
all 重置所有屬性（除了 unicode-bidi 和 direction）。
animation 所有 animation-* 屬性的簡寫屬性。
animation-delay 規定開始動畫的延遲。
animation-direction 規定動畫是向前播放、向后播放還是交替播放。
animation-duration 規定動畫完成一個周期應花費的時間。
animation-fill-mode 規定元素在不播放動畫時（在開始之前、結束之后、或同時）的樣式。
animation-iteration-count 規定動畫的播放次數。
animation-name 規定 @keyframes 動畫的名稱。
animation-play-state 規定動畫是播放還是暫停。
animation-timing-function 規定動畫的速度曲線。
aspect-ratio 指定元素的首選寬高比。

B

backdrop-filter 定義元素背景區域的圖形效果。
backface-visibility 定義當面對用戶時元素的背面是否應可見。
background 所有 background-* 屬性的簡寫屬性。
background-attachment 設置背景圖像是與頁面的其余部分一起滾動還是固定的。
background-blend-mode 規定每個背景圖層（顏色/圖像）的混合模式。
background-clip 定義背景（顏色或圖像）應在元素內延伸的距離。
background-color 規定元素的背景色。
background-image 規定元素的一幅或多幅背景圖像。
background-origin 規定背景圖像的初始位置。
background-position 規定背景圖像的位置。
background-position-x 指定背景圖像在 x 軸上的位置。
pr_background-position-y 指定背景圖像在 y 軸上的位置。
background-repeat 設置是否以及如何重復背景圖像。
background-size 規定背景圖像的尺寸。
block-size 指定元素在塊方向上的大小。
border border-width、border-style 以及 border-color 的簡寫屬性。
border-block

以下屬性的簡寫屬性：
border-block-color 設置塊方向上開始和結束邊框的顏色。
border-block-end

以下屬性的簡寫屬性：
border-block-end-color 設置塊方向上結束邊框的顏色。
border-block-end-style 設置塊方向上結束邊框的樣式。
border-block-end-width 設置塊方向上結束邊框的寬度。
border-block-start

以下屬性的簡寫屬性：
border-block-start-color 設置塊方向上開始邊框的顏色。
border-block-start-style 設置塊方向上開始邊框的樣式。
border-block-start-width 設置塊方向上開始邊框的寬度。
border-block-style 設置塊方向上開始和結束邊框的樣式。
border-block-width 設置塊方向上開始和結束邊框的寬度。
border-bottom border-bottom-width、border-bottom-style 以及 border-bottom-color 的簡寫屬性。
border-bottom-color 設置下邊框的顏色。
border-bottom-left-radius 定義左下角的邊框圓角。
border-bottom-right-radius 定義右下角的邊框圓角。
border-bottom-style 設置下邊框的樣式。
border-bottom-width 設置下邊框的寬度。
border-collapse 設置表格邊框是折疊為單一邊框還是分開的。
border-color 設置四條邊框的顏色。
border-end-end-radius 設置元素塊結束和行內結束邊之間的角落半徑。
border-end-start-radius 設置元素塊結束和行內開始邊之間的角落半徑。
border-image border-image-* 屬性的簡寫屬性。
border-image-outset 規定邊框圖像區域超出邊框的量。
border-image-repeat 規定邊框圖像應重復、圓角、還是拉伸。
border-image-slice 規定如何裁切邊框圖像。
border-image-source 規定用作邊框的圖像的路徑。
border-image-width 規定邊框圖像的寬度。
border-inline

以下屬性的簡寫屬性：
border-inline-color 設置行內方向上開始和結束邊框的顏色。
border-inline-end

以下屬性的簡寫屬性：
border-inline-end-color 設置行內方向上結束邊框的顏色。
border-inline-end-style 設置行內方向上結束邊框的樣式。
border-inline-end-width 設置行內方向上結束邊框的寬度。
border-inline-start

以下屬性的簡寫屬性：
border-inline-start-color 設置行內方向上開始邊框的顏色。
border-inline-start-style 設置行內方向上開始邊框的樣式。
border-inline-start-width 設置行內方向上開始邊框的寬度。
border-inline-style 設置行內方向上開始和結束邊框的樣式。
border-inline-width 設置行內方向上開始和結束邊框的寬度。
border-left 所有 border-left-* 屬性的簡寫屬性。
border-left-color 設置左邊框的顏色。
border-left-style 設置左邊框的樣式。
border-left-width 設置左邊框的寬度。
border-radius 四個 border-*-radius 屬性的簡寫屬性。
border-right 所有 border-right-* 屬性的簡寫屬性。
border-right-color 設置右邊框的顏色。
border-right-style 設置右邊框的樣式。
border-right-width 設置右邊框的寬度。
border-spacing 設置相鄰單元格邊框之間的距離。
border-start-end-radius 設置元素塊開始和行內結束邊之間的角落半徑。
border-start-start-radius 設置元素塊開始和行內開始邊之間的角落半徑。
border-style 設置四條邊框的樣式。
border-top border-top-width、border-top-style 以及 border-top-color 的簡寫屬性。
border-top-color 設置上邊框的顏色。
border-top-left-radius 定義左上角的邊框圓角。
border-top-right-radius 定義右上角的邊框圓角。
border-top-style 設置上邊框的樣式。
border-top-width 設置上邊框的寬度。
border-width 設置四條邊框的寬度。
bottom 設置元素相對于其父元素底部的位置。
box-decoration-break 設置元素在分頁符處的背景和邊框的行為，或對于行內元素在換行符處的行為。
box-reflect 用于創建元素的反射效果。
box-shadow 將一個或多個陰影附加到元素。
box-sizing 定義元素的寬度和高度的計算方式：它們是否應包含內邊距和邊框。
break-after 規定指定元素之后是否應出現 page-、column- 或 region-break。
break-before 規定指定元素之前是否應出現 page-、column- 或 region-break。
break-inside 規定指定元素內部是否應出現 page-、column- 或 region-break。

C

caption-side 規定表格標題的放置方式。
caret-color 規定光標在 input、textarea 或任何可編輯元素中的顏色。
@charset 規定樣式表中使用的字符編碼。
clear 規定不允許在元素的哪一側浮動元素
clip 剪裁絕對定位的元素。
clip-path 將元素裁剪為基本形狀或 SVG 源。
color 設置文本的顏色。
color-scheme 指示元素應使用哪個操作系統配色方案進行渲染。
column-count 規定元素應分為的列數。
column-fill 指定如何填充列（是否 balanced）。
column-gap 規定列間隙。
column-rule 所有 column-rule-* 屬性的簡寫屬性。
column-rule-color 規定列之間規則的顏色。
column-rule-style 規定列之間的規則樣式。
column-rule-width 規定列之間的規則寬度。
column-span 規定元素應該跨越多少列。
column-width 規定列寬度。
columns column-width 和 column-count 的簡寫屬性。
@container 根據容器的大小或樣式定義容器內元素的樣式。
content 與 :before 和 :after 偽元素一起使用，來插入生成的內容。
counter-increment 增加或減少一個或多個 CSS 計數器的值。
counter-reset 創建或重置一個或多個 CSS 計數器。
counter-set 創建或設置一個或多個 CSS 計數器。
@counter-style 允許您定義自定義的計數器樣式。
cursor 規定當指向元素時要顯示的鼠標光標。

D

direction 規定文本方向/書寫方向。
display 規定如何顯示某個 HTML 元素。

E

empty-cells 規定是否在表格中的空白單元格上顯示邊框和背景。

F

filter 定義元素顯示之前的效果（例如，模糊或顏色偏移）。
flex flex-grow、flex-shrink 以及 flex-basis 的簡寫屬性。
flex-basis 規定彈性項目的初始長度。
flex-direction 規定彈性項目的方向。
flex-flow flex-direction 和 flex-wrap 的簡寫屬性。
flex-grow 規定項目相對于其余項目的增量。
flex-shrink 規定項目相對于其余項目的減量。
flex-wrap 規定彈性項目是否應該換行。
float 規定是否應該對盒（box）進行浮動。
font font-style、font-variant、font-weight、font-size/line-height 以及 font-family 的簡寫屬性。
@font-face 允許網站下載和使用 "web-safe" 字體以外的其他字體的規則。
font-family 規定文本的字體族（字體系列）。
font-feature-settings 允許控制 OpenType 字體中的高級印刷特性。
@font-feature-values 允許創作者使用 font-variant-alternate 中的通用名來實現在 OpenType 中以不同方式激活的特性。
font-kerning 控制字距調整信息的使用（字母間距）。
font-language-override 控制特定語言的字形在字體的使用。
@font-palette-values 允許您自定義字體調色板的默認值。
font-size 規定文本的字體大小。
font-size-adjust 保持發生字體回退時的可讀性。
font-stretch 從字體系列中選擇一個普通的、壓縮的或擴展的字體。
font-style 規定文本的字體樣式。
font-synthesis 控制哪些缺失的字體（粗體或斜體）可以由瀏覽器合成。
font-variant 規定是否應該以小型大寫字體顯示文本。
font-variant-alternates 控制與 @font-feature-values 中定義的備用名稱關聯的備用字形的使用。
font-variant-caps 控制大寫字母的備用字形的使用。
font-variant-east-asian 控制東亞文字（例如中文和日語）的備用字形的使用。
font-variant-ligatures 控制在適用于元素的文本內容中使用哪些連字和上下文形式。
font-variant-numeric 控制數字、分數和序號標記的備用字形的使用。
font-variant-position 控制較小字體的替代字形的使用，這些字形相對于字體基線定位為上標或下標。
font-weight 規定字體的粗細。

G

grid grid-template-rows、grid-template-columns、grid-template-areas、grid-auto-rows、grid-auto-columns 以及 grid-auto-flow 屬性的簡寫屬性。
grid-area 即可規定網格項的名稱，也可以是 grid-row-start、grid-column-start、grid-row-end 以及 grid-column-end 屬性的簡寫屬性。
grid-auto-columns 規定默認的列尺寸。
grid-auto-flow 規定如何在網格中插入自動放置的項目。
grid-auto-rows 規定默認的行尺寸。
grid-column grid-column-start 和 grid-column-end 屬性的簡寫屬性。
grid-column-end 規定如何結束網格項目。
grid-column-gap 規定列間隙的尺寸。
grid-column-start 規定網格項目從何處開始。
grid-gap grid-row-gap 和 grid-column-gap 的簡寫屬性。
grid-row grid-row-start 和 grid-row-end 屬性的簡寫屬性。
grid-row-end 規定網格項目在何處結束。
grid-row-gap 規定列間隙的尺寸。
grid-row-start 規定網格項目從何處開始。
grid-template grid-template-rows、grid-template-columns 以及 grid-areas 屬性的簡寫屬性。
grid-template-areas 規定如何使用命名的網格項顯示列和行。
grid-template-columns 指定列的尺寸以及網格布局中的列數。
grid-template-rows 指定網格布局中的行的尺寸。

H

hanging-punctuation 規定是否可以在行框外放置標點符號。
height 設置元素的高度。
hyphens 設置如何分割單詞以改善段落的布局。
hyphenate-character 設置在換行前用于連字符斷行的字符。

I

image-rendering 指定用于圖像縮放的算法類型。
@import 允許您將樣式表導入另一張樣式表。
initial-letter 指定首字母的大小，并可選地指定首字母應下沉的行數。
inline-size 指定元素在行內方向上的大小。
inset 指定元素與父元素之間的距離。
inset-block 指定元素與父元素在塊方向上的距離。
inset-block-end 指定元素結束處與父元素在塊方向上的距離。
inset-block-start 指定元素開始處與父元素在塊方向上的距離。
inset-inline 指定元素與父元素在行內方向上的距離。
inset-inline-end 指定元素結束處與父元素在行內方向上的距離。
inset-inline-start 指定元素開始處與父元素在行內方向上的距離。
isolation 定義元素是否必須創建新的堆疊內容。

J

justify-content 規定項目在彈性容器內的對齊方式，當項目未用到所有可用空間時。
justify-items 規定網格項在行內方向的對齊方式。在網格容器上設置。
justify-self 規定網格項在行內方向的對齊方式。在網格項上設置。

K

@keyframes 規定動畫代碼。

L

@layer 控制 CSS 層疊層如何評估樣式的順序。
left 規定定位元素的左側位置。
letter-spacing 增加或減少文本中的字符間距。
line-break 如何如何/是否換行。
line-height 設置行高。
list-style 在一條聲明中設置所有列表屬性。
list-style-image 把圖像指定為列表項標記。
list-style-position 規定列表項標記的位置。
list-style-type 規定列表項標記的類型。

M

margin 在一條聲明中設置所有外邊距屬性。
margin-block 指定塊方向上的外邊距。
margin-block-end 指定塊方向上結束處的外邊距。
margin-block-start 指定塊方向上開始處的外邊距。
margin-bottom 設置元素的下外邊距。
margin-inline 指定行內方向上的外邊距。
margin-inline-end 指定行內方向上結束處的外邊距。
margin-inline-start 指定行內方向上開始處的外邊距。
margin-left 設置元素的左外邊距。
margin-right 設置元素的右外邊距。
margin-top 設置元素的上外邊距。
marker 指向將在元素路徑的所有頂點（第一個、中間和最后一個）上繪制的標記。
marker-end 指向將在元素路徑的最后一個頂點上繪制的標記。
marker-mid 指向將在元素路徑的所有中間頂點上繪制的標記。
marker-start 指向將在元素路徑的第一個頂點上繪制的標記。
mask

以下屬性的簡寫屬性：
mask-clip 指定受遮罩圖像影響的區域。
mask-composite 指定在當前遮罩層與其下方的遮罩層上使用的合成操作。
mask-image 指定用作元素遮罩層的圖像。
mask-mode 指定遮罩層圖像是作為亮度遮罩還是作為 alpha 遮罩處理。
mask-origin 指定遮罩層圖像的原始位置（遮罩位置區域）。
mask-position 設置遮罩層圖像的起始位置（相對于遮罩位置區域）。
mask-repeat 指定遮罩層圖像的重復方式。
mask-size 指定遮罩層圖像的大小。
mask-type 指定 SVG 元素是作為亮度遮罩還是作為 alpha 遮罩處理。
max-height 設置元素的最大高度。
max-width 設置元素的最大寬度。
@media 為不同的媒體類型、設備、尺寸設置樣式規則。
max-block-size 設置元素在塊方向上的最大大小。
max-inline-size 設置元素在行內方向上的最大大小。
min-block-size 設置元素在塊方向上的最小大小。
min-inline-size 設置元素在行內方向上的最小大小。
min-height 設置元素的最小高度。
min-width 設置元素的最小寬度。
mix-blend-mode 規定元素內容應如何與其直接父的背景相混合。

N

@namespace 定義在樣式表中使用的 XML 命名空間。

O

object-fit 規定替換元素的內容應如何適合其所用高度和寬度建立的框。
object-position 指定替換元素在其框內的對齊方式。
offset

以下屬性的簡寫屬性：
offset-anchor 指定元素上固定在動畫路徑上的點。
offset-distance 指定動畫元素在路徑上的位置。
offset-path 指定元素沿其動畫的路徑。
offset-position 指定元素沿路徑的初始位置。
offset-rotate 指定元素沿路徑動畫時的旋轉。
opacity 設置元素的不透明等級。
order 設置彈性項目相對于其余項目的順序。
orphans 設置頁面或列底部必須保留的最小行數。
orphans 設置在元素內發生分頁時必須保留在頁面底部的最小行數。
outline outline-width、outline-style 以及 outline-color 屬性的簡寫屬性。
outline-color 設置輪廓的顏色。
outline-offset 對輪廓進行偏移，并將其繪制到邊框邊緣之外。
outline-style 設置輪廓的樣式。
outline-width 設置輪廓的寬度。
overflow 規定如果內容溢出元素框會發生什么情況。
overflow-anchor 指定在可滾動容器中加載新內容時，是否應將可見區域中的內容向下推。
overflow-wrap 指定瀏覽器是否可以在長單詞溢出容器時斷行。
overflow-wrap 規定瀏覽器是否可能為了防止溢出而在單詞內折行（當字符串太長而無法適應其包含框時）。
overflow-x 規定是否剪裁內容的左右邊緣，如果它溢出了元素的內容區域。
overflow-y 規定是否剪裁內容的上下邊緣，如果它溢出了元素的內容區域。
overscroll-behavior 指定在 x 和 y 方向上是否具有滾動鏈或過度滾動效果。
overscroll-behavior-block 指定在塊方向上是否具有滾動鏈或過度滾動效果。
overscroll-behavior-inline 指定在行內方向上是否具有滾動鏈或過度滾動效果。
overscroll-behavior-x 指定在 x 方向上是否具有滾動鏈或過度滾動效果。
overscroll-behavior-y 指定在 y 方向上是否具有滾動鏈或過度滾動效果。

P

padding 所有 padding-* 屬性的簡寫屬性。
padding-block 指定塊方向上的內邊距。
padding-block-end 指定塊方向上結束處的內邊距。
padding-block-start 指定塊方向上開始處的內邊距。
padding-bottom 設置元素的下內邊距。
padding-inline 指定行內方向上的內邊距。
padding-inline-end 指定行內方向上結束處的內邊距。
padding-inline-start 指定行內方向上開始處的內邊距。
padding-left 設置元素的左內邊距。
padding-right 設置元素的右內邊距。
padding-top 設置元素的上內邊距。
@page 自定義打印頁面的尺寸、方向和邊距。
page-break-after 設置元素之后的分頁（page-break）行為。
page-break-before 設置元素之前的分頁（page-break）行為。
page-break-inside 設置元素內的分頁（page-break）行為。
paint-order 設置 SVG 元素或文本的繪制順序。
perspective 為 3D 定位元素提供透視。
perspective-origin 定義用戶觀看 3D 定位元素的位置。
place-content 指定 flexbox 和網格布局的 align-content 和 justify-content 屬性值。
place-items 指定網格布局的 align-items 和 justify-items 屬性值。
place-self 指定網格布局的 align-self 和 justify-self 屬性值。
pointer-events 定義元素是否對指針事件做出反應。
position 規定用于元素的定位方法的類型（靜態、相對、絕對或固定）。
@property 直接在樣式表中定義自定義 CSS 屬性，無需運行任何 JavaScript。

Q

quotes 設置引號類型。

R

resize 定義用戶是否以及如何調整元素的尺寸。
right 規定定位元素的左側位置。
rotate 指定元素的旋轉。
row-gap 指定網格行之間的間隙。

S

scale 通過放大或縮小來指定元素的大小。
@scope 允許您選擇特定 DOM 子樹中的元素，并精確地定位元素，而無需編寫過于具體的選擇器。
scroll-behavior 規定可滾動框中是否平滑地滾動，而不是直接跳躍。
scroll-margin 指定吸附位置與容器之間的外邊距。
scroll-margin-block 指定塊方向上吸附位置與容器之間的外邊距。
scroll-margin-block-end 指定塊方向上吸附位置與容器結束處之間的外邊距。
scroll-margin-block-start 指定塊方向上吸附位置與容器開始處之間的外邊距。
scroll-margin-bottom 指定底部吸附位置與容器之間的外邊距。
scroll-margin-inline 指定行內方向上吸附位置與容器之間的外邊距。
scroll-margin-inline-end 指定行內方向上吸附位置與容器結束處之間的外邊距。
scroll-margin-inline-start 指定行內方向上吸附位置與容器開始處之間的外邊距。
scroll-margin-left 指定左側吸附位置與容器之間的外邊距。
scroll-margin-right 指定右側吸附位置與容器之間的外邊距。
scroll-margin-top 指定頂部吸附位置與容器之間的外邊距。
scroll-padding 指定容器到子元素吸附位置的距離。
scroll-padding-block 指定塊方向上容器到子元素吸附位置的距離。
scroll-padding-block-end 指定塊方向上容器結束到子元素吸附位置的距離。
scroll-padding-block-start 指定塊方向上容器開始到子元素吸附位置的距離。
scroll-padding-bottom 指定容器底部到子元素吸附位置的距離。
scroll-padding-inline 指定行內方向上容器到子元素吸附位置的距離。
scroll-padding-inline-end 指定行內方向上容器結束處到子元素吸附位置的距離。
scroll-padding-inline-start 指定行內方向上容器開始處到子元素吸附位置的距離。
scroll-padding-left 指定容器左側到子元素吸附位置的距離。
scroll-padding-right 指定容器右側到子元素吸附位置的距離。
scroll-padding-top 指定容器頂部到子元素吸附位置的距離。
scroll-snap-align 指定用戶停止滾動時元素的位置。
scroll-snap-stop 指定在觸控板或觸摸屏上快速滑動后的滾動行為。
scroll-snap-type 指定滾動時的吸附行為。
scrollbar-color 指定元素滾動條的顏色。
shape-outside 定義行內內容的環繞形狀。
@starting-style 定義元素在首次樣式更新之前的起始樣式。
@supports 用于測試瀏覽器是否支持某種 CSS 特性。

T

tab-size 規定制表符的寬度。
table-layout 定義用于對單元格、行和列進行布局的算法。
text-align 規定文本的水平對齊方式。
text-align-last 描述當 text-align 為 "justify" 時，如何在強制換行之前對齊塊或行的最后一行。
text-combine-upright 將多個字符組合到到單個字符的空間中。
text-decoration 規定文本裝飾。
text-decoration-color 規定文本裝飾（text-decoration）的顏色。
text-decoration-line 規定文本裝飾（text-decoration）中的的行類型。
text-decoration-style 規定文本裝飾（text-decoration）中的行樣式。
text-decoration-thickness 規定裝飾線的粗細。
text-emphasis

以下屬性的簡寫屬性：
text-emphasis-color 指定強調標記的顏色。
text-emphasis-position 指定強調標記的位置。
text-emphasis-style 指定強調標記的樣式。
text-indent 規定文本塊（text-block）中的的首行縮進。
text-justify 規定當 text-align 為 "justify" 時使用的對齊方法。
text-orientation 定義一行中字符的方向。
text-overflow 規定當文本溢出包含元素時應該發生的情況。
text-shadow 添加文本陰影。
text-transform 控制文本的大寫。
text-underline-offset 指定下劃線文本裝飾的偏移距離。
text-underline-position 指定下劃線文本裝飾的位置。
top 規定定位元素的頂端位置。
transform 向元素應用 2D 或 3D 轉換。
transform-origin 允許您更改轉換元素的位置。
transform-style 規定如何在 3D 空間中渲染嵌套的元素。
transition 所有 transition-* 屬性的簡寫屬性。
transition-delay 規定合適開始過渡效果。
transition-duration 規定完成過渡效果所需的秒或毫秒數。
transition-property 規定過渡效果對應的 CSS 屬性的名稱。
transition-timing-function 規定過渡效果的速度曲線。
translate 指定元素的位置。

U

unicode-bidi 與 direction 屬性一起使用，設置或返回是否應覆寫文本來支持同一文檔中的多種語言。
user-select 規定是否能選取元素的文本。

V

vertical-align 設置元素的垂直對齊方式。
visibility 規定元素是否可見。

W

white-space 規定如何處理元素內的空白字符。
widows 設置頁面或列頂部必須保留的最小行數。
widows 設置如果元素內發生分頁，必須在頁面頂部保留的最小行數。
width 設置元素的寬度。
word-break 規定單詞到達行末后如何換行。
word-spacing 增加或減少文本中的單詞間距。
word-wrap 允許長的、不能折行的單詞換到下一行。
writing-mode 規定文本行是水平還是垂直布局。

Z

z-index 設置定位元素的堆疊順序。
zoom 指定元素的縮放因子。元素可以放大和縮小。