CSS - 屬性參考



這份針對 Web 開發人員的全面參考包含了全球資訊網聯盟 (W3C) 在級聯樣式表 (CSS) 推薦規範中指定的所有 CSS 屬性的列表。

以下是按字母順序排列的所有 CSS 屬性的列表。

屬性 描述 示例
accent-color 設定使用者介面上控制元件的突出顯示顏色。
align-content 指定彈性線在彈性容器內部沿其交叉軸或網格的塊軸方向如何分佈。
align-items 描述彈性容器內的物件應如何對齊。
align-self 定義彈性容器內選定物件應如何對齊。
all 重置所有屬性,除了 unicode-bidi 和 direction。
animation 在樣式之間應用動畫。所有動畫屬性的簡寫形式。
animation-delay 定義動畫開始之前的暫停。
animation-direction 指定動畫是否應以反向、正向或交替迴圈播放。
animation-duration 指示動畫完成一個迴圈所需的時間。
animation-fill-mode 定義在動畫之前和之後應用於目標元素的樣式。
animation-iteration-count 定義動畫應播放多少次。
animation-name 為 @keyframes 動畫命名。
animation-play-state 指定動畫是正在執行還是已暫停。
animation-timing-function 提供動畫的速度曲線規範。
aspect-ratio 定義元素所需的縱橫比。
backdrop-filter 定義對元素後面空間的視覺影響。
backface-visibility 指定當元素背面對著使用者時是否應顯示。
background 背景相關屬性的簡寫形式。
background-attachment 指定背景相對於視口的位置,是固定還是可滾動。
background-clip 控制背景影像超出元素的填充或內容框的範圍。
background-color 設定元素的背景顏色。
background-image 在元素上設定一個或多個背景影像。
background-origin 設定背景的原點。
background-position 設定背景中每個影像的初始位置。
background-position-x 設定背景中每個影像的初始水平位置。
background-position-y 設定背景中每個影像的初始垂直位置。
background-repeat 控制背景中影像的重複。
background-size 控制背景影像的大小。
background-blend-mode 確定元素的背景影像如何相互混合。
border 設定元素的邊框。
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-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-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-color 定義元素左側邊框的顏色。
border-left-style 定義元素左側邊框的樣式。
border-left-width 定義元素左側邊框的寬度。
border-radius 圓角化元素外邊框邊緣的角。
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-color 定義上邊框的顏色。
border-top-left-radius 設定元素左上角邊框的圓角。
border-top-right-radius 使元素的右上角邊框圓角。
border-top-style 設定元素上邊框的線型。
border-top-width 設定元素上邊框的寬度。
border-width 設定元素邊框的寬度。
bottom 設定元素的垂直位置。
box-decoration-break 定義元素的邊框和背景在頁面斷裂或(對於內聯元素)在換行符處將如何表現。
box-shadow 在元素周圍新增陰影效果。
box-sizing 設定計算元素總寬度和高度的方式。
break-after 定義給定元素後面是否應跟隨頁面、列或區域斷裂。
break-before 定義給定元素前面是否應出現區域、頁面或列斷裂。
break-inside 定義給定元素內部是否應出現頁面、列或區域斷裂。
caption-side 定義表格標題應放置的位置。
caret-color 定義文字區域、輸入欄位和其他元素中可編輯游標(插入符號)的顏色。
@charset 提供有關樣式表使用的字元編碼的詳細資訊。
clear 定義元素相對於浮動元素的行為。
clip 剪裁精確定位的元素。
clip-path 建立剪裁區域,設定要顯示的元素部分。
color 定義文字的前景色。
column-count 定義元素應劃分的列數。
column-fill 控制元素的內容並將其分成多列。
column-gap 定義多列布局中列之間存在的間隙大小。
column-rule 簡寫屬性,設定多列布局中列之間繪製的線條的顏色、樣式和寬度。
column-rule-color 設定多列布局中列之間繪製的線條的顏色。
column-rule-style 設定多列布局中列之間繪製的線條的樣式。
column-rule-width 設定多列布局中列之間繪製的線條的寬度。
column-span 定義元素在多列布局中是否應跨越一列或所有列。
column-width 設定多列布局中的列寬。
columns 簡寫屬性,用於設定列的寬度和數量。
content 用生成的值替換內容。
counter-increment 用於增加或減少命名 CSS 計數器的值。
counter-reset 建立命名 CSS 計數器併為其初始化特定值。
counter-set 將給定值設定為 CSS 計數器。
cursor 定義指向專案時將顯示的滑鼠指標。
direction 設定文字、表格列和水平溢位的方向。
display 定義特定 HTML 元素的顯示方法。
empty-cells 定義是否在表格的空單元格上顯示邊框和背景。
filter 將圖形效果應用於元素。
flex 簡寫屬性,設定彈性專案是增長還是收縮。
flex-basis CSS flex-basis 屬性在將剩餘空間分配給彈性專案之前,設定彈性專案在主軸上的初始大小。
flex-direction CSS flex-direction 屬性確定彈性專案在彈性容器內放置的方向。(水平和垂直)
flex-flow 簡寫屬性,用於指定彈性容器的方向和換行行為。
flex-grow 確定彈性專案在其主軸上應占用多少額外空間。
flex-shrink 定義專案相對於其他專案的收縮。
flex-wrap CSS flex-wrap 屬性確定彈性專案是保持在一行上,還是根據可用空間允許換行到多行上。
float 將元素放置在其容器的左側或右側。
font 簡寫屬性,用於設定所有與字型相關的屬性。
font-family 定義文字的字體系列。
font-feature-settings 用於啟用或停用特定的 OpenType 字型功能,這些功能控制使用連字、字距調整、風格集等高階字型功能如何呈現文字。
font-kerning 確定如何使用字距調整資訊(字母之間的間距)。
font-language-override 用於調整字形和功能的渲染以匹配不同語言的語言需求。
font-size 確定文字的字型大小。
font-size-adjust 在字型回退的情況下保持文字的可讀性。
font-stretch 選擇字型的標準、緊縮或擴充套件字型。
font-style 設定文字的字型樣式。
font-synthesis 確定瀏覽器是否應合成字體系列中缺少的樣式。
font-variant 設定字型的所有字型變體。
font-variant-alternate 控制備用字形的用法。
font-variant-caps 控制用於小寫字母的備用字形的用法。
font-variant-east-asian 規範東亞文字(如中文和日文)的備用字形的用法。
font-variant-ligatures 規範上下文形式和連字的用法。
font-variant-numeric 規範序數標記、分數和整數的不同字形的用法。
font-variant-position 規範作為上標或下標定位的較小備用字形的用法。
font-weight 指定字型的粗細。
gap 簡寫屬性,用於設定網格佈局系統中行和列的間隙(也用於在文字的多列布局中新增間隙)。
grid 簡寫屬性,用於在一個宣告中設定所有與網格相關的屬性。
grid-area 簡寫屬性,指定網格專案在網格內的尺寸和位置。
grid-auto-columns 定義列的預設大小。
grid-auto-flow 定義網格自動放置的專案插入過程。
grid-auto-rows 定義行的預設大小。
grid-column 簡寫屬性,指定網格專案在網格列內的尺寸和位置。
grid-column-end 定義網格專案在網格列內的結束點。
grid-column-start 定義網格專案在網格列內的起始點。
grid-row 簡寫屬性,指定網格專案在網格行內的尺寸和位置。
grid-row-end 指定網格專案在網格行內的結束點。
grid-row-gap 以大小的形式定義行之間的間隙。
grid-row-start 指定網格專案在網格行內的起始點。
grid-template 簡寫屬性,指定與網格列、網格行和網格區域相關的屬性。
grid-template-areas 定義命名網格專案及其在顯示列和行中的用法。
grid-template-columns 定義網格佈局中列的數量和大小。
grid-template-rows 定義網格佈局中行的尺寸。
height 定義元素的高度。
hyphens 定義如何劃分單詞以增強文字佈局。
hyphenate-character 用於更改預設連字元字元(-)。
image-rendering 定義要使用的影像縮放方法的型別。
inline-size 定義元素塊的水平和垂直大小。
inset 指示元素與其父元素邊緣的距離。
inset-block 定義元素的邏輯塊起始和結束偏移量。
inset-block-end 定義元素的邏輯塊結束偏移量。
inset-block-start 定義元素的邏輯塊起始偏移量。
inset-inline 定義元素在內聯方向上的邏輯起始和結束偏移量。
inset-inline-end 定義元素的結束與其父元素之間的距離(以內聯方向測量)。
inset-inline-start 定義元素的開始與其父元素之間的距離(以內聯方向測量)。
isolation 定義元素是否必須建立新的堆疊內容。
justify-content 定義如何在彈性容器和網格容器中內容專案之間和周圍分配空間。
justify-items 定義網格元素應如何在網格容器內的水平軸上對齊。
justify-self 定義網格專案應如何在位於網格容器內的內聯方向上對齊。
@keyframes 定義動畫或過渡的一組關鍵幀。
left 定義元素的水平位置。
letter-spacing 設定文字字元之間的水平間距。
line-break 定義是否以及如何換行東亞文字。
line-height 定義行框的高度。
list-style 簡寫屬性,用於在一個宣告中設定所有列表樣式屬性。
list-style-image 將影像設定為列表項標記。
list-style-position 設定列表中標記的位置。
list-style-type 定義列表項標記的型別。
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 設定元素頂部的邊距。
mask 在特定點遮罩或剪裁影像以隱藏元素(部分或全部)。
mask-clip 確定遮罩覆蓋的區域。
mask-composite

