CSS3 屬性

Created: October-16, 2018

以下部分包含 CSS3 屬性的簡要概述。

CSS 屬性按字母順序排序

本節包含屬於最新 CSS3 規範的標準屬性的完整列表。所有屬性都按字母順序列出。

屬性	描述
`align-content`	指定 Flex 容器中靈活容器項的對齊方式。
`align-items`	指定 Flex 容器中專案的預設對齊方式。
`align-self`	指定 Flex 容器中所選項的對齊方式。
`animation`	指定基於關鍵幀的動畫。
`animation-delay`	指定動畫何時開始。
`animation-direction`	指定動畫是否應在交替迴圈中反向播放。
`animation-duration`	指定動畫完成一個迴圈所需的秒數或毫秒數。
`animation-fill-mode`	指定 CSS 動畫在執行之前和之後應如何將樣式應用於其目標。
`animation-iteration-count`	指定停止前應播放動畫迴圈的次數。
`animation-name`	指定應應用於所選元素的已定義動畫的名稱。 `@keyframes`
`animation-play-state`	指定動畫是執行還是暫停。
`animation-timing-function`	指定 CSS 動畫在每個週期的持續時間內應如何進展。
`backface-visibility`	指定在面向使用者時變換元素的“後”側是否可見。
`background`	在一個宣告中定義各種背景屬性。
`background-attachment`	指定背景影象是在視區中固定還是滾動。
`background-clip`	指定背景的繪畫區域。
`background-color`	定義元素的背景顏色。
`background-image`	定義元素的背景影象。
`background-origin`	指定背景影象的定位區域。
`background-position`	定義背景影象的原點。
`background-repeat`	指定是否/如何平鋪背景影象。
`background-size`	指定背景影象的大小。
`border`	設定元素邊框的所有四個邊的寬度，樣式和顏色。
`border-bottom`	設定元素底部邊框的寬度，樣式和顏色。
`border-bottom-color`	設定元素底部邊框的顏色。
`border-bottom-left-radius`	定義元素左下角的形狀。
`border-bottom-right-radius`	定義元素右下角的形狀。
`border-bottom-style`	設定元素底部邊框的樣式。
`border-bottom-width`	設定元素底部邊框的寬度。
`border-collapse`	指定表格單元格邊框是連線還是分開。
`border-color`	設定元素所有四邊的邊框顏色。
`border-image`	指定如何使用影象代替邊框樣式。
`border-image-outset`	指定邊框影象區域延伸到邊框之外的量。
`border-image-repeat`	指定是否應重複，舍入或拉伸影象邊框。
`border-image-slice`	指定影象邊框的向內偏移。
`border-image-source`	指定要用作邊框的影象的位置。
`border-image-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-style`	設定元素所有四邊的邊框樣式。
`border-top`	設定元素頂部邊框的寬度，樣式和顏色。
`border-top-color`	設定元素頂部邊框的顏色。
`border-top-left-radius`	定義元素左上角的形狀。
`border-top-right-radius`	定義元素右上角的形狀。
`border-top-style`	設定元素頂部邊框的樣式。
`border-top-width`	設定元素頂部邊框的寬度。
`border-width`	設定元素所有四邊的邊框寬度。
`bottom`	指定定位元素底邊的位置。
`box-shadow`	將一個或多個陰影應用於元素框。
`box-sizing`	更改預設的 CSS 框模型。
`caption-side`	指定表格標題的位置。
`clear`	指定元素相對於浮動元素的位置。
`clip`	定義剪裁區域。
`color`	指定元素文字的顏色。
`column-count`	指定多列元素中的列數。
`column-fill`	指定如何填充列。
`column-gap`	指定多列元素中列之間的間隔。
`column-rule`	指定要在多列元素中的每列之間繪製的直線或“規則”。
`column-rule-color`	指定多列布局中列之間繪製的規則的顏色。
`column-rule-style`	指定在多列布局中的列之間繪製的規則的樣式。
`column-rule-width`	指定在多列布局中的列之間繪製的規則的寬度。
`column-span`	指定元素在多列布局中跨越的列數。
`column-width`	指定多列元素中列的最佳寬度。
`columns`	設定和屬性的簡寫屬性。 `column-width` `column-count`
`content`	插入生成的內容。
`counter-increment`	增加一個或多個計數器值。
`counter-reset`	建立或重置一個或多個計數器。
`cursor`	指定游標的型別。
`direction`	定義文字方向/書寫方向。
`display`	指定元素在螢幕上的顯示方式。
`empty-cells`	顯示或隱藏空表格單元格的邊框和背景。
`flex`	指定靈活長度的元件。
`flex-basis`	指定彈性項的初始主要大小。
`flex-direction`	指定靈活項的方向。
`flex-flow`	和屬性的速記屬性。 `flex-direction` `flex-wrap`
`flex-grow`	指定 Flex 項相對於 Flex 容器內其他項的增長方式。
`flex-shrink`	指定 flex 項相對於 Flex 容器內其他項的收縮方式。
`flex-wrap`	指定靈活項是否應該換行。
`float`	指定框是否應浮動。
`font`	在一個宣告中定義各種字型屬性。
`font-family`	定義元素的字型列表。
`font-size`	定義文字的字型大小。
`font-size-adjust`	發生字型回退時保留文字的可讀性。
`font-stretch`	從字型中選擇正常，濃縮或擴充套件的面。
`font-style`	定義文字的字型樣式。
`font-variant`	指定字型變體。
`font-weight`	指定文字的字型粗細。
`height`	指定元素的高度。
`justify-content`	指定在解析任何彈性長度和自動邊距後，如何沿 Flex 容器的主軸對齊 Flex 專案。
`left`	指定定位元素左邊緣的位置。
`letter-spacing`	設定字母之間的額外間距。
`line-height`	設定文字行之間的高度。
`list-style`	定義列表和列表元素的顯示樣式。
`list-style-image`	指定要用作列表項標記的影象。
`list-style-position`	指定列表項標記的位置。
`list-style-type`	指定列表項的標記樣式。
`margin`	設定元素所有四邊的邊距。
`margin-bottom`	設定元素的下邊距。
`margin-left`	設定元素的左邊距。
`margin-right`	設定元素的右邊距。
`margin-top`	設定元素的上邊距。
`max-height`	指定元素的最大高度。
`max-width`	指定元素的最大寬度。
`min-height`	指定元素的最小高度。
`min-width`	指定元素的最小寬度。
`opacity`	指定元素的透明度。
`order`	指定 Flex 專案在 Flex 容器中的顯示和佈局順序。
`outline`	設定元素輪廓的所有四個邊的寬度，樣式和顏色。
`outline-color`	設定輪廓的顏色。
`outline-offset`	設定輪廓和元素邊框邊緣之間的間距。
`outline-style`	設定輪廓的樣式。
`outline-width`	設定輪廓的寬度。
`overflow`	指定處理溢位元素框的內容。
`overflow-x`	指定處理水平溢位元素框的內容。
`overflow-y`	指定垂直溢位元素框的內容的處理。
`padding`	在元素的所有四個邊上設定填充。
`padding-bottom`	將填充設定為元素的底部。
`padding-left`	將填充設定為元素的左側。
`padding-right`	將填充設定為元素的右側。
`padding-top`	將填充設定為元素的頂部。
`page-break-after`	在元素後插入分頁符。
`page-break-before`	在元素前插入分頁符。
`page-break-inside`	在元素內插入分頁符。
`perspective`	定義從中檢視物件的所有子元素的透檢視。
`perspective-origin`	定義透視屬性的原點（3D 空間的消失點）。
`position`	指定元素的定位方式。
`quotes`	指定嵌入式引用的引號。
`resize`	指定使用者是否可以調整元素的大小。
`right`	指定定位元素右邊緣的位置。
`tab-size`	指定製表符的長度。
`table-layout`	指定表佈局演算法。
`text-align`	設定內聯內容的水平對齊方式。
`text-align-last`	指定如何當一個塊的強制斷行前的最後行或行權一致的。 `text-align` `justify`
`text-decoration`	指定新增到文字的裝飾。
`text-decoration-color`	指定的顏色。 `text-decoration-line`
`text-decoration-line`	指定向元素新增哪種線條裝飾。
`text-decoration-style`	指定屬性指定的行的樣式 `text-decoration-line`
`text-indent`	縮排第一行文字。
`text-justify`	指定在屬性設定為時使用的對齊方法。 `text-align` `justify`
`text-overflow`	指定文字內容溢位塊容器時的顯示方式。
`text-shadow`	將一個或多個陰影應用於元素的文字內容。
`text-transform`	改變文字的大小寫。
`top`	指定定位元素頂邊的位置。
`transform`	對元素應用 2D 或 3D 變換。
`transform-origin`	定義元素的轉換原點。
`transform-style`	指定巢狀元素在 3D 空間中的呈現方式。
`transition`	定義元素的兩個狀態之間的轉換。
`transition-delay`	指定過渡效果何時開始。
`transition-duration`	指定轉換效果完成所需的秒數或毫秒數。
`transition-property`	指定應應用過渡效果的 CSS 屬性的名稱。
`transition-timing-function`	指定過渡效果的速度曲線。
`vertical-align`	設定元素相對於當前文字基線的垂直位置。
`visibility`	指定元素是否可見。
`white-space`	指定如何處理元素內的空白區域。
`width`	指定元素的寬度。
`word-break`	指定如何在單詞中斷行。
`word-spacing`	設定單詞之間的間距。
`word-wrap`	指定當內容溢位其容器邊界時是否中斷單詞。
`z-index`	指定定位元素的分層或堆疊順序。

