一哄辣、CSS3 box-shadow 和 text-shadow 屬性：
1.1 box-shadow語法：

box-shadow: h-offset v-offset blur-radius spread-radius color inset;
對象選擇器 {box-shadow:X軸偏移量 Y軸偏移量 陰影模糊半徑 陰影擴(kuò)展半徑 陰影顏色 [投影方式]}
默認(rèn)值是none

1. h-offset：必需窖维。水平陰影的位置潮尝。允許負(fù)值。如果值為0，則對象的左右邊都有陰影绑洛，如果值為正值，則陰影在對象的右邊童本，其值為負(fù)值時(shí)真屯，陰影在對象的左邊(默認(rèn)是outset，如果是inset相反)穷娱；
2. v-offset：必需绑蔫。垂直陰影的位置。允許負(fù)值泵额。如果值為0配深，則對象的底部和頂部都有陰影，如果為正值嫁盲，陰影在對象的底部篓叶，其值為負(fù)值時(shí)，陰影在對象的頂部(默認(rèn)是outset羞秤，如果是inset相反)缸托；
3. blur-radius：此參數(shù)可選，但其值只能是正值瘾蛋，如果其值為0時(shí)俐镐，表示陰影不具有模糊效果，其值越大陰影的邊緣就越模糊哺哼；
4. spread-radius：可選佩抹。其值可以是正負(fù)值奇唤，如果值為正，則整個(gè)陰影都延展擴(kuò)大匹摇，反之值為負(fù)值時(shí)咬扇，則縮小廊勃；  
5. color：可選懈贺。陰影的顏色；
6. inset：可選坡垫。如不設(shè)值梭灿，默認(rèn)投影方式是外陰影；如取其唯一值“inset”冰悠，其投影為內(nèi)陰影堡妒；
注意：box-shadow和text-shadow一樣可以使用一個(gè)或多個(gè)投影，如果使用多個(gè)投影時(shí)必須需要用逗號“溉卓，”分開皮迟。

1.2 text-shadow語法：

text-shadow 屬性向文本設(shè)置陰影。默認(rèn)值是none
text-shadow: h-shadow v-shadow blur color;
1. h-shadow必需桑寨。水平陰影的位置伏尼。允許負(fù)值。
2. v-shadow必需尉尾。垂直陰影的位置爆阶。允許負(fù)值。
3. blur可選沙咏。模糊的距離辨图。
4. color可選。陰影的顏色肢藐。

二故河、CSS3 transition 屬性
2.1 定義和用法

transition 屬性是一個(gè)簡寫屬性，用于設(shè)置四個(gè)過渡屬性：默認(rèn)值是all 0 ease 0
transition-property
transition-duration
transition-timing-function
transition-delay
注：請始終設(shè)置 transition-duration 屬性窖壕，否則時(shí)長為 0忧勿，就不會(huì)產(chǎn)生過渡效果杉女。

2.2 語法

transition: property duration timing-function delay;

transition-property 規(guī)定設(shè)置過渡效果的 CSS 屬性的名稱瞻讽。
-one 沒有屬性會(huì)獲得過渡效果。
-all 所有屬性都將獲得過渡效果熏挎。
-property 定義應(yīng)用過渡效果的 CSS 屬性名稱列表速勇，列表以逗號分隔。

transition-duration 規(guī)定完成過渡效果需要多少秒或毫秒坎拐。
-time 規(guī)定完成過渡效果需要花費(fèi)的時(shí)間（以秒或毫秒計(jì)）烦磁。默認(rèn)值是 0养匈，意味著不會(huì)有效果。

transition-timing-function 規(guī)定速度效果的速度曲線都伪。
-linear 規(guī)定以相同速度開始至結(jié)束的過渡效果（等于 cubic-bezier(0,0,1,1)）呕乎。
-ease-in    規(guī)定以慢速開始的過渡效果（等于 cubic-bezier(0.42,0,1,1)）。
-ease-out   規(guī)定以慢速結(jié)束的過渡效果（等于 cubic-bezier(0,0,0.58,1)）陨晶。
-ease-in-out    規(guī)定以慢速開始和結(jié)束的過渡效果（等于 cubic-bezier(0.42,0,0.58,1)）猬仁。
-cubic-bezier(n,n,n,n)  在 cubic-bezier 函數(shù)中定義自己的值∠扔可能的值是 0 至 1 之間的數(shù)值湿刽。

