1.文本陰影text-shadow
text-shadow:偏移量x 偏移量y 模糊度 顏色；
注意：
水平偏移量： 正值向右，負值向左
垂直偏移量： 正值向下，負值向上
模糊度不能爲負數
可設置多個text-shadow，每個用逗號分隔
例子:text-shadow:1px 2px 3px red,2px 3px 4px pink;
2.邊框圓角 border-radius
border-radius:10px 10px 10px 10px/5px 5px 5px 5px;
前面四個是橫軸半徑，後面四個值是縱軸半徑，如果後面四個值不寫，縱軸半徑默認等於橫軸半徑
3.盒子陰影 box-shadow
水平偏移量 +向右 -向左
垂直偏移量 +向下 -向上
模糊度不能爲負數
inset可設置內陰影，box-shadow：inset 1px 1px 1px red;
設置box-shadow不會改變盒子大小，不會影響兄弟元素佈局
可設置多重邊框陰影，增強立體感
4.邊框圖片boeder-image
路徑：border-image-source:url();
圖片拆分：border-image-slice:30 30 30 30;//上 右 下 左
border-image-slice:30 fill;
以上，會將中間裁掉的部分在盒子內平鋪
圖片拉伸：
border-image-repeat:stretch //默認的拉伸效果
repeat //平鋪，不完整顯示
round //完整的平鋪
邊框圖片寬度：
border-image-width:並不能改變盒子大小，只能改變邊框圖片大小
最終的連寫：
border-image:url() slice/width repeat;
5.背景大小 background-size
作用：設置背景圖片大小
設置方式：background-size:200px 200px; //具體尺寸
100% 100%; //比例
100% auto; //自適應
auto 100%; //自適應
cover; //鋪滿父容器
contain //在父容器中完整顯示
6.設置背景原點background-origin
作用：設置背景圖片原點位置，這個原點，指的是圖片左上角
也就是重新定義了background-position的顯示位置
應用background-origin:content-box； //以內容左上角爲原點
padding-box; //默認選項，以內邊距爲原點
border-box; //以外邊距爲原點
7.background-clip背景區域裁切（也就是讓圖片在什麼區域內顯示）
作用：裁切背景，移動端應用的多
應用：background-clip:padding-box; //padding以外的部分會被裁掉
border-box; //border以外的部分會被裁掉
content-box; //content以外的部分會被裁掉
8.多背景background: url() ,url(),url();
注意：不同的背景，用逗號分隔
設置多背景的時候，不能再設置背景顏色（不能連寫），如有需要，聚單獨寫background來設置顏色
9.漸變
線性漸變：background-image:linear-gradient(漸變方向開始和結束狀態，漸變範圍（距離）)
漸變方向：可以是具體方向：to top
to bottom
to left
to right
也可以是角度：90deg
例子：
background-image:linear-gradient(
to right, //從左向右
red 20%, //開始顏色是紅色，從盒子寬度20%的位置開始變
green //結尾顏色是綠色
);
注意：如果沒有設置background-size，百分比是以盒子寬度爲參照設置的，否則是以background-size爲參照設置的；
10.徑向漸變background-image:radial-gradient(圓點，開始、結束)
注意：徑向漸變的百分比是以設置的半徑爲參照的
圓心位置設置：關鍵詞：center/left.......
具體值：第一個值代表水平方向，第二個垂直，第二個如果不設置，默認Center
例子：
background-image:radial-gradient(
100px 50px at center, //第一個是水平半徑，第二個是垂直半徑，第三個是圓心，意思是在盒子中心
red 20%, //在圓的半徑20%的位置開始變
green
);
11.過渡trasition
11.1補間動畫
過渡屬性：transition-property:all //默認全部
width
htight
.....多個屬性用逗號分隔
過渡執行總時間：transition-duration: ;
動畫執行速度（類型）transition-timing-function:linear //勻速
ease
ease-in
ease-out
ease-in -out
動畫延時時間：transition-delay: ;
注意：transition一般放在開始狀態裏。
11.2幀動畫
12.2D轉換
transiform:translate(x,y) //第一個值是水平，第二個垂直
旋轉：transform:rotate(deg); //正值是順時針，負值是逆時針
縮放：trasorm:scale(倍數）； //整數（>1）放大，小數（<1）縮小
傾斜:transform:skew(deg,deg); //水平，垂直
旋轉原點：transform-origin：center; //默認
left;
right;
bottom;
top;
13.3D轉換
左手法則：左手握住旋轉軸，拇指指向旋轉軸方向，四指指向的方向就是正方形。
13.1 3D轉換分類
transform: translateX() translateY() translatrZ(); //位移
例子：
transform:translateX(100px) translateY(100px) translateZ(100px);
transform:rotateX() rotateY() rotateZ(); //旋轉
transform:scaleX() scaleY() scaleZ(); //縮放
14.透視 perspective
作用：輔助瞭解3D效果，不是必須的步驟
取值：600-1200px是人眼最舒服的狀態
設置方式：將該屬性作爲父元素的單獨屬性設置
將perspective作爲transform的屬性設置
transform:perspective(100px) translateX(100px);
15.動畫
語法：
@keyframes scale{
from{}
to{}
}
通過animation:;調用動畫，哪個元素調用，就寫在哪裏。
調用動畫名稱：animation-name:;
設置動畫完成時間：animation-duration:;
設置動畫執行次數：animation-interation-count:infinite; //一直執行
具體時間，如2s
默認執行1次
設置延時執行時間：animation-delay:;
動畫執行類型（速度）：animation-timing-function:linear;
ease;
ease-in;
ease-out;
ease-in-out;
動畫逆波（是否有反向運動）：animation-direction:normal;
reverse; //反向
alternate; //正常執行
alternate-reverse;
設置動畫時間之外的狀態：animation-play-state:running； //默認
paused; //暫停
轉爲3D盒子：transform-style:preserve-3d;
steps(); //步長