本節包含屬於最新 CSS3 規範的標準屬性的完整列表。所有屬性都按類別分組。

動畫屬性

屬性	描述
`animation`	指定基於關鍵幀的動畫。
`animation-delay`	指定動畫何時開始。
`animation-direction`	指定動畫是否應在交替迴圈中反向播放。
`animation-duration`	指定動畫完成一個迴圈所需的秒數或毫秒數。
`animation-fill-mode`	指定 CSS 動畫在執行之前和之後應如何將樣式應用於其目標。
`animation-iteration-count`	指定停止前應播放動畫迴圈的次數。
`animation-name`	指定應應用於所選元素的已定義動畫的名稱。 `@keyframes`
`animation-play-state`	指定動畫是執行還是暫停。
`animation-timing-function`	指定 CSS 動畫在每個週期的持續時間內應如何進展。

背景屬性

屬性	描述
`background`	在一個宣告中定義各種背景屬性。
`background-attachment`	指定背景影象是在視區中固定還是滾動。
`background-clip`	指定背景的繪畫區域。
`background-color`	定義元素的背景顏色。
`background-image`	定義元素的背景影象。
`background-origin`	指定背景影象的定位區域。
`background-position`	定義背景影象的原點。
`background-repeat`	指定是否/如何平鋪背景影象。
`background-size`	指定背景影象的大小。

