css3新特性總結

阿新 • • 發佈：2020-07-15

選擇器　

:last-child /* 選擇元素最後一個孩子 */
:first-child /* 選擇元素第一個孩子 */
:nth-child(1) /* 按照第幾個孩子給它設定樣式 */
:nth-child(even) /* 按照偶數 */
:nth-child(odd)  /* 按照奇數 */
:disabled /* 選擇每個禁用的E元素 */
:checked /* 選擇每個被選中的E元素 */
:not(selector) /* 選擇非 selector 元素的每個元素 */
::selection /* 選擇被使用者選取的元素部分 */

偽類：用於向某些選擇器新增特殊的效果（沒有建立新元素）

:last-child /* 
 選擇元素最後一個孩子 */
:first-child /* 選擇元素第一個孩子 */
:nth-child(1) /* 按照第幾個孩子給它設定樣式 */
a:link {color: #FF0000} /* 未訪問的連結 */
a:visited {color: #00FF00} /* 已訪問的連結 */
a:hover {color: #FF00FF} /* 滑鼠移動到連結上 */
a:active {color: #0000FF} /* 選定的連結 */

偽元素：建立了 html 中不存在的元素，用於將特殊的效果新增到某些選擇器

::before {} /* 選擇器在被選元素的前面插入內容和定義css，使用 content 屬性來指定要插入的內容。  
*/
::after {} /* 選擇器在被選元素的後面插入內容和定義css，使用 content 屬性來指定要插入的內容。 */
:first-letter /* 選擇該元素內容的首字母 */
:first-line /* 選擇該元素內容的首行 */
::selection /* 選擇被使用者選取的元素部分 */

css3邊框

　　border-radius（圓角）、 box-shadow（陰影）、 border-image（邊框圖片）

css3背景

　　background-size：規定背景圖片的尺寸（cover：填充；100% 100%：拉伸）
　　background-origin：規定背景圖片的定位區域

文字效果

　　text-shadow 向文字新增陰影

　　text-justify 規定當 text-align 設定為 “justify” 時所使用的對齊方法

　　text-emphasis 向元素的文字應用重點標記以及重點標記的前景色

　　text-outline 規定文字的輪廓

　　text-overflow 規定當文字溢位包含元素時發生的事情

　　text-wrap 規定文字的換行規則

　　word-break 規定非中日韓文字的換行規則

　　word-wrap 允許對長的不可分割的單詞進行分割並換行到下一行

　　text-decoration 文字修飾符：overline、line-through、underline 分別是上劃線、中劃線、下劃線

字型

　　您“自己的”的字型是在 CSS3 @font-face 規則中定義的。

2D/3D

轉換

過渡（transition）

　　使頁面變化更平滑，以下引數可直接寫在 transition 後面

transition-property ：執行動畫對應的屬性，例如 color，background 等，可以使用 all 來指定所有的屬性。
transition-duration：過渡動畫的一個持續時間。
transition-timing-function：在延續時間段，動畫變化的速率，常見的有：ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier
transition-delay：延遲多久後開始動畫

動畫（animation）
　　先定義 @keyframes 規則（0%，100% | from，to）然後定義 animation，以下引數可直接寫在 animation 後面

animation-name: 定義動畫名稱
animation-duration: 指定元素播放動畫所持續的時間長
animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(,,,)：指元素根據時間的推進來改變屬性值的變換速率，即動畫的播放方式
animation-delay: 指定元素動畫開始時間
animation-iteration-count: infinite | number：指定元素播放動畫的迴圈次數
animation-direction: normal | alternate：指定元素動畫播放的方向，其只有兩個值，預設值為normal，如果設定為 normal 時，動畫的每次迴圈都是向前播放；另一個值是 alternate，規定動畫在下一週期逆向地播放（來去播放）
animation-play-state: running | paused ：控制元素動畫的播放狀態

多列布局

　　通過CSS3，能夠建立多個列來對文字進行佈局