【CSS基礎筆記】偽元素 偽類 過渡 動畫 陰影 漸變 繼承
偽元素：
- 偽元素在DOM樹中建立了一些是不存在於文件語言裡的抽象元素。 （例如常用的::before,::after::before，::after只有在設定屬性：content:""之後才能顯示）【偽元素本質上是建立了一個有內容的虛擬容器；】
- 偽元素的由兩個冒號::開頭，然後是偽元素的名稱
- 一個選擇器只能使用一個偽元素，並且偽元素必須處於選擇器語句的最後。（注：不排除未來會加入同時使用多個偽元素的機制。）
偽類：
- 偽類存在的意義是為了通過選擇器找到那些不存在與DOM樹中的資訊和不能被常規CSS選擇器獲取到的資訊。【偽類本質上是為了彌補常規CSS選擇器的不足，以便獲取到更多資訊，例如 :nth-child:(even){} 對偶數的子元素設定屬性。 】
- 偽類由一個冒號:開頭，冒號後面是偽類的名稱和包含在圓括號中的可選引數。
- 任何常規選擇器可以在任何位置使用多個偽類。偽類語法不區別大小寫。一些偽類的作用會互斥，另外一些偽類可以同時被同一個元素使用。並且，為了滿足使用者在操作DOM時產生的DOM結構改變，偽類也可以是動態的。【和偽元素的語法不同】
Transition（過渡的簡寫屬性）：可以為一個元素在不同狀態之間切換的時候定義不同的過渡效果。比如在不同的偽元素之間切換，像是 :hover ，
| 預設值 |
all 0 ease 0 |
| transition-property |
規定設定過渡效果的 CSS 屬性的名稱。 |
| transition-duration |
規定完成過渡效果需要多少秒或毫秒。 |
| transition-timing-function |
規定速度效果的速度曲線。 |
| transition-delay |
定義過渡效果何時開始。 |
Animation（動畫的簡寫屬性）：
Transition（過渡）和animation（動畫）的區別：
- Transition通常是和:hover ，:active配合使用，由動作觸發。Animation則是自動執行。
- Transition只能設定從初始狀態漸變到最終狀態，無法像Animation一樣改變中途的每一幀的樣式。
- Transition搭配Javascript可以實現非常多的動畫效果。目前Animation與JS的互動功能還不完善。
- Animation可以設定迴圈次數。
box-shadow（陰影）:
【陰影效果線上編寫工具：https://www.cssmatic.com/box-shadow】
| 常量 |
描述 |
| h-shadow |
必需。水平陰影的位置。允許負值。 |
| v-shadow |
必需。垂直陰影的位置。允許負值。 |
| blur |
可選。模糊距離。 |
| spread |
可選。陰影的尺寸。 |
| color |
可選。陰影的顏色。請參閱 CSS 顏色值。 |
| inset |
可選。將外部陰影 (outset) 改為內部陰影。 |
radial-gradient：用來定義徑向漸變，以對圖形元素進行填充或描邊。
【漸變填充線上編寫工具：http://www.colorzilla.com/gradient-editor/】
| 常量 |
描述 |
| closest-side |
漸變的邊緣形狀與容器距離漸變中心點最近的一邊相切（圓形）或者至少與距離漸變中心點最近的垂直和水平邊相切（橢圓）。 |
| closest-corner |
漸變的邊緣形狀與容器距離漸變中心點最近的一個角相交。 |
| farthest-side |
與closest-side相反，邊緣形狀與容器距離漸變中心點最遠的一邊相切（或最遠的垂直和水平邊）。 |
| farthest-corner |
漸變的邊緣形狀與容器距離漸變中心點最遠的一個角相交。 |
繼承
常見可繼承屬性：
- 字型屬性
- 文字屬性：text-indent，text-align，line-height，word-spacing，letter-spacing，text-transform，Direction，Color
- 聲音屬性：speak，speak-punctuation，speak-numeral，speak-header，speech-rate，volume，voice-family，pitch，pitch-range，stress，richness，azimuth，elevation
常見不可繼承屬性：
- 文字屬性：vertical-align，text-decoration，text-shadow，white-space，unicode-bidi
- 盒模型屬性：width，height，margin ，margin-top，margin-right，margin-bottom，margin-left，border，border-style，border-top-style，border-right-style，border-bottom-style，border-left-style，border-width，border-top-width，border-right-right，border-bottom-width，border-left-width，border-color，border-top-color，border-right-color，border-bottom-color，border-left-color，border-top，border-right，border-bottom，border-left，padding，padding-top，padding-right，padding-bottom，padding-left
- 背景屬性：background，background-color，background-image，background-repeat，background-position，background-attachment
- 佈局定位屬性：float，clear，position，top，right，bottom，left，min-width，min-height，max-width，max-height，overflow，clip，z-index
- 頁面樣式屬性：size，page-break-before，page-break-after
- 聲音屬性：pause-before，pause-after，pause，cue-before，cue-after，cue，play-during
- 生成內容屬性：content，counter-reset，counter-increment