邊界屬性

屬性	描述
`border`	設定元素邊框的所有四個邊的寬度，樣式和顏色。
`border-bottom`	設定元素底部邊框的寬度，樣式和顏色。
`border-bottom-color`	設定元素底部邊框的顏色。
`border-bottom-left-radius`	定義元素左下角的形狀。
`border-bottom-right-radius`	定義元素右下角的形狀。
`border-bottom-style`	設定元素底部邊框的樣式。
`border-bottom-width`	設定元素底部邊框的寬度。
`border-color`	設定元素所有四邊的邊框顏色。
`border-image`	指定如何使用影象代替邊框樣式。
`border-image-outset`	指定邊框影象區域延伸到邊框之外的量。
`border-image-repeat`	指定是否應重複，舍入或拉伸影象邊框。
`border-image-slice`	指定影象邊框的向內偏移。
`border-image-source`	指定要用作邊框的影象的位置。
`border-image-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-style`	設定元素所有四邊的邊框樣式。
`border-top`	設定元素頂部邊框的寬度，樣式和顏色。
`border-top-color`	設定元素頂部邊框的顏色。
`border-top-left-radius`	定義元素左上角的形狀。
`border-top-right-radius`	定義元素右上角的形狀。
`border-top-style`	設定元素頂部邊框的樣式。
`border-top-width`	設定元素頂部邊框的寬度。
`border-width`	設定元素所有四邊的邊框寬度。

