圓角樣式和漸變色樣式
圓角樣式
border-radius:50px;(改變的是四個角的樣式)
border-radius:50px 20px(第一個值時左上角和右下角的樣式同理第二個值是右上角和左下角的樣式)
border-radius:50px 20px 30px(第一個值是左上角，第二個值是右上角和左下角，第三個值是右下角)
四個值的時候就是從左上角開始順時針旋轉設置樣式；也可以使用%設置圓得半徑，其半徑大小爲寬*百分比；
只改變一個角：border-bottom-right-radius:100px;(右下角)
橢圓的樣式變化：
四個角一組值：border-radius:100px/20px;(長半軸爲100px,短半軸爲20px,中間的/是必要的)
四個角四個值：border-radius:100px 80px 59px 70px/20px;(/前面的四個值是四個角橢圓的長半軸後面是短半軸)
**正方形盒設置弧形樣式的本質：**其實是將盒子區域分爲四等分，每一個圓形、佔據每個區域；設置其半徑的大小，半徑最大爲寬的一半即使設置的半徑比寬的一半大也默認爲一半。（特例，若四個值中只設置了一個且該值的大小爲和寬的值相等，即使該值的比寬還要大，其效果是以寬的爲半徑的四分之一圓）。
**長方形設置弧形的樣式：**依舊是將盒子分爲四等分，每個圓形佔領一個區域，但此時圓的半徑最大是寬或高中最短那一邊的長度；（特列只設置左上和左下或者是設置右上和右下可實現半圓半徑大小最大爲寬和高的最小值）；
在長方形中設置橢圓樣式，可以將長方形割成橢圓；
漸變色樣式
線性漸變式：
background-image:linear-gradient(red 0%,blue 20%,yellow 100%);從開始的0%100%最後的位置；
解釋：這裏面第一個顏色百分號前面的數字表示的是顏色條在整個區域中所佔的比例。
最後一個顏色前面的數字是指該顏色條的初始位置在區域中的位置，以及該位置以後的區域都爲該顏色。
中間的顏色前面的數字所表示的是該顏色條在區域當中的位置；
顏色漸變的方向:
顏色的漸變默認是從上到下的
設置從左到右：linear-gradient(to right ,red 0%,blue 20%, yellow 100%);
設置從左上到右下：linear-gradient(to bottom right,red 0%,blue20%,yellow 100%);
角度值方向：linear-gradient( 0deg,red 0%,blue 20%,yellow 100%);
徑向漸變式：
徑向漸變類似畫同心圓，一層層的往外面畫圈圈；background-image:radial-gradient(red 0%,blue 29%,yellow 100%);
漸變色用於背景時，是以背景圖片的形式展示的；所以可以使用背景圖片的所有樣式特性，如大小，位置，基點，剪切等；
使用背景圖片演示的複合寫法：background：linear-gradient(-45deg,red 50%,blue 50%) top left/100px 100px no-repeat,radial-gradient(red,pink)right bottom/100px 100px no-repeat,white;
nt(red,pink)right bottom/100px 100px no-repeat,white;
background:漸變方式，背景圖片開始的基點/漸變色的大小，repeat,下一個漸變樣式……，背景顏色的設置；