文章內容持續更新中~
文章目錄
一、CSS3實現圓角 - border-radius
給一個值的時候默認是四個角都進行圓角處理。
如果給四個值的話則按照筆者標註的順序進行圓角處理。
設置倆個值的時候第一個值對應的是1和3，第二個值對應的是2和4。設置三個值的時候第一個值對應的是1，第二個值對應的是2和4，第三個值對應的是3。
這個值也可以給百分比和其他的單位，並不侷限爲px。比如說我們想畫個圓，那簡直太簡單了。
二、盒子陰影 - box-shadow
給大家分享我自己對盒子陰影的理解，就是我們所有的塊級元素、行內塊元素【可以設置寬高的】，在他們本身的下面其實是有一個我們看不見的另外一個盒子【我喜歡把它當做影子】。然後box-shadow這個屬性就是用來操控影子的樣式的！
盒子陰影的參數如下：
| 參數 | 描述 | 吳迪自己的理解 |
|---|---|---|
| h-shadow | 必需的，水平陰影的位置，可以負值 | 控制影子的x軸位置 |
| v-shadow | 必需的，垂直陰影的位置，可以負值 | 控制影子的y軸位置 |
| blur | 可選，模糊距離 | 控制影子的模糊度 |
| spread | 可選，陰影大小 | 控制影子邊框的大小 |
| color | 可選，陰影顏色 | 控制影子的顏色 |
| inset | 可選，從外層的陰影（開始時）改變陰影內側陰影 | 控制影子在裏面還是在外面 |
使用時的語法：
box-shadow: h-shadow v-shadow blur spread color inset;
簡單示例：
說明：如果h-shadow與v-shadow是正值，那就是向右和向下平移，如果是負值那就是向左和向上平移。
如果加入inset值的話h-shadow與v-shadow就略微改變了一下，【吳小迪個人理解：加入了inset值之後就將陰影盒子的z-index值提升到了無限大，所以會優先於我們本身的盒子顯示，但是又被我們本身的盒子所侷限，超出的部分不顯示。】我們可以舉倆個例子：
其他的值自己測試即可，我個人認爲按照我的個人理解看起來就已經很直白了。你只需要按照你的需求去改變影子的樣式即可。
三、文本陰影 - text-shadow
文本陰影比盒子陰影學起來簡單一些，但是沒有盒子陰影強大，因爲他的可控制影子的屬性變少了。
文本陰影的參數如下：
| 參數 | 描述 | 吳迪自己的理解 |
|---|---|---|
| h-shadow | 必需的，水平陰影的位置，可以負值 | 控制影子的x軸位置 |
| v-shadow | 必需的，垂直陰影的位置，可以負值 | 控制影子的y軸位置 |
| blur | 可選，模糊距離 | 控制影子的模糊度 |
| color | 可選，陰影顏色 | 控制影子的顏色 |
與筆者在上面理解的盒子陰影是一樣的，請自行測試效果。需要額外注意的是IE 9及更早版本的瀏覽器不支持 text-shadow 屬性。
四、漸變 - gradient
linear-gradient() 線性漸變
線性漸變函數的參數如下：
| 參數 | 描述 | 可能值 |
|---|---|---|
| direction | 用角度值指定漸變的方向（或角度）【默認是自上向下】 | to left、to right、to top 、to bottom、to 左右和上下的組合【誰放在前面都可以】、角度【deg】 |
| color-stop1, color-stop2,… | 用於指定漸變的起止顏色 | 顏色 |
語法：
background-image: linear-gradient(direction, color-stop1, color-stop2,...);
簡單示例：
默認方向：
設置方向：
設置角度：
從上面這個小例子我們瞭解到了，當我們設置角度的時候起點始終都是自上向下。當給出正值的時候就是順時針旋轉，當給出負值的時候就是逆時針旋轉。
radial-gradient() 徑向漸變
徑向漸變函數的參數如下：
| 參數 | 描述 | 可能值 |
|---|---|---|
| shape | 確定圓的形狀 | ellipse【默認】：指定橢圓形的徑向漸變；circle：指定圓形的徑向漸變； |
| size | 定義漸變的大小 | 1. farthest-corner【默認】：指定徑向半徑長度爲從圓心到離圓心最遠的角; |
| position | 定義漸變的位置 | 1.center【默認】：設置中間爲徑向漸變圓心的縱座標值。 |
| start-color, …, last-color | 用於指定漸變的起止顏色 | 顏色 |
具體使用請自行實驗，可以到菜鳥教程跟着教程玩一遍：https://www.runoob.com/cssref/func-radial-gradient.html
五、變化樣式 - transform
rotate - 旋轉
scale - 縮放
translate - 定位
skew - 傾斜
六、增加了更多css選擇器
七、多背景、rgba
八、新增加的僞元素 ::selection
九、媒體查詢與多欄佈局
十、border-image
十一、新增的僞類選擇器
first-of-type
示例：
p: first-of-type {} /* 一組同級元素中的第一個p元素 */
last-of-type
示例：
p: last-of-type {} /* 一組同級元素中的最後一個p元素 */
only-of-type
示例：
p: only-of-type {} /* 一組同級元素中的唯一一個p元素 */
only-child
示例：
p: only-child {} /* 選擇屬於其父元素的唯一一個子元素的每個p元素 */
nth-child(num)
示例：
p:nth-child(2) /* 選擇屬於其父元素的第二個子元素的每個p元素 */
enabled、disabled
示例：
/* 控制表單控件的禁用狀態 */
input[type="text"]:disabled {} /* 禁用狀態的 */
input[type="text"]:enabled {} /* 激活狀態的 */
checked
示例：
input:checked {} /* 單選框或複選框被選中 */
十二、Animation
十三、Transitions
十四、Word-wrap
十五、Text-overflow
十六、CSS3 的背景效果
關於查看使用的CSS3屬性的兼容情況：
前端的html，css，js都可以通過caniuse進行查看兼容情況。
查看前端代碼在各瀏覽器的支持情況的方法