顏色屬性

屬性	描述
`color`	指定元素文字的顏色。
`opacity`	指定元素的透明度。

尺寸屬性

屬性	描述
`height`	指定元素的高度。
`max-height`	指定元素的最大高度。
`max-width`	指定元素的最大寬度。
`min-height`	指定元素的最小高度。
`min-width`	指定元素的最小寬度。
`width`	指定元素的寬度。

生成的內容屬性

屬性	描述
`content`	插入生成的內容。
`quotes`	指定嵌入式引用的引號。
`counter-reset`	建立或重置一個或多個計數器。
`counter-increment`	增加一個或多個計數器值。

靈活的盒子佈局

屬性	描述
`align-content`	指定 Flex 容器中靈活容器項的對齊方式。
`align-items`	指定 Flex 容器中專案的預設對齊方式。
`align-self`	指定 Flex 容器中所選項的對齊方式。
`flex`	指定靈活長度的元件。
`flex-basis`	指定彈性項的初始主要大小。
`flex-direction`	指定靈活項的方向。
`flex-flow`	和屬性的速記屬性。 `flex-direction` `flex-wrap`
`flex-grow`	指定 Flex 項相對於 Flex 容器內其他項的增長方式。
`flex-shrink`	指定 flex 項相對於 Flex 容器內其他項的收縮方式。
`flex-wrap`	指定靈活項是否應該換行。
`justify-content`	指定在解析任何彈性長度和自動邊距後，如何沿 Flex 容器的主軸對齊 Flex 專案。
`order`	指定 Flex 專案在 Flex 容器中的顯示和佈局順序。

字型屬性

屬性	描述
`font`	在一個宣告中定義各種字型屬性。
`font-family`	定義元素的字型列表。
`font-size`	定義文字的字型大小。
`font-size-adjust`	發生字型回退時保留文字的可讀性。
`font-stretch`	從字型中選擇正常，濃縮或擴充套件的面。
`font-style`	定義文字的字型樣式。
`font-variant`	指定字型變體。
`font-weight`	指定文字的字型粗細。

列表屬性

屬性	描述
`list-style`	定義列表和列表元素的顯示樣式。
`list-style-image`	指定要用作列表項標記的影象。
`list-style-position`	指定列表項標記的位置。
`list-style-type`	指定列表項的標記樣式。

保證金屬性

屬性	描述
`margin`	設定元素所有四邊的邊距。
`margin-bottom`	設定元素的下邊距。
`margin-left`	設定元素的左邊距。
`margin-right`	設定元素的右邊距。
`margin-top`	設定元素的上邊距。

多列布局屬性

屬性	描述
`column-count`	指定多列元素中的列數。
`column-fill`	指定如何填充列。
`column-gap`	指定多列元素中列之間的間隔。
`column-rule`	指定要在多列元素中的每列之間繪製的直線或“規則”。
`column-rule-color`	指定多列布局中列之間繪製的規則的顏色。
`column-rule-style`	指定在多列布局中的列之間繪製的規則的樣式。
`column-rule-width`	指定在多列布局中的列之間繪製的規則的寬度。
`column-span`	指定元素在多列布局中跨越的列數。
`column-width`	指定多列元素中列的最佳寬度。
`columns`	設定和屬性的簡寫屬性。 `column-width` `column-count`

輪廓屬性

屬性	描述
`outline`	設定元素輪廓的所有四個邊的寬度，樣式和顏色。
`outline-color`	設定輪廓的顏色。
`outline-offset`	設定輪廓和元素邊框邊緣之間的間距。
`outline-style`	設定輪廓的樣式。
`outline-width`	設定輪廓的寬度。