transition-delay 定義過渡效果何時(shí)開始。

參考CSS詳解

三褐耳、CSS3 transform 屬性
3.1 定義和用法

transform 屬性向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換诈闺。該屬性允許我們對元素進(jìn)行旋轉(zhuǎn)、縮放铃芦、移動(dòng)或傾斜：默認(rèn)值是none
-none   定義不進(jìn)行轉(zhuǎn)換雅镊。
-matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)  定義 3D 轉(zhuǎn)換，使用 16 個(gè)值的 4x4 矩陣刃滓。  
-translate(x,y) 定義 2D 轉(zhuǎn)換漓穿。   
-translate3d(x,y,z) 定義 3D 轉(zhuǎn)換。   
-translateX(x)  定義轉(zhuǎn)換注盈，只是用 X 軸的值晃危。 
-translateY(y)  定義轉(zhuǎn)換，只是用 Y 軸的值老客。 
-translateZ(z)  定義 3D 轉(zhuǎn)換僚饭，只是用 Z 軸的值。 
-scale(x,y) 定義 2D 縮放轉(zhuǎn)換胧砰。 
-scale3d(x,y,z) 定義 3D 縮放轉(zhuǎn)換鳍鸵。 
-scaleX(x)  通過設(shè)置 X 軸的值來定義縮放轉(zhuǎn)換。  
-scaleY(y)  通過設(shè)置 Y 軸的值來定義縮放轉(zhuǎn)換尉间。  
-scaleZ(z)  通過設(shè)置 Z 軸的值來定義 3D 縮放轉(zhuǎn)換偿乖。  
-rotate(angle)  定義 2D 旋轉(zhuǎn)，在參數(shù)中規(guī)定角度哲嘲。  
-rotate3d(x,y,z,angle)  定義 3D 旋轉(zhuǎn)贪薪。   
-rotateX(angle) 定義沿著 X 軸的 3D 旋轉(zhuǎn)。    
-rotateY(angle) 定義沿著 Y 軸的 3D 旋轉(zhuǎn)眠副。    
-rotateZ(angle) 定義沿著 Z 軸的 3D 旋轉(zhuǎn)画切。    
-skew(x-angle,y-angle)  定義沿著 X 和 Y 軸的 2D 傾斜轉(zhuǎn)換。  
-skewX(angle)   定義沿著 X 軸的 2D 傾斜轉(zhuǎn)換囱怕。  
-skewY(angle)   定義沿著 Y 軸的 2D 傾斜轉(zhuǎn)換霍弹。  
-perspective(n) 為 3D 轉(zhuǎn)換元素定義透視視圖毫别。

3.2 語法

transform: none|transform-functions;

3.3 轉(zhuǎn)換屬性

transform-origin    允許你改變被轉(zhuǎn)換元素的位置。  
transform-style 規(guī)定被嵌套元素如何在 3D 空間中顯示典格。    
perspective 規(guī)定 3D 元素的透視效果岛宦。  
perspective-origin  規(guī)定 3D 元素的底部位置。  
backface-visibility 定義元素在不面對屏幕時(shí)是否可見耍缴。

3.4 transform-origin

3.4.1 定義和用法
transform-origin 屬性允許您改變被轉(zhuǎn)換元素的位置恋博。
2D 轉(zhuǎn)換元素能夠改變元素 x 和 y 軸。3D 轉(zhuǎn)換元素還能改變其 Z 軸私恬。
3.4.2 語法
transform-origin: x-axis y-axis z-axis; 默認(rèn)值：50% 50% 0
x-axis  定義視圖被置于 X 軸的何處债沮。
可能的值：left center right length %
y-axis  定義視圖被置于 Y 軸的何處。
可能的值：top center bottom length %
z-axis  定義視圖被置于 Z 軸的何處本鸣。
可能的值：length
注：該屬性必須與 transform 屬性一同使用疫衩。

四、CSS3 filter(濾鏡) 屬性
4.1 定義和使用

