知識點一：漸變
線性漸變
background: linear-gradient(red,blue);background: linear-gradient(red 10%,blue 90%);
background: linear-gradient(to right, red 10%,blue 90%);
方向：如果不給方向的時候，預設的就是從上往下開始。。
引數：可以是多個顏色值，中間用逗號分隔開
百分數：這是從哪個方向到哪個方向的過渡
徑向漸變：
background: radial-gradient(red,blue,blue);background: radial-gradient(red 10%,blue 20%,blue 70%);
background: radial-gradient(circle,red 10%,blue 30%,blue 60%);
引數：顏色可以是多個，中間用逗號分隔開。。。
circle：擴散的程度是圓形，不論是不是正方形
百分數：由中心向外沿著半徑擴散
知識點二：背景
background: url(路徑)，url(路徑) top right; //引入背景圖，，，可以加入多個，還可以在後頭加上所處位置background-repeat: no-repeat; //重複
background-size: 100% 100%; //兩個值，第乙個是x軸位置 第二個是y軸位置
background-origin: border-box;//填充的起始位置是從邊框開始的
background-origin: padding-box;//填充的起始位置是從內邊距開始的
background-origin: content-box;//填充的起始位置是從內容開始的
background-clip: border-box; //裁剪位置是從內邊距開始的，，這是個特例background-clip: padding-box; //裁剪位置是從內邊距開始的
background-clip: content-box; //裁剪位置是從內容開始的
背景圖大小：background-size：contain/cover/auto；
兩種情況：
不論框大圖小 還是框小圖大
知識點三：過渡
transition: width 2s, height 2s; //配合偽元素使用 比如：hover 下同 （這是加在要改變的元素上的）transition-property: all 2s; //所有的效果都是在2秒內完成
transition-delay: 2s; //過渡延遲效果
transition-duration： 4s; // 完成花費的時間
貝塞爾曲線：運動軌跡
transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
透明度相容性問題：
適用於ie瀏覽器的
opicaty: n;filter: alpha(opacity=n*100);
css3 背景漸變
在沒有了解css也可以做背景漸變以前，我都是通過ps一張背景漸變的來應用到自己所做的網頁中。然而，在前不久我了解到css3也可以做背景漸變後，想要做背景漸變的效果就很容易了許多，下面是一些css3做背景漸變的方法。一.線性漸變 自上而下的線性漸變 div 從左往右的線性漸變 div 第乙個引數是漸變...
css3 漸變，陰影，過渡
opacity 透明度，值為0 1，越到1越不透明 rgba r,g,b,a rgb分別表示紅綠藍，可用正整數和分數表示，a是alpha透明度，取值0 1。rgba和opacity透明的不同在於rgba不影響盒子中的字，而opacity連字一起透明。顏色漸變 linear gradient poin...
css3 顏色 背景 漸變
漸變放在 css裡的語句 一定要按這個順序排，才不會出錯。否則 有的瀏覽器會不正常，今天本來調好了，發現ie9不行，搞了半天不行，崩潰了 最後準備還是使用背景算了 最後一次 測試，終於搞定 background moz linear gradient top,fefefe,d3ecff moz火狐 ...