今天繼續總結css3的一些css3新樣式，先列一個簡單的提綱，重要的還是圓角、陰影、漸變、文字縮略，最最重要的是過度transition，變換transform和animation
圓角
陰影
漸變 圓形漸變 線性漸變 跳變 重復漸變
蒙版
倒影
濾鏡
多背景
文字方向
文字縮略
過渡transition
變換transform
動畫animation:
keyframes
一個一個來：
1》圓角：
border-radius:px %;
border-radius: 一個值; 四個角
border-radius: 左上右下 右上左下;
border-radius: 左上 右上左下 右下;
border-radius: 左上 右上 右下 左下;
2》陰影：
box-shadow:x y blur color;
box-shadow:[inset] x y blur [范圍] color;
ext-shadow:x y blur color;
陰影可以疊加
box-shadow:x y b c,x y b c,x y b c......;
文字陰影
text-shadow:x y blur color;
3》漸變：
線性漸變：-webkit-linear-gradient(漸變角度/漸變開始的位置，red 顏色開始漸變的位置，green 顏色開始漸變的位置);
徑向漸變：-webkit-radial-gradient(圓心位置，形狀顏色,red 漸變的開始位置,blue 漸變的開始位置);
重復漸變-webkit-repeating-linear/gradial-gradient(漸變角度/漸變開始的位置，寫一個循環的漸變);
跳變（四個顏色的跳變）：
background:-webkit-linear-gradient(red 25%,green 25%,green 50%,yellow 50%,yellow 75%,deepskyblue 75%);
4》蒙版：
-webkit-mask:url('圖片路徑');
-webkit-mask:linear-garadient();
-webkit-mask-position:x y;
background-size:contain;-->高度頂滿，寬度自適應 cover---》寬度撐滿，高度自適應
5》倒影：
-webkit-box-reflect:below 20px -webkit-linear-gradient(rgba(0,0,0,0,),rgba(0,0,0,1));
方向 和倒影之間的距離
倒影方向above（向上） below（向下） left（向左） right（向右）
6》濾鏡（只列舉了兩個，高斯模糊還算重要）：
高斯模糊
-webkit-filter:blur(20px); 括號內是模糊程度
褐色處理
-webkit-filter:sepia();
7》多背景
backgoround:背景1，背景2，背景3..;（不兼容）
8》文字方向
direction:ltr;
unicode-bidi:bidi-override; ——》兩個必須配合使用
方向 ltr ：left to right rtl：right to left（默認字體在屏幕右面）
9》文字縮略
text-overfow:ellipsis; ---->參數還可以是clip
wite-space:nowarp;
overflow:hidden;
一、過渡transition
transition:4s all ease/linear;
時間 過渡的屬性 運動方式
二：變換transform
主要常用的有四個屬性 rotate translate scale skew
1》角度rotate(x,y) 正號表示順時針
rotateX 會變矮
rotateY 會變窄
rotateZ 沒變化 ———》使用z軸時給父級添加transform-style:preserve-3d;
rotateX和rotateY使用時候變矮變窄是因為沒有視覺的景深，所以需要添加景深
景深：transform:perspective(800-2000px);
2》位移translate(x,y) -->移動的是距離並不是坐標
translateX translateY
北面不可見：backface-visibility:hidden;
3》縮放scale(x,y)
x，y表示x軸，y軸方向，只寫一個的話默認x，y都縮放
如果值是-1的話表示在此軸方向反向
4》扭曲skew(x,y)