filter 屬性定義了元素(通常是<img>)的可視效果(例如：模糊與飽和度)荣德。默認(rèn)值是none
支持的效果有：
－blur（模糊） 給圖像設(shè)置高斯模糊,"radius"一值設(shè)定高斯函數(shù)的標(biāo)準(zhǔn)差闷煤，或者是屏幕上以多少像素融在一起， 所以值越大越模糊涮瞻；如果沒有設(shè)定值鲤拿，
則默認(rèn)是0；這個(gè)參數(shù)可設(shè)置css長度值署咽，但不接受百分比值近顷。
－grayscale（灰度）
－drop-shadow（陰影）
－sepia（褐色濾鏡）
－brightness（亮度）
－contrast（對比）
－h(huán)ue-rotate（色相）
－invert（反相）
－saturate（飽和度）
－opacity（透明度）

五、:root 偽類

這個(gè)偽元素匹配的是文檔的根元素宁否，也就是 <html> 標(biāo)簽窒升。
所以常用于聲明全局的 CSS 變量：
:root {
  --color: #fff;
}

在使用時(shí)：
img {
  background: var(--base);
}

六、CSS 變量(自定義屬性)
參考：CSS 變量教程
6.1 變量的聲明

聲明變量的時(shí)候慕匠，變量名前面要加兩根連詞線（--）饱须。
body {
  --foo: #7F583F;
  --bar: #F7EFD2;
}
上面代碼中，body選擇器里面聲明了兩個(gè)變量：--foo和--bar台谊。
它們與color蓉媳、font-size等正式屬性沒有什么不同，只是沒有默認(rèn)含義锅铅。所以 CSS 變量（CSS variable）又叫做"CSS 自定義屬性"（CSS custom properties）酪呻。因?yàn)樽兞颗c自定義的 CSS 屬性其實(shí)是一回事。
注：變量名大小寫敏感狠角，--header-color和--Header-Color是兩個(gè)不同變量号杠。

6.2 var() 函數(shù)

6.2.1 var()函數(shù)用于讀取變量。

a {
  color: var(--foo);
  text-decoration-color: var(--bar);
}

6.2.2 var()函數(shù)還可以使用第二個(gè)參數(shù)丰歌，表示變量的默認(rèn)值姨蟋。如果該變量不存在，就會(huì)使用這個(gè)默認(rèn)值立帖。

color: var(--foo, #7F583F);

6.2.3 第二個(gè)參數(shù)不處理內(nèi)部的逗號或空格眼溶，都視作參數(shù)的一部分。

var(--font-stack, "Roboto", "Helvetica");
var(--pad, 10px 15px 20px);

6.2.4 var()函數(shù)還可以用在變量的聲明晓勇。

:root {
  --primary-color: red;
  --logo-text: var(--primary-color);
}

6.2.5 變量值只能用作屬性值堂飞，不能用作屬性名。

.foo {
  --side: margin-top;
  /* 無效 */
  var(--side): 20px;
}
上面代碼中绑咱，變量--side用作屬性名绰筛，這是無效的。

6.3 JavaScript 操作

JavaScript 操作 CSS 變量的寫法如下描融。
// 設(shè)置變量
document.body.style.setProperty('--primary', '#7F583F');

// 讀取變量
document.body.style.getPropertyValue('--primary').trim();
// '#7F583F'

// 刪除變量
document.body.style.removeProperty('--primary');

七铝噩、HTML5 中的自定義數(shù)據(jù)屬性 dataset

HTML5 中可以為元素添加非標(biāo)準(zhǔn)的自定義屬性，只需要加上 data- 前綴窿克，可以隨便添加和命名骏庸。添加之后，可以通過元素的 dataset 屬性來訪問這些值年叮，dataset 的值是 DOMStringMap 的一個(gè)實(shí)例化對象具被，其中包含之前所設(shè)定的自定義屬性的“名-值”對。
例如：在項(xiàng)目中處理參數(shù)值（一個(gè)有 px 只损、另一個(gè)沒有）
運(yùn)用 dataset 儲(chǔ)存后綴一姿，有 px 后綴的標(biāo)簽中設(shè)置 <input data-sizing: px>：
<input type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
<input type="color" name="base" value="#8aa8af">
JS 中通過 dataset.sizing 來獲取后綴值：
const suffix = this.dataset.sizing || ''; 
此時(shí) suffix 獲取到的值，針對顏色為空跃惫，而針對長度類的則為 'px'啸蜜。

八、用 JavaScript 改變 CSS 屬性值

在 JavaScript 中 document.documentElement 即代表文檔根元素辈挂。所以要改變?nèi)值?CSS 變量衬横，可以這樣寫：
document.documentElement.style.setProperty('--base', '#fff');
或
document.body.style.setProperty('--primary', '#7F583F');

