一、是什么
css，即層疊樣式表（Cascading Style Sheets）的簡稱，是一種標記語言，由瀏覽器解釋執行用來使頁面變得更為美觀
css3是css的最新標准，是向后兼容的，CSS1/2的特性在CSS3 里都是可以使用的
CSS3 也增加了很多新特性，為開發者帶來了更佳的開發體驗
從幾個維度列舉一些常見的特性，如下
二、選擇器
css3中新增了一些選擇器，主要為如下圖所示：
三、新樣式
邊框
css3新增了三個邊框屬性，分別是：
-
border-radius：創建圓角邊框
-
box-shadow：為元素添加陰影
-
border-image：使用圖片來繪制邊框
box-shadow
設置元素陰影，設置屬性如下：
- 水平陰影
- 垂直陰影
- 模糊距離(虛實)
- 陰影尺寸(影子大小)
- 陰影顏色
- 內/外陰影
其中水平陰影和垂直陰影是必須設置的
背景
新增了幾個關於背景的屬性，分別是background-clip、background-origin、background-size和background-break
background-clip
用於確定背景畫區，有以下幾種可能的屬性：
- background-clip: border-box; 背景從border開始顯示
- background-clip: padding-box; 背景從padding開始顯示
- background-clip: content-box; 背景顯content區域開始顯示
- background-clip: no-clip; 默認屬性，等同於border-box
通常情況，背景都是覆蓋整個元素的，利用這個屬性可以設定背景顏色或圖片的覆蓋范圍
background-origin
當我們設置背景圖片時，圖片是會以左上角對齊，但是是以border的左上角對齊還是以padding的左上角或者content的左上角對齊? border-origin正是用來設置這個的
- background-origin: border-box; 從border開始計算background-position
- background-origin: padding-box; 從padding開始計算background-position
- background-origin: content-box; 從content開始計算background-position
默認情況是padding-box，即以padding的左上角為原點
background-size
background-size屬性常用來調整背景圖片的大小，主要用於設定圖片本身。有以下可能的屬性：
- background-size: contain; 縮小圖片以適合元素（維持像素長寬比）
- background-size: cover; 擴展元素以填補元素（維持像素長寬比）
- background-size: 100px 100px; 縮小圖片至指定的大小
- background-size: 50% 100%; 縮小圖片至指定的大小，百分比是相對包 含元素的尺寸
background-break
元素可以被分成幾個獨立的盒子（如使內聯元素span跨越多行），background-break 屬性用來控制背景怎樣在這些不同的盒子中顯示
- background-break: continuous; 默認值。忽略盒之間的距離（也就是像元素沒有分成多個盒子，依然是一個整體一樣）
- background-break: bounding-box; 把盒之間的距離計算在內；
- background-break: each-box; 為每個盒子單獨重繪背景
文字
word-wrap
語法：word-wrap: normal|break-word
- normal：使用瀏覽器默認的換行
- break-all：允許在單詞內換行
text-overflow
text-overflow設置或檢索當當前行超過指定容器的邊界時如何顯示，屬性有兩個值選擇：
- clip：修剪文本
- ellipsis：顯示省略符號來代表被修剪的文本
text-shadow
text-shadow可向文本應用陰影。能夠規定水平陰影、垂直陰影、模糊距離，以及陰影的顏色
text-decoration
CSS3里面開始支持對文字的更深層次的渲染，具體有三個屬性可供設置：
-
text-fill-color: 設置文字內部填充顏色
-
text-stroke-color: 設置文字邊界填充顏色
-
text-stroke-width: 設置文字邊界寬度
顏色
css3新增了新的顏色表示方式rgba與hsla
- rgba分為兩部分，rgb為顏色值，a為透明度
- hala分為四部分，h為色相，s為飽和度，l為亮度，a為透明度
四、transition 過渡
transition屬性可以被指定為一個或多個CSS屬性的過渡效果，多個屬性之間用逗號進行分隔，必須規定兩項內容：
- 過度效果
- 持續時間
語法如下：
transition： CSS屬性，花費時間，效果曲線(默認ease)，延遲時間(默認0)
上面為簡寫模式，也可以分開寫各個屬性
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
五、transform 轉換
transform屬性允許你旋轉，縮放，傾斜或平移給定元素
transform-origin：轉換元素的位置（圍繞那個點進行轉換），默認值為(x,y,z):(50%,50%,0)
使用方式：
- transform: translate(120px, 50%)：位移
- transform: scale(2, 0.5)：縮放
- transform: rotate(0.5turn)：旋轉
- transform: skew(30deg, 20deg)：傾斜
六、animation 動畫
動畫這個平常用的也很多，主要是做一個預設的動畫。和一些頁面交互的動畫效果，結果和過渡應該一樣，讓頁面不會那么生硬
animation也有很多的屬性
- animation-name：動畫名稱
- animation-duration：動畫持續時間
- animation-timing-function：動畫時間函數
- animation-delay：動畫延遲時間
- animation-iteration-count：動畫執行次數，可以設置為一個整數，也可以設置為infinite，意思是無限循環
- animation-direction：動畫執行方向
- animation-paly-state：動畫播放狀態
- animation-fill-mode：動畫填充模式
七、漸變
顏色漸變是指在兩個顏色之間平穩的過渡，css3漸變包括
- linear-gradient：線性漸變
❝background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
❞
- radial-gradient：徑向漸變
❝linear-gradient(0deg, red, green);
❞
八、其他
關於css3其他的新特性還包括flex彈性布局、Grid柵格布局，這兩個布局在以前就已經講過，這里就不再展示
除此之外，還包括多列布局、媒體查詢、混合模式等等......
參考文獻
-
https://juejin.cn/post/6844903518520901639#heading-1
-
https://www.w3school.com.cn/css/index.asp