填充屬性

屬性	描述
`padding`	在元素的所有四個邊上設定填充。
`padding-bottom`	將填充設定為元素的底部。
`padding-left`	將填充設定為元素的左側。
`padding-right`	將填充設定為元素的右側。
`padding-top`	將填充設定為元素的頂部。

列印屬性

屬性	描述
`page-break-after`	在元素後插入分頁符。
`page-break-before`	在元素前插入分頁符。
`page-break-inside`	在元素內插入分頁符。

表格屬性

屬性	描述
`border-collapse`	指定表格單元格邊框是連線還是分開。
`border-spacing`	設定相鄰表格單元格邊框之間的間距。
`caption-side`	指定表格標題的位置。
`empty-cells`	顯示或隱藏空表格單元格的邊框和背景。
`table-layout`	指定表佈局演算法。

文字屬性

屬性	描述
`direction`	定義文字方向/書寫方向。
`tab-size`	指定製表符的長度。
`text-align`	設定內聯內容的水平對齊方式。
`text-align-last`	指定如何當一個塊的強制斷行前的最後行或行權一致的。 `text-align` `justify`
`text-decoration`	指定新增到文字的裝飾。
`text-decoration-color`	指定的顏色。 `text-decoration-line`
`text-decoration-line`	指定向元素新增哪種線條裝飾。
`text-decoration-style`	指定屬性指定的行的樣式 `text-decoration-line`
`text-indent`	縮排第一行文字。
`text-justify`	指定在屬性設定為時使用的對齊方法。 `text-align` `justify`
`text-overflow`	指定文字內容溢位塊容器時的顯示方式。
`text-shadow`	將一個或多個陰影應用於元素的文字內容。
`text-transform`	改變文字的大小寫。
`line-height`	設定文字行之間的高度。
`vertical-align`	設定元素相對於當前文字基線的垂直位置。
`letter-spacing`	設定字母之間的額外間距。
`word-spacing`	設定單詞之間的間距。
`white-space`	指定如何處理元素內的空白區域。
`word-break`	指定如何在單詞中斷行。
`word-wrap`	指定當內容溢位其容器邊界時是否中斷單詞。

變換屬性

屬性	描述
`backface-visibility`	指定在面向使用者時變換元素的“後”側是否可見。
`perspective`	定義從中檢視物件的所有子元素的透檢視。
`perspective-origin`	定義透視屬性的原點（3D 空間的消失點）。
`transform`	對元素應用 2D 或 3D 變換。
`transform-origin`	定義元素的轉換原點。
`transform-style`	指定巢狀元素在 3D 空間中的呈現方式。

過渡屬性

屬性	描述
`transition`	定義元素的兩個狀態之間的轉換。
`transition-delay`	指定過渡效果何時開始。
`transition-duration`	指定轉換效果完成所需的秒數或毫秒數。
`transition-property`	指定應應用過渡效果的 CSS 屬性的名稱。
`transition-timing-function`	指定過渡效果的速度曲線。

可視格式化屬性

屬性	描述
`display`	指定元素在螢幕上的顯示方式。
`position`	指定元素的定位方式。
`top`	指定定位元素頂邊的位置。
`right`	指定定位元素右邊緣的位置。
`bottom`	指定定位元素底邊的位置。
`left`	指定定位元素左邊緣的位置。
`float`	指定框是否應浮動。
`clear`	指定元素相對於浮動元素的位置。
`z-index`	指定定位元素的分層或堆疊順序。
`overflow`	指定處理溢位元素框的內容。
`overflow-x`	指定在內容溢位元素內容區域寬度時如何管理內容。
`overflow-y`	指定在內容溢位元素內容區域的高度時如何管理內容。
`resize`	指定使用者是否可以調整元素的大小。
`clip`	定義剪裁區域。
`visibility`	指定元素是否可見。
`cursor`	指定游標的型別。
`box-shadow`	將一個或多個陰影應用於元素框。
`box-sizing`	更改預設的 CSS 框模型。