document.documentElement和document.body的區(qū)別
參考：document.documentElement和document.body的區(qū)別

頁面具有 DTD，或者說指定了 DOCTYPE 時(shí)终蒂，使用 document.documentElement蜂林。
頁面不具有 DTD，或者說沒有指定了 DOCTYPE拇泣，時(shí)噪叙，使用 document.body。

documentElement 和 body 相關(guān)說明：
(1) body是DOM對象里的body子節(jié)點(diǎn)霉翔，即 <body> 標(biāo)簽睁蕾；
(2) documentElement 是整個(gè)節(jié)點(diǎn)樹的根節(jié)點(diǎn)root，即<html> 標(biāo)簽；
(3DOM把層次中的每一個(gè)對象都稱之為節(jié)點(diǎn)子眶，就是一個(gè)層次結(jié)構(gòu)瀑凝，你可以理解為一個(gè)樹形結(jié)構(gòu)，就像我們的目錄一樣臭杰，一個(gè)根目錄粤咪，根目錄下有子目錄，子目錄下還有子目錄渴杆。
以HTML超文本標(biāo)記語言為例：整個(gè)文檔的一個(gè)根就是,在DOM中可以使用document.documentElement來訪問它寥枝，它就是整個(gè)節(jié)點(diǎn)樹的根節(jié)點(diǎn)。而body是子節(jié)點(diǎn)磁奖，要訪問到body標(biāo)簽囊拜，在腳本中應(yīng)該寫：document.body。

九比搭、toggle() 方法
9.1 定義和用法

toggle() 方法切換元素的可見狀態(tài)冠跷。
如果被選元素可見，則隱藏這些元素敢辩，如果被選元素隱藏蔽莱，則顯示這些元素。

9.2 語法

$(selector).toggle(speed,callback,switch)

speed   
可選戚长。規(guī)定元素從可見到隱藏的速度（或者相反）盗冷。默認(rèn)為 "0"。
可能的值：毫秒 （比如 1500）"slow" "normal" "fast"
在設(shè)置速度的情況下同廉，元素從可見到隱藏的過程中仪糖，會(huì)逐漸地改變其高度、寬度迫肖、外邊距锅劝、內(nèi)邊距和透明度。
如果設(shè)置此參數(shù)蟆湖，則無法使用 switch 參數(shù)故爵。

callback    
可選。toggle 函數(shù)執(zhí)行完之后隅津，要執(zhí)行的函數(shù)诬垂。
除非設(shè)置了 speed 參數(shù)，否則不能設(shè)置該參數(shù)伦仍。

switch  
可選结窘。布爾值。規(guī)定 toggle 是否隱藏或顯示所有被選元素充蓝。
True - 顯示所有元素
False - 隱藏所有元素
如果設(shè)置此參數(shù)隧枫，則無法使用 speed 和 callback 參數(shù)喉磁。

注：該效果適用于通過 jQuery 隱藏的元素，或在 CSS 中聲明 display:none 的元素（但不適用于 visibility:hidden 的元素）官脓。

9.3 向 Toggle 事件綁定兩個(gè)或更多函數(shù)

toggle() 方法用于綁定兩個(gè)或多個(gè)事件處理器函數(shù)协怒，以響應(yīng)被選元素的輪流的 click 事件。該方法也可用于切換被選元素的 hide() 與 show() 方法确买。
在javascript中toggle()為連續(xù)點(diǎn)擊事件,當(dāng)里面含有多個(gè)function(){}函數(shù)時(shí),每次點(diǎn)擊依次執(zhí)行里面的function的函數(shù),直至最后一個(gè).隨后每次點(diǎn)擊都重復(fù)對這幾個(gè)函數(shù)的輪番調(diào)用
語法：$(selector).toggle(function1(),function2(),functionN(),...)
function1() 必需斤讥。規(guī)定當(dāng)元素在每偶數(shù)次被點(diǎn)擊時(shí)要運(yùn)行的函數(shù)纱皆。
function2() 必需湾趾。規(guī)定當(dāng)元素在每奇數(shù)次被點(diǎn)擊時(shí)要運(yùn)行的函數(shù)。
functionN(),... 可選派草。規(guī)定需要切換的其他函數(shù)搀缠。