在執行合成操作後,顯示當前蒙版層下方的蒙版層。
mask-image 設定用作元素蒙版層的影像。
mask-mode 定義由 mask-image 給出的蒙版參考應被視為亮度蒙版還是 alpha 蒙版。
mask-origin 定義蒙版影像的原點。
mask-position 定義蒙版影像在元素中的定位。
mask-repeat 定義如何在元素內重複蒙版影像。
mask-size 定義應用於使用 mask-image 屬性的元素的蒙版影像的大小。
mask-type 將 SVG <mask> 元素設定為亮度蒙版或 alpha 蒙版。
max-height 設定元素在佈局中佔據的最大高度。
max-width 設定元素在佈局中佔據的最大寬度。
@media 為特定的媒體型別、裝置和尺寸設定 CSS 樣式規則。
max-block-size 設定元素在其書寫方向相反方向上的最大尺寸。
max-inline-size 定義元素塊的水平或垂直最大尺寸。
min-block-size 根據元素的書寫模式,設定元素塊的最小尺寸(水平或垂直)。
min-inline-size 定義元素塊的最小水平或垂直尺寸。
min-height 設定元素高度的下限。
min-width 設定元素寬度的下限。
mix-blend-mode 定義元素內容應如何與其父元素的內容和元素的背景混合。
object-fit 定義影像或影片應如何調整大小或裁剪以適應其容器。
object-position 定義具有定義大小的元素內部內容的位置。
offset 用於在容器中定位元素的簡寫屬性。
offset-anchor 定義沿 offset-path 移動的框內元素的移動位置。
offset-distance 定義應放置元素的 offset-path 上的位置。
offset-path 定義元素在其父容器或 SVG 座標系中的路徑。
offset-rotate 定義元素沿指定的 offset-path 移動時的方向或方向。
opacity 設定元素的透明度。
order 定義彈性專案在彈性容器中出現的順序。
orphans 定義頁面、區域或列底部所需的最小行數,以防止斷開。
outline 設定元素周圍輪廓的寬度、顏色和樣式。輪廓用於在元素獲得焦點時突出顯示元素。
outline-color 設定元素周圍輪廓的顏色。
outline-offset 定義輪廓與元素邊框邊緣之間的空間。
outline-style 確定元素周圍輪廓的樣式。
outline-width 定義元素周圍輪廓的寬度。
overflow 定義如何處理超出其容器邊界的內容。
overflow-anchor 提供一種停用瀏覽器滾動錨定行為的方法,該行為會調整滾動位置以減少內容偏移。
overflow-wrap 允許瀏覽器將一行文字拆分為一個不可分割的字串,以防止內容溢位其容器。
overflow-clip-margin 定義內容在被裁剪之前可以超出元素框的距離。
overflow-x 定義元素的內容將溢位到其左右邊距以及水平方向。
overflow-y 定義當塊級元素的內容超出元素的頂部和底部邊緣時如何顯示。
overflow-block 定義當元素的內容超出其框的左右邊界時,內容的行為。
overflow-inline 定義當內容溢位元素的內聯邊緣時如何顯示溢位的內容。
overscroll-behavior 確定瀏覽器在到達滾動區域邊界時執行的操作。
overscroll-behavior-block 確定瀏覽器在到達滾動區域的塊方向邊界時執行的操作。
overscroll-behavior-inline 確定瀏覽器在到達滾動區域的內聯方向邊界時執行的操作。
overscroll-behavior-x 確定瀏覽器在到達滾動區域的水平邊界時執行的操作。
overscroll-behavior-y 確定瀏覽器在到達滾動區域的垂直邊界時執行的操作。
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 設定元素頂部的填充空間。
perspective 定義 z=0 平面與使用者之間的距離。
perspective-origin 定義檢視者/使用者正在檢視的位置。
place-content 同時在塊(列)和內聯(行)軸上對齊內容。它是 align-content 和 justify-content 屬性的簡寫。
place-items 沿塊(列)和內聯(行)軸同時對齊網格和彈性盒容器內的專案。它是 align-items 和 justify-items 屬性的簡寫。
place-self 同時在塊和內聯方向上對齊單個專案。它是 align-self 和 justify-self 屬性的簡寫。
pointer-events 確定元素是否接收指標事件。
position 定義元素在網頁上的位置。
quotes 定義用於嵌入引號的引號樣式。
resize 定義使用者是否以及如何調整元素的大小。
right 控制元素的水平位置。
rotate 定義元素旋轉的方式。
row-gap 定義網格行之間的間隙。也用於在多列布局中新增列之間的間隙。
scale 指定元素的縮放變換,獨立於 transform 屬性。
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-top 定義元素滾動捕捉區域的頂部邊距。
scroll-margin-right 定義元素滾動捕捉區域的右邊距。
scroll-padding 定義滾動容器邊緣與元素捕捉區域(滾動停止後捕捉到位)之間的滾動填充。
scroll-padding-block 定義元素在塊尺寸上的滾動填充。
scroll-padding-block-start 定義元素在塊尺寸上滾動填充的起始邊緣的偏移量。
scroll-padding-block-end 定義元素在塊尺寸上滾動填充的結束邊緣的偏移量。
scroll-padding-bottom 定義元素滾動捕捉區域的底部偏移量。
scroll-padding-left 定義滾動容器左邊緣與元素滾動捕捉區域之間的空間量。
scroll-padding-right 定義滾動容器右邊緣與元素滾動捕捉區域之間的空間量。
scroll-padding-top 定義元素滾動捕捉區域的頂部偏移量。
scroll-padding-inline 定義元素在內聯尺寸上的滾動填充。
scroll-padding-inline-start 定義視口起始邊緣的偏移量,在內聯尺寸上。
scroll-padding-inline-end 定義視口結束邊緣的偏移量,在內聯尺寸上。
scroll-snap-align 定義捕捉元素在其捕捉容器內如何定位。
scroll-snap-shot 確定滾動容器是否會滾動超過或貼上到最近的捕捉位置。
scroll-snap-type 定義滾動容器如何捕捉到捕捉位置。
scrollbar-color 定義捲軸軌道和滑塊的顏色。
scrollbar-width 用於設定捲軸軌道和滑塊的寬度樣式。
scrollbar-gutter 它有助於為捲軸建立固定空間。

