border-radius 設(shè)置圓角
border-top-left-radius 設(shè)置左上角
border-top-right-radius 設(shè)置右上角
border-bottom-right-radius 設(shè)置左下角
border-bottom-right-radius 設(shè)置右下角
border-top-left-radius ： x y x代表左上角x軸偏移量 y代表y軸偏移量
可以設(shè)置百分比以及像素
border-radius:;
一個值表示 左上 右上 左下 右下 都是
兩個值表示 第一個值左上右下 第二個值 右上左下
三個值表示 第一個 左上 第二個值右上左下 第三值 右下
四個之 分別 左上 右上 右下 左下
border-radius 0 0 0 0/ 0 0 0 0；
前四個是四個x方向的x軸偏移 后四個是y軸方向的偏移
content-box = 標準盒模型
border-box = 怪異盒模型 padding border 不會影響盒子尺寸 影響內(nèi)容
transition 過度
transition：all 0 linear 0； 支持類型（width） 執(zhí)行時間 運動類型 延遲執(zhí)行時間
transition-property 規(guī)定設(shè)置過渡效果的 CSS 屬性的名稱。
過度屬性 默認值 all
transition-duration
過度的步長 默認0s 過度完成需要的時間 單位是s 秒
transition-timing-function
linear：勻速
ease ： 慢 快 慢
ease-in ：先慢后快
ease-out：先快后慢
cubic-bezier(n,n,n,n)：在 cubic-bezier 函數(shù)中定義自己的值。可能的值是 0 至 1 之
間的數(shù)值
默認值 ease 過度的動畫類型
transition-delay
默認值 0s 延遲執(zhí)行過度的時間 單位是 s秒
transform（多個屬性可以連寫 多個屬性用空格）
先設(shè)置位移和先設(shè)置旋轉(zhuǎn)是兩種不同的效果，設(shè)置uanzhuan會使X軸也發(fā)生改變從而使得位移延旋轉(zhuǎn)
后的X軸或者Y軸方向。
transform：translate(,) rotate() skew() scale() ；
translate
在X軸方向進行變換
translateX: 在X軸上的位移或者變形;
translateY：在Y軸上的位移或者變形;
translate（X，Y）
在X軸和Y軸上的位移或者形變，只有一個值X生效
scale
以元素的中心點為基準縮放
可以設(shè)置負數(shù)
使用場景：
用于處理十二像素以下 的文本
支持一個數(shù)值
scale（X，Y） 縮放
scaleX（）X方向的縮放比例
scaleY（） Y方向的縮放比例
rotate
rotate 旋轉(zhuǎn) 設(shè)置元素在2D平面旋轉(zhuǎn)
正數(shù)順時針 負數(shù)逆時針
rotateX ：X軸為旋轉(zhuǎn)軸
rotateY ：Y軸為旋轉(zhuǎn)軸
skew
skewX ：繞X軸發(fā)生傾斜
skewY ：繞Y軸發(fā)生傾斜
常用于平行四邊形圖案
transform-origin: x y;
設(shè)置中心點
默認值 50% 50% /center center
可以是像素 可以使百分比 可以是表示方向的英文單詞
可以是負值
animation
初始值
動畫名稱
animation-name: none；
動畫執(zhí)行時間
animation-duration:0s;
動畫過程類型
animation-timing-function: ease；
延遲執(zhí)行動畫的時間
animation-delay:0s;
動畫執(zhí)行順序
animation-direction: normal；
動畫停止
animation-fill-mode: none;
動畫播放停止
animation-play-state: running;
動畫執(zhí)行次數(shù)
animation-iteration-count: 1; infinite 不停止
animation-timing-function 動畫過度的類型
linear：勻速
ease ： 慢 快 慢
ease-in ：先慢后快
ease-out：先快后慢
animation-timing-function: steps(11 , start); 定義幀動畫，第一個數(shù)值代表執(zhí)行多少幀
第二個值 有start 和 end 兩個屬性值 start 沒有最后一幀 end 沒有第一幀
animation-direction 動畫執(zhí)行順序
認值 normal：每個動畫循環(huán)結(jié)束，動畫重置到起點重新開始
alternate
動畫交替反向運行，反向運行時，動畫按步后退，同時，帶時間功能的函
數(shù)也反向，
比如，ease-in 在反向時成為ease-out。計數(shù)取決于開始時是奇數(shù)迭代還
是偶數(shù)迭代
reverse
反向運行動畫，每周期結(jié)束動畫由尾到頭運行。
alternate-reverse
反向交替， 反向開始
animation-fill-mode:
none 動畫執(zhí)行前后不改變?nèi)魏螛邮?br>
forwardfs 目標保持動畫最后一幀的樣式
backwards 動畫采用相應(yīng)第一幀的樣式
both 動畫將會執(zhí)行 forwards 和 backwards 執(zhí)行的動作。
animation-play-state: running;
running 播放
paused 停止
3D 變形 transform 的translateZ() rotateZ( ) scale（）是的元素可以在Z軸的方向上進行變形
只是變形而不是厚度增加
1. 聲明 ：景深層
景深層設(shè)置 perspective: 1600px;
2. 聲明3D容器
3D容器設(shè)置 transform-style: preserve-3d;
特此聲明 每一個元素都擁有自己獨自的參考系 這樣 旋轉(zhuǎn)和移動之后 自己的坐標系也在一起旋轉(zhuǎn) 這點必須要注意