shape-image-threshold 當使用具有 shape-outside 屬性的影像時,指定形狀提取的 alpha 通道閾值。
shape-margin 定義指定 CSS 形狀周圍的邊距。
shape-outside 定義內聯內容應圍繞其環繞的形狀。
tab-size 定義元素內製表符字元的寬度。
table-layout 定義 <table> 單元格、行和列的顯示方式。
text-align 定義文字與頁面邊距的對齊方式。
text-align-last 設定塊的最後一行或強制換行符之前的行的對齊方式。
text-combine-upright 定義如何將多個字元放入單個字元的區域中。
text-decoration 定義新增到文字的裝飾。
text-decoration-color 定義文字裝飾的顏色。
text-decoration-line 用於向文字新增裝飾線。
text-decoration-style 用於向文字裝飾線新增樣式。
text-decoration-thickness 用於向文字裝飾線新增粗細。
text-emphasis 用於向文字新增強調的簡寫屬性。
text-emphasis-color 用於設定文本週圍強調標記的顏色。
text-emphasis-position 用於設定文本週圍強調標記的位置。
text-emphasis-style 定義強調標記的外觀。
text-indent 定義文字第一行的縮排。
text-justify 當 text-align 設定為“justify”時,指定文字的對齊方法。
text-orientation 定義一行中文字字元的方向。
text-overflow 控制如何向用戶顯示隱藏的溢位內容。
text-shadow 用於向文字新增陰影效果。
text-transform 透過以各種方式轉換文字,更改文字的外觀。
text-underline-offset 定義下劃線文字裝飾線與其初始位置的距離。
text-underline-position 定義下劃線文字裝飾應放置的位置。
top 定義元素相對於其包含元素的垂直位置。
transform 它可用於元素的旋轉、縮放、傾斜或平移。
transform-box 定義轉換屬性相關的佈局框。
transform-origin 有助於設定元素轉換的原點。
transform-style 定義巢狀專案的 3D 空間渲染。
transition 一個充當每個轉換屬性簡寫的屬性。
transition-delay 定義在開始轉換效果之前要等待的時間量。
transition-duration 定義轉換動畫完成所需的時間量。
transition-property 定義哪些 CSS 屬性應應用轉換效果。
transition-timing-function 定義轉換效果的速度曲線。
translate 允許您沿 X、Y 和 Z 軸移動元素。
unicode-bidi 控制如何在文件中顯示雙向文字。
user-select 確定使用者是否可以選擇文字。
vertical-align 定義元素的垂直對齊方式。
visibility 定義是否需要顯示或隱藏元素,而不會更改文件的佈局。
white-space 定義元素中文字內的空白流。
widows 定義頁面或列頂部必須剩餘多少行。
width 定義元素內容區域的寬度。
word-break 定義如果單詞超過元素的可用寬度,則應如何斷開或換行。
word-spacing 定義文字中單詞之間的間距。
writing-mode 定義文字應垂直顯示還是水平顯示。
z-index 控制網頁中元素的堆疊順序。
未找到結果
廣告