整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
靠CSS 就寫出創(chuàng)意十足的設(shè)計(jì)是很困難的。到目前為止，就創(chuàng)建視覺特效而言，CSS 這門語言還是存在諸多限制。想用CSS 寫出Photoshop 般的效果，還差得很遠(yuǎn)，個(gè)別情況下仍需要各種奇奇怪怪的招術(shù)助陣。
以前，要繞過種種限制，不得不犧牲簡潔性（加入大量元素，只為了展示效果的細(xì)節(jié)），或者犧牲性能（為了展現(xiàn)視覺效果，頁面中放了太多圖片及JavaScript）。
今天，我們就來介紹幾種能夠通過CSS 實(shí)現(xiàn)的特效。其中用到的一些CSS 特性還很新，瀏覽器支持不充分，但也有非常成熟的。很多特性在SVG 中已經(jīng)存在很多年了，最近才加入到CSS 中。
這些技術(shù)能夠提升你的設(shè)計(jì)，就像做菜添加了調(diào)味料，平淡無奇的一盤菜也能頓時(shí)濃香四溢。使用它們的時(shí)候也得小心謹(jǐn)慎，必須考慮漸進(jìn)式增強(qiáng)。另外也要知道，其中一些技術(shù)會(huì)有相關(guān)的bug。即使在支持它們的瀏覽器中，它們也通常還并不成熟。
圖1 展示了一個(gè)頁面（一些天體的介紹），其中包含很多視覺特效。就在幾年前，要通過CSS 實(shí)現(xiàn)這些效果幾乎是不可能的。整個(gè)頁面布局，就算能做出來，也要借助大量圖片和額外的HTML 元素。
今天，這些效果已經(jīng)能夠在很多瀏覽器中通過CSS 來呈現(xiàn)了，即使做不到也能平穩(wěn)地退化為可用版本。在一個(gè)頁面上集成大量視覺特效仍須謹(jǐn)慎，因?yàn)榭赡茉斐尚阅荛_銷，代價(jià)有大有小。
盡管如此，通過CSS 來完成它們?nèi)匀挥泻芏嗪锰?，因?yàn)榭梢詼p少不必要的標(biāo)記，而且維護(hù)起來比較容易。此外，隨著瀏覽器支持相應(yīng)的規(guī)范，性能也會(huì)越來越好。
圖1 使用了很多視覺特效的頁面
接下來，我們就以這個(gè)“觀星指南”頁面作為例子，逐個(gè)講解其中涉及的技術(shù)點(diǎn)。
大家可能都知道，網(wǎng)頁布局基本上都是由矩形構(gòu)成的，CSS Shapes 是一個(gè)新標(biāo)準(zhǔn)，旨在讓W(xué)eb 設(shè)計(jì)者能使用各種形狀。形狀元素不僅會(huì)影響界面的外觀，還會(huì)影響頁面的內(nèi)容流。
細(xì)說形狀
CSS Shapes 包含兩組新屬性，一組用于設(shè)置影響盒子中內(nèi)容的形狀，另一組用于設(shè)置影響形狀元素周邊內(nèi)容流的形狀。在圖2 中，我們看到一個(gè)被設(shè)置為圓形的形狀。其中左邊的圖形展示了外部形狀如何影響周邊的內(nèi)容，而右邊的圖形展示了圓形中的內(nèi)容如何受到內(nèi)部形狀的影響。
圖2 外部形狀與內(nèi)部形狀
這兩種形狀分別由不同級(jí)別的CSS Shapes 規(guī)范定義。其中shape-outside 屬性（在CSS Shapes Level 1 中定義）是唯一相對(duì)比較成熟的。本文不涉及shape-inside，因?yàn)槟壳斑€沒有瀏覽器實(shí)現(xiàn)它，也許在不久的將來會(huì)有吧。
shape-outside 屬性只能應(yīng)用給浮動(dòng)元素。這個(gè)屬性不改變?cè)刈陨淼耐庥^，只會(huì)通過設(shè)置形狀影響其外部內(nèi)容流。
在我們例子中的“Moon”部分，通過設(shè)置shape-outside: circle();實(shí)現(xiàn)了文本流環(huán)繞月亮圖片的效果（見圖3）。
.fig-moon {
float: right;
max-width: 40%;
shape-outside: circle();
}
圖3 文本圍繞月亮圖片周圍的圓形實(shí)現(xiàn)了繞排
在解釋形狀構(gòu)造原理之前，先了解一下shape-outside 如何影響布局。圖片文件本身的背景是黑色的，如果把這一區(qū)塊的背景改成其他顏色，我們會(huì)看得更清楚（見圖4）。圖片本身還是方形的，但文本流環(huán)繞著其中的圓形。在不支持CSS 形狀的瀏覽器中，文本會(huì)像往常一樣環(huán)繞矩形。
注意：如圖4 所示，文本流只繞排在浮動(dòng)元素的左側(cè)。只能讓形狀的一側(cè)影響文本的行盒子。即使形狀右側(cè)有空間，文本也不會(huì)填進(jìn)去。
1. 形狀函數(shù)
前面例子中的shape-outside 屬性使用了一個(gè)值：circle()。這是一個(gè)形狀函數(shù)，類似的形狀函數(shù)還有ellipse()、polygon()、inset()。前兩個(gè)分別用于定義橢圓形和多邊形，inset()則表示嵌入在盒子邊界內(nèi)的矩形，也可以指定圓角，算是CSS 2.1 中clip 屬性的加強(qiáng)版，只是語法不同而已。
此處圓形和橢圓形的語法，類似于第5 章的放射性漸變的大小及位置的語法：
.shape-circle {
/* 圓形接受一個(gè)半徑值和一個(gè)位置值 */
shape-outside: circle(150px at 50%);
}
.shape-ellipse {
/* 橢圓形接受兩個(gè)半徑值和一個(gè)位置值 */
shape-outside: ellipse(150px 40px at 50% 25%);
}
與漸變函數(shù)類似，圓形和橢圓形函數(shù)也有合理的默認(rèn)值。前面月亮圖片的circle()函數(shù)并未傳入?yún)?shù)，而默認(rèn)的參數(shù)是以元素中心為圓心，以最近邊為半徑。
inset()函數(shù)需要傳入一組長度值，分別表示到上、右、下、左邊的距離，很像margin 和padding 簡寫。同樣，1~3 個(gè)值的外邊距和內(nèi)邊距簡寫規(guī)則在這里也適用。此外，還可以通過round關(guān)鍵字指定圓角，隨后是半徑值，與border-radius 屬性的類似：
.shape-inset {
/* 距離外部盒子的上、下邊各20 像素，
* 距離外部盒子的左、右邊各30 像素，
* 還有半徑為10 像素的圓角
*/
shape-outside: inset(20px 30px round 10px);
}
相對(duì)復(fù)雜一些的是polygon()函數(shù)。這個(gè)函數(shù)接受一系列坐標(biāo)對(duì)，用于在盒子表面指定多個(gè)點(diǎn)，坐標(biāo)相對(duì)于盒子的左上角，最終把各個(gè)點(diǎn)連接起來就是要?jiǎng)?chuàng)建的形狀。在“Planets”部分，我們?yōu)橥列莿?chuàng)建了一個(gè)多邊形。
創(chuàng)建多邊形最簡單的一種方式就是使用CSS Shapes Editor 插件，它支持Chrome 和Opera。Chrome 和Opera 都支持CSS Shapes，而且會(huì)在檢查形狀元素時(shí)給出預(yù)覽。這個(gè)插件會(huì)添加額外的工具，因此既可以通過它看到形狀如何影響頁面，也可以通過創(chuàng)建并拖動(dòng)控制點(diǎn)來創(chuàng)建新形狀（見圖5）。
圖5 在Chrome 中通過Shapes Editor 插件繪制的形狀
然后就可以把得到的多邊形復(fù)制粘貼到代碼中：
.fig-planet {
float: right;
max-width: 65%;
shape-outside: polygon(41.85% 100%, 22.75% 92.85%, 5.6% 73.3%, 0.95% 52.6%, 5.6% 35.05%,
21.45% 17.15%, 37.65% 12.35%, 40% 0, 100% 0%, 100% 100%);
}
多邊形中每個(gè)點(diǎn)的坐標(biāo)以百分比表示，這樣可以保證最大的靈活度。當(dāng)然也可以在這里使用任意長度值，比如像素、em，甚至calc()表達(dá)式。
2. 形狀圖片
基于復(fù)雜的圖片創(chuàng)建多邊形會(huì)非常麻煩。好在我們可以直接在圖片的源文件上基于透明度來創(chuàng)建形狀。比如，可以比照預(yù)期的形狀新創(chuàng)建一張圖片。但土星的圖片已經(jīng)是帶透明度的PNG格式了，因此可以直接通過它來生成形狀。我們要做的就是把shape-outside 的值由polygon()函數(shù)修改為指向該圖片的url()函數(shù)：
.fig-planet {
float: right;
max-width: 65%;
shape-outside: url(img/saturn.png);
}
如果在Chrome 開發(fā)者工具里檢查這張圖片，會(huì)看到如圖6 所示的模樣?？梢钥吹剑瑘D片的透明度數(shù)據(jù)被用于生成形狀了。
圖6 圖片透明區(qū)域的輪廓被用于生成形狀
提示：只通過瀏覽器打開HTML 文件是不行的，就算瀏覽器支持CSS Shapes 也不行。必須通過Web 服務(wù)器取得這個(gè)頁面，這樣引用的圖片才會(huì)帶有合適的HTTP 首部信息，告訴瀏覽器該圖片與CSS 來自同一個(gè)域。這種安全機(jī)制是較新的瀏覽器才有的，是為了防止引用的文件對(duì)你的計(jì)算機(jī)造成危害。
默認(rèn)情況下，形狀輪廓會(huì)沿圖片完全透明區(qū)域的邊緣生成，但這個(gè)值可以通過shape-imagethreshold 屬性來修改。默認(rèn)值是0.0（完全透明），而較大的值（最大為1.0）意味著較高的不透明度也可以用于生成形狀邊界。比如，修改土星圖片的不透明度閾值為0.9，則半透明的土星環(huán)將不再被包含在形狀內(nèi)，結(jié)果文本會(huì)覆蓋其上（見圖7）。
.fig-planet {
float: right;
max-width: 65%;
shape-outside: url(img/saturn.png);
shape-image-threshold: 0.9;
}
圖7 使用shape-image-threshold 提高不透明度閾值后，原來圖片中半透明的部分在生
3. 形狀盒子與邊距
除了使用形狀函數(shù)或圖片，還可以使用元素的參照盒子來生成形狀。乍一聽好像有點(diǎn)不對(duì)，畢竟元素盒子都是方形的。不過，形狀也能依照?qǐng)A角生成。
比如，以前面的月亮圖片為例，如果我們想改變區(qū)塊背景的顏色，同時(shí)也去掉圖片周圍的黑色區(qū)域（如圖11-8 所示），那么可以在圖片上使用border-radius 來創(chuàng)建圓形。
.fig-moon {
float: right;
max-width: 40%;
border-radius: 50%;
}
圖8 給月亮圖片應(yīng)用border-radius
僅有圓角邊框還不能生成形狀，還得通過shape-outside 屬性告訴瀏覽器，以border-box作為生成形狀的依據(jù)。
.fig-moon {
float: right;
max-width: 40%;
border-radius: 50%;
shape-outside: border-box;
}
這樣外部形狀就變成了環(huán)繞元素邊框盒子的圓形。其他能生成形狀的參照盒子還有content-box、padding-box 和margin-box。margin-box 是個(gè)例外。因?yàn)樾螤钍腔诟?dòng)區(qū)域的，浮動(dòng)區(qū)域也包含外邊距，所以這個(gè)關(guān)鍵字是專門為形狀定義的，并沒有box-sizing: margin-box 這種用法。
對(duì)于形狀而言，參照盒子為margin-box 時(shí)，形狀仍然會(huì)參照?qǐng)A角邊框，但這樣一來就可以像定義常規(guī)的外邊距一樣，給月亮圖片周圍添加一些邊距了。
.fig-moon {
float: right;
max-width: 40%;
border-radius: 50%;
shape-outside: margin-box;
margin: 2em;
}
這樣，文本會(huì)環(huán)繞著弧形的外邊距形狀排布。如果在Chrome 開發(fā)者工具中檢查圖片，可以看到此時(shí)形狀的樣子，還有原始的外邊距（見圖9）。
圖9 將margin-box 作為形狀的參照后，可以為形狀設(shè)置外邊距
如果想給更復(fù)雜的土星圖片添加外邊距，可以使用另一個(gè)屬性shape-margin，這個(gè)屬性用于給整個(gè)形狀添加外邊距，與創(chuàng)建形狀的方法無關(guān)（見圖10）。
.fig-planet {
max-width: 65%;
shape-outside: url(img/saturn.png);
shape-margin: 1em;
}
圖10 為土星形狀添加shape-margin 屬性
CSS 形狀雖然可以影響周圍文本流，卻不允許你修改元素自身的外觀。添加圓角邊框只是視覺上改變?cè)匦螤畹囊环N方式。實(shí)際上，通過把元素的部分區(qū)域變透明，是可以影響元素自身形狀的。
剪切（clipping）使用路徑形狀定義硬邊界，可以基于該邊界完全切換元素的可見性。蒙版（masking）不太一樣，它用于將元素的某些區(qū)域設(shè)置為更透明或更不透明。剪切會(huì)影響對(duì)象的響應(yīng)區(qū)域，而蒙版不會(huì)。比如要觸發(fā)懸停，鼠標(biāo)必須移到剪切后元素的可見區(qū)域。而對(duì)于加了蒙版的元素，無論鼠標(biāo)下面的區(qū)域是否可見，只要位于該元素上，都會(huì)激活:hover 狀態(tài)。
一、剪切
剪切最早是在CSS 2.1 中通過clip 屬性引入的。但這個(gè)屬性只能應(yīng)用給絕對(duì)定位的元素，而且只能把這些元素剪切為矩形（使用rect()函數(shù)）。沒勁！
好在新的clip-path 屬性提供了更多選擇。它可以使用CSS 形狀中的基本形狀函數(shù)定義如何剪切元素。它還能使用SVG 文檔剪切元素，只要通過URL 引用一個(gè)<clipPath>元素即可。
下面從使用形狀函數(shù)定義剪切路徑開始。這個(gè)特性之前只有Blink 和WebKit 內(nèi)核的瀏覽器支持，而且除了不加前綴的屬性，還要使用加-webkit-前綴的屬性。為簡單起見，后面的例子只展示不加前綴的標(biāo)準(zhǔn)屬性。
“觀星指南”頁面中的所有區(qū)塊都是被剪切過的，因此都有一些向?qū)蔷€傾斜（見圖11）。
圖11 頁面中的所有區(qū)塊都被剪切過，因此都有點(diǎn)傾斜
每個(gè)區(qū)塊都有一個(gè)stacked 類，其中使用多邊形函數(shù)指定了剪切路徑：
.stacked {
clip-path: polygon(0 3vw, 100% 0, 100% calc(100% - 3vw), 0% 100%);
}
這個(gè)多邊形沒有前面土星的多邊形復(fù)雜，因此可以稍微深入地講解一下。多邊形中的每一個(gè)點(diǎn)都對(duì)應(yīng)著一對(duì)空格分隔的值，值對(duì)之間以逗號(hào)隔開。
先從左上角開始，0 3vw 表示x 軸剪切長度為0，y 軸剪切長度為3vw。這里使用相對(duì)視口的單位保證角度以視口大小為參照。接下來的坐標(biāo)是右上角坐標(biāo)100% 0。第三個(gè)100% calc(100% -3vw)指距右下角3vw，它不能使用百分比表示，因?yàn)檫@個(gè)y 軸坐標(biāo)是從上方開始計(jì)算的。最后，左下角的坐標(biāo)是0 100%。
因?yàn)榧羟新窂街挥绊懺劁秩竞蟮耐庥^，而不會(huì)影響頁面流，所以剪切后的元素之間會(huì)出現(xiàn)透明間隙（見圖11-12）。為消除間隙，可以給每個(gè)堆疊的區(qū)塊應(yīng)用一個(gè)負(fù)外邊距，而且要比3vm稍大一些，好讓相鄰的區(qū)塊邊緣能彼此重疊。但我們只希望在支持clip-path 的瀏覽器中應(yīng)用這個(gè)負(fù)外邊距，這時(shí)候正好可以用上@supports 規(guī)則。因?yàn)檫@些新的特效只在較新的瀏覽器中才存在，所以我們可以放心地這么寫：
@supports ((clip-path: polygon(0 0)) or
(-webkit-clip-path: polygon(0 0))) {
.stacked {
margin-bottom: -3.4vw;
}
}
圖12 如果只應(yīng)用剪切，區(qū)塊之間會(huì)出現(xiàn)間隙
在@supports 規(guī)則塊中，我們測試了瀏覽器是否支持最小的多邊形（只有一個(gè)點(diǎn)）。增加這些保障后，區(qū)塊就可以完美地對(duì)齊了。而在不支持clip-path 的瀏覽器中，區(qū)塊也會(huì)像平常一樣上下相接，不會(huì)重疊。
使用SVG
可以使用polygon()、circle()、ellipse()和inset() 函數(shù)創(chuàng)建剪切路徑，與創(chuàng)建CSS形狀一樣。對(duì)于復(fù)雜的形狀，建議大家還是使用圖片編輯器來創(chuàng)建，然后再將最終的圖形作為剪切路徑的源。我們?cè)陧撁鎸?dǎo)航中使用的形狀就是這樣生成的，如圖13 所示。
圖13 導(dǎo)航區(qū)中復(fù)雜的形狀是基于SVG 源實(shí)現(xiàn)的剪切
使用圖形作為剪切源，需要先使用SVG 創(chuàng)建剪切路徑，然后再通過一個(gè)URL 引用到形狀函數(shù)中。首先，要在Illustrator、Sketch 或Inkscape 之類的圖形編輯器中創(chuàng)建想要的形狀。雖然不那么簡單，但還是可行的。
導(dǎo)航區(qū)塊本身是一個(gè)包含頁內(nèi)鏈接的無序列表：
<nav class="stacked section nav-section inverted"> <ul class="wrapper"> <li><a href="#moon">The Moon</a></li> <li><a href="#sun">The Sun</a></li> <li><a href="#planets">Planets</a></li> <li><a href="#milky-way">Galaxy</a></li> <li><a href="#universe">Universe</a></li> </ul> </nav>
在此，我們就不涉及導(dǎo)航本身的樣式了，大家只要知道這里用到了Flexbox 水平布局導(dǎo)航項(xiàng)目，將它們固定為100 像素見方的方塊就夠了。
然后，在支持SVG 的圖形編輯器（我們用的是Adobe Illustrator）中創(chuàng)建一張圖片。圖片的大小也是100 像素見方（見圖14）。其中的星球由兩個(gè)黑色的形狀構(gòu)成，一個(gè)圓形和一個(gè)旋轉(zhuǎn)后的橢圓形。接著把這個(gè)圖片保存為SVG 格式，命名為clip.svg。保存過程因編輯器而異，這里
就不說了，我們只關(guān)注大體的流程。
圖14 使用Illustrator 創(chuàng)建的星球圖形
下面在代碼編輯器中打開生成的SVG 文件，看上去大概是這樣的：
<svg xmlns=http://www.w3.org/2000/svg width="100px" height="100px" viewBox="0 0 100 100"> <circle cx="50" cy="50" r="45"/> <ellipse transform="matrix(-0.7553 0.6554 -0.6554 -0.7553 -12.053 54.99)" cx="50" cy="50" rx="63.9" ry="12.8"/> </svg>
為了把這個(gè)圖片轉(zhuǎn)換為剪切路徑，需要把其內(nèi)容包裝在一個(gè)<clipPath>元素中，并添加一個(gè)ID 屬性：
<svg xmlns="SVG namespace" width="100px" height="100px" viewBox="0 0 100 100"> <clipPath id="saturnclip"> <circle cx="50" cy="50" r="40.1"/> <ellipse transform="matrix(0.7084 -0.7058 0.7058 0.7084 -20.7106 49.8733)" cx="50" cy="50" rx="62.9" ry="12.8"/> </clipPath> </svg>
最后，就可以在CSS 中引用clip.svg 中的這個(gè)剪切路徑了：
.nav-section [href="#planets"] {
clip-path: url(img/clip.svg#saturnclip);
}
這樣就可以把多個(gè)剪切源保存在一個(gè)SVG 文件中，然后通過URL 的片段ID 分別引用。
二、蒙版
“觀星指南”頁面的標(biāo)題好像半隱于地球大氣層的后面（見圖15）。這種透明漸隱效果是通過蒙版實(shí)現(xiàn)的。
圖15 頁面標(biāo)題“Stargazing”通過蒙版實(shí)現(xiàn)了漸隱效果
Safari 早在2008 年就實(shí)現(xiàn)了蒙版，使用的是非標(biāo)準(zhǔn)屬性-webkit-mask-image。這個(gè)屬性允許指定一張圖片，并以這張圖片作為加蒙版元素透明度層次的來源。作為蒙版的圖片中，每個(gè)像素都有一個(gè)阿爾法級(jí)別（alpha level），也就是透明度。如果蒙版圖片中的像素是透明的，那么加蒙版元素中對(duì)應(yīng)的像素也不可見。相反，蒙版圖片中完全不透明的區(qū)域，對(duì)應(yīng)的加蒙版元素的區(qū)域也會(huì)完全可見。蒙版圖片的顏色與此無關(guān)，因此灰度圖常用作蒙版。
除了圖片，還可以使用CSS 漸變來創(chuàng)建蒙版。頁面標(biāo)題的蒙版效果就是這么做的：
.header-title {
mask-image: radial-gradient(ellipse 90% 30% at 50% 50%,
rgba(0,0,0,0) 45%,
#000 70%);
mask-size: 100% 200%;
}
相信大家都了解這個(gè)語法：mask-image 后面的值非常類似background-image 屬性的值，甚至也可以聲明多個(gè)蒙版。
除了指定蒙版圖片，還可以指定蒙版的大小和位置。對(duì)于我們這個(gè)例子而言，為了把蒙版放到文本底部，我們將它的高度聲明為兩倍，而沒有使用定位。如果我們?cè)谶@里簡單地把漸變圖片移動(dòng)到下面，那么蒙版圖片的上半部分就會(huì)是透明的，結(jié)果就是文本的上半部分不可見。圖16展示了漸變蒙版的大小和位置，以及它與文本的相對(duì)位置關(guān)系。
圖16 蒙版圖片看起來就像是位于文本上方
在WebKit 最初實(shí)現(xiàn)的基礎(chǔ)上，蒙版相關(guān)的屬性得以標(biāo)準(zhǔn)化和擴(kuò)展，同時(shí)也支持了對(duì)應(yīng)的SVG效果。沒錯(cuò)，就像clip-path 一樣，SVG 中的蒙板也可以應(yīng)用給HTML 內(nèi)容。
.header-title {
/*嵌入頁面中的CSS，指向嵌入同一頁面中的SVG <mask>元素*/
mask: url(#ellipseMask);
}
與前面CSS 漸變等價(jià)的SVG 標(biāo)記如下：
<mask id="ellipseMask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
<radialGradient id="radialfill" r="0.9" cy="1.1">
<stop offset="45%" stop-color="#000"/>
<stop offset="70%" stop-color="#fff"/>
</radialGradient>
</mask>
與剪切路徑一樣，這里也需要使用objectBoundingBox 坐標(biāo)系，按照0~1 的比例尺將蒙版縮放到與元素邊界匹配。SVG 蒙版元素本身還有一個(gè)maskContentUnits 屬性，這里也將其設(shè)置為與蒙版形狀相同的坐標(biāo)系。
SVG 蒙版源使用明度值（luminance）而非阿爾法級(jí)別來應(yīng)用蒙版。這意味著蒙版較暗的區(qū)域?qū)?yīng)的加蒙版元素區(qū)域會(huì)較透明，而蒙版較亮的區(qū)域?qū)?yīng)的加蒙版元素區(qū)域會(huì)較不透明。在前面SVG 蒙版的例子中，我們使用了黑白漸變。
瀏覽器會(huì)在你使用蒙版圖片時(shí)使用阿爾法級(jí)別，在你使用SVG 蒙版時(shí)使用明度值。在對(duì)標(biāo)準(zhǔn)的建議中，有一個(gè)mask-type 屬性可以切換這個(gè)應(yīng)用蒙版的依據(jù)值。
另外，-webkit-前綴版與建議的標(biāo)準(zhǔn)版屬性之間也有一些差異?？梢詤⒖糓DN 中WebKit實(shí)現(xiàn)的完整屬性和語法。
——
本文很大程度上跳出了沉悶單調(diào)的頁面盒子世界。我們探討了如何通過CSS 形狀美化頁面中的元素，以及如何通過剪切路徑畫出視覺邊界。使用蒙版則可以進(jìn)一步控制界面中元素的可見性。
通過這些特效的學(xué)習(xí)，我們也看到了SVG 與CSS 結(jié)合的威力，也極大擴(kuò)展了我們未來設(shè)計(jì)的想象空間。
——本文節(jié)選自《精通CSS：高級(jí)Web標(biāo)準(zhǔn)解決方案（第3版）》
CSS暢銷經(jīng)典全面升級(jí)
CSS作為Web標(biāo)準(zhǔn)的一部分，是現(xiàn)代網(wǎng)頁設(shè)計(jì)中必不可少的關(guān)鍵元素。鑒于CSS標(biāo)準(zhǔn)化的快速發(fā)展，想要成為CSS高手，打造出令人驚艷、辨識(shí)度高的網(wǎng)站，就必須充分了解當(dāng)前CSS規(guī)范各模塊的新特性、新技術(shù)和新思想。
本書是經(jīng)典CSS參考指南，自第1版出版至今一直暢銷不衰。第3版針對(duì)當(dāng)前瀏覽器支持度足夠好的CSS特性全面改寫，著眼于如何為更大、更復(fù)雜的網(wǎng)站編寫優(yōu)雅、巧妙、易維護(hù)的代碼。兩位作者均是技術(shù)與寫作才能俱佳的開發(fā)高手，他們將自己對(duì)現(xiàn)代CSS實(shí)踐的深刻理解融入書中，結(jié)合大量復(fù)雜實(shí)現(xiàn)情景，清晰展示了如何利用新技術(shù)寫出高度靈活、易維護(hù)和可擴(kuò)展的代碼，并讓這些代碼在不同瀏覽器和不同平臺(tái)上跑起來。
第1章 基礎(chǔ)知識(shí)
第2章 添加樣式
第3章 可見格式化模型
第4章 網(wǎng)頁排版
第5章 漂亮的盒子
第6章 內(nèi)容布局
第7章 頁面布局與網(wǎng)格
第8章 響應(yīng)式Web設(shè)計(jì)與CSS
第9章 表單與數(shù)據(jù)表
第10章 變換、過渡與動(dòng)畫
第11章 高級(jí)特效
第12章 品控與流程
tml入門基礎(chǔ)筆記(簡單實(shí)用)
一、初識(shí)html
1.HTML：Hyper Text Markup Language（超文本標(biāo)記語言）
java是一門編譯性語言
html是一門解釋性的標(biāo)記語言
超文本：文字、圖片、音頻、視頻、動(dòng)畫、超鏈接
標(biāo)記：就是指組成HTML的各種標(biāo)簽
2.HTML5的優(yōu)勢(shì)：
1、各大瀏覽器廠商對(duì)它的支持
2、市場的需求
3、跨平臺(tái)
3.W3C標(biāo)準(zhǔn)：
1、結(jié)構(gòu)化標(biāo)準(zhǔn)：指用什么語言去搭建整個(gè)網(wǎng)站（html 5）
2、表現(xiàn)化標(biāo)準(zhǔn)：指用什么去裝飾整個(gè)網(wǎng)站（css3）
3、行為標(biāo)準(zhǔn)：指用什么去實(shí)現(xiàn)網(wǎng)站的功能（JavaScript，jQuery）
4.html的基本結(jié)構(gòu)：
<html>
<head>
<title>天貓精選-理想生活上天貓</title>
</head>
<body bgcolor="pink">
大家好！?。。?！
</body>
</html>
雙標(biāo)簽：有個(gè)兩個(gè)標(biāo)簽成對(duì)出現(xiàn)的叫做雙標(biāo)簽
表示HTML網(wǎng)頁的開始，表示網(wǎng)頁的結(jié)束
表示網(wǎng)頁頭部的開始，表示網(wǎng)頁頭部的結(jié)束
表示網(wǎng)頁身體的開始，表示網(wǎng)頁身體的結(jié)束
表示網(wǎng)頁標(biāo)題的結(jié)束
標(biāo)題標(biāo)簽
<h1></h1>....<h6></h6>:會(huì)對(duì)文字進(jìn)行加粗，并且改變字體的大小，還會(huì)進(jìn)行換行
段落標(biāo)簽
<p></p>:表示它獨(dú)占一行，會(huì)保留段落之間的間距
加粗
<strong></strong>:表示加粗
斜體
<em></em>:表示斜體
字體設(shè)置
<font></font>:表示字體
屬性：color顏色
face字體的樣式
size字體的大小
單標(biāo)簽：只有一個(gè)，開始就結(jié)束的叫做單標(biāo)簽
屬性：charset = “utf-8”;utf-8表示國際編碼格式，所有的字符都能識(shí)別
換行標(biāo)簽
<br/>：表示換到下一行
水平線標(biāo)簽
<hr/>:表示水平線
屬性：width表示水平線的寬度
size表示水平線的厚度
color表示水平線的顏色
align表示水平線的水平位置，left左邊，center中間，right右邊
圖像標(biāo)簽
<img src="" alt="" title=""/>
src表示的是圖片地址
絕對(duì)路徑：直接寫完整圖片所在的位置
相對(duì)路徑：先找到和你的網(wǎng)頁所在同一級(jí)的圖片所在位置，然后再去在這個(gè)基礎(chǔ)
去找圖片的位置，如果圖片在下一級(jí)那么使用“/”來找到它，如果
上一級(jí)使用“..”來找到它
alt表示的是圖片加載失敗的替代文字
title表示的是鼠標(biāo)懸浮時(shí)圖片的提示文字
width表示圖片的寬度
height表示圖片的高度
特殊標(biāo)簽：
大于符號(hào)：>（great than）
小于符號(hào)：<（less than）
空格符號(hào)：
版權(quán)符號(hào)：?
注釋：
5.超鏈接標(biāo)簽
<a href="" target=""></a>
1
href表示鏈接的地址，使用相對(duì)路徑的方式去使用
target表示連接的方式
_blank表示在新窗口打開
_self表示在本窗口打開
_parent表示在父窗口打開
1、頁面間的鏈接，用于兩個(gè)頁面之間相互的跳轉(zhuǎn)
2、錨鏈接，用于頁面之間定位
①要設(shè)置一個(gè)錨點(diǎn)，語法錨點(diǎn)
②將點(diǎn)擊之后要跳轉(zhuǎn)的超鏈接設(shè)置跳轉(zhuǎn)的錨點(diǎn)位置，語法：
如果不在同一個(gè)頁面中，先寫好要跳轉(zhuǎn)頁面所在的位置，然后再寫錨點(diǎn)的名字
3、功能性鏈接 (發(fā)郵件、msn、可以打開本地的相應(yīng)的客戶端)
語法：
二、網(wǎng)頁媒體元素
1.視頻元素<video></video>
屬性：src表示添加視頻的路徑(位置)
controls表示在添加的視頻元素上添加播放控件，只有一個(gè)屬性值
/autoplay表示自動(dòng)播放（慎用），只有一個(gè)屬性值
如果屬性只有一個(gè)值，屬性值可以省略不寫
source表示引用的視頻源路徑，一般會(huì)引用多個(gè)源路徑，以避免瀏覽器不兼容的問 題
2.音頻元素<audio></audio>
屬性：src表示添加視頻的路徑（位置）
controls表示在添加的音頻元素上添加播放控件，只有一個(gè)屬性值
/autoplay表示自動(dòng)播放（慎用），只有一個(gè)屬性值
source表示引用的音頻源路徑，一般會(huì)引用多個(gè)源路徑，以避免瀏覽器不兼容的問 題
3.內(nèi)嵌框架<iframe></iframe>
屬性：src表示添加內(nèi)嵌內(nèi)容的路徑
name表示這個(gè)框架的名字
width表示這個(gè)框架的寬度
height表示這個(gè)框架的高度
frameborder表示內(nèi)嵌框架的邊框
scrolling表示是否出現(xiàn)滾動(dòng)條
作用：
1、將多個(gè)網(wǎng)頁重復(fù)的部分抽取出來，通過內(nèi)嵌框架的方式，放到各個(gè)網(wǎng)頁中
2、使用<a>標(biāo)簽跳轉(zhuǎn)到指定的框架中，先在指定要跳轉(zhuǎn)到的框架中取一個(gè)name，使用target=“name的值”
<a>標(biāo)簽一定要寫href屬性才能生效，如果不想跳轉(zhuǎn)到任何頁面，那么href="#",表示該超鏈接為空
鏈接，點(diǎn)擊空鏈接會(huì)刷新頁面
4.語義化結(jié)構(gòu)標(biāo)簽：主要是為了讓結(jié)構(gòu)更加清晰化
<header>表示頁面頭部內(nèi)容
<section>表示頁面主體內(nèi)容
<footer>表示頁面底部內(nèi)容
<nav>表示導(dǎo)航欄內(nèi)容
<aside>表示側(cè)邊欄內(nèi)容
<article>表示頁面獨(dú)立文章內(nèi)容
三、表單元素
1.表單<form></form>
屬性：1、method表示表單的提交方式，有兩個(gè)值，第一個(gè)叫post，第二個(gè)叫g(shù)et
get方式的請(qǐng)求會(huì)將表單中所有表單元素信息顯示在地址欄中
post方式的請(qǐng)求必須有一個(gè)服務(wù)器來處理請(qǐng)求，所有表單元素的信息不會(huì)顯示在地址欄中， 在實(shí)際開發(fā)中一般使用post方式請(qǐng)求
2、action表單要提交的位置
2.表單元素
語法：
屬性： name表示input標(biāo)簽的名字
value表示input標(biāo)簽的值
type表示input標(biāo)簽的元素類型
文本框：專門用來輸入文字
語法：<input type="text" name="userName" value="admin"/>，type的值為text
size表示文本框的長度
maxlength表示允許輸入的最大字符長度
密碼框：用來輸入密碼
語法：<input type="password" name="userName" value="admin"/>，
type的值為password
size表示文本框的長度
maxlength表示允許輸入的最大字符長度
單選按鈕
<input type="radio" name="sex" value="boy"/>男
<input type="radio" name="sex" value="girl"/>女
1
2
注意：單選按鈕的每個(gè)input中的name值必須相同，不然不能實(shí)現(xiàn)選擇一個(gè)切換的作用
checked屬性表示默認(rèn)選中
1
2
復(fù)選框
<input type="checkbox" name="hobby" value="" />打游戲
<input type="checkbox" name="hobby" value="" checked/>睡覺
<input type="checkbox" name="hobby" value="" />出去約會(huì)
1
2
3
復(fù)選框可以選擇多個(gè)，并且可以取消
checked屬性表示默認(rèn)選中
1
2
下拉列表框
<select>表示定義了一個(gè)列表框
<option>表示列表項(xiàng)
<select>
<option>--請(qǐng)選擇--</option>
<option selected>中國</option>
<option>美國</option>
</select> selected表示默認(rèn)選中
按鈕
1、提交按鈕submit，它可以將表單中的信息提交到指定的位置
2、重置按鈕reset，它可以將表單中的信息恢復(fù)到默認(rèn)值
3、普通按鈕button，它只是單純起一個(gè)按鈕的作用，需要和JavaScript和jQuery一起使
用，實(shí)現(xiàn)各種功能
4、圖片按鈕image，src表示圖片的路徑，也具有提交作用
多行文本域：需要輸入多行文字
<textarea>表示定義了一個(gè)多行文本域
cols表示文本域的寬度
rows表示文本域的高度
文件域：上傳文件
<input type="file" name="files"/>
1
需要設(shè)置編碼屬性enctype="multipart/form-data"，表示將表單數(shù)據(jù)分為多部分提交
1
郵箱：可以進(jìn)行郵箱驗(yàn)證
網(wǎng)址：可以進(jìn)行網(wǎng)址驗(yàn)證
<input type="url" name="url"/>
1
數(shù)字：提供輸入數(shù)字
min表示允許的最小值
max表示允許的最大值
step表示每次增加或者減少的數(shù)字間隔
value表示默認(rèn)值
搜索框：可以搜索提示關(guān)鍵字的文本框
<input type="search" name="search" />
<input type="button" value="百度一下" />
1
2
3.表單的高級(jí)應(yīng)用
1、隱藏域：主要應(yīng)用于在提交信息時(shí)不想讓用戶看到的信息進(jìn)行隱藏提交
<input type="hidden" name="hidden" value="666"/>
1
2、只讀和禁用屬性
只讀：表示在網(wǎng)站上用戶只能夠查看，不能夠修改的數(shù)據(jù)，使用readonly添加只讀
禁用：一般表示在滿足某個(gè)條件之后，才能使用的功能，使用disabled添加禁用
3、表單元素的標(biāo)注
①選擇要點(diǎn)擊后跳轉(zhuǎn)文本加上<label>標(biāo)簽
②選擇跳轉(zhuǎn)對(duì)應(yīng)的表單元素，給它加上id這個(gè)屬性（id屬性值在整個(gè)網(wǎng)頁只能出現(xiàn)一
次，不可以有重復(fù)的id值）
③在<label>中添加for屬性，然后屬性值為對(duì)應(yīng)的id值
4.表單的初步驗(yàn)證
為什么要進(jìn)行表單驗(yàn)證
1、減輕服務(wù)器的壓力
2、保證數(shù)據(jù)的可行性和安全性
5.驗(yàn)證的方法
1、placeholder表示這個(gè)表單元素期待用戶輸入什么信息，它是起提示作用，當(dāng)用戶輸入
內(nèi)容時(shí)，提示信息隱藏
2、required表示表單元素填寫內(nèi)容不能為空，使用了required的該表單元素必須填寫
3、pattern表示表單中的內(nèi)容必須和輸入的正則表達(dá)式一致
^表示正則表達(dá)式的開始
$表示正則表達(dá)式的結(jié)束
[]表示在中括號(hào)中任選其中一個(gè)
\d表示匹配0~9之間的任意一個(gè)數(shù)
{n}表示前面的一種匹配方式匹配的次數(shù)，表示匹配n次
-表示就是-
\w表示匹配所有字母或數(shù)字或下劃線
\u4E00-\u9FA5匹配漢字
{4,10}表示匹配前面的一種匹配方式4~10次
A-Z表示匹配大寫的英文字母
a-z表示匹配小寫的英文字母
|表示或者
四、初識(shí)CSS3
1.CSS:層疊樣式表，它是專門用來設(shè)計(jì)網(wǎng)頁風(fēng)格的
2.CSS的優(yōu)點(diǎn)
1、內(nèi)容與表現(xiàn)分離，便于網(wǎng)頁維護(hù)
2、網(wǎng)頁的表現(xiàn)統(tǒng)一，統(tǒng)一風(fēng)格
3、豐富的樣式，使得頁面布局更加靈活
4、減少網(wǎng)頁的代碼量，增加網(wǎng)頁的瀏覽速度
5、運(yùn)用獨(dú)立于頁面的CSS，有利于網(wǎng)頁被搜索引擎收錄
3.CSS樣式的語法
選擇器{
聲明(可以為1~n條)
屬性:屬性值;
}
選擇器：需要添加這些聲明的元素（標(biāo)簽）
聲明：由屬性和屬性值組成，中間用“:”,使用“;”結(jié)尾
4.在html中添加樣式的方式
1、行內(nèi)樣式
在需要添加樣式的標(biāo)簽中，添加一個(gè)style屬性，在style屬性中添加聲明
2、內(nèi)部樣式
在里面添加一個(gè),然后通過選擇器和聲明添加樣式
3、外部樣式
它可以實(shí)現(xiàn)表現(xiàn)與內(nèi)容的徹底分離，可以讓樣式表重復(fù)使用，便于維護(hù)和修改，并且
可以極大的減少代碼量
①鏈接外部樣式表
語法：
href表示引用的哪一個(gè)外部樣式表
rel表示使用的是樣式表
type表示文本類型為css類型
②導(dǎo)入外部樣式表
語法：@import url(“css/第一個(gè)外部樣式.css”);
區(qū)別：鏈接外部樣式表它是先將外部的CSS樣式添加到網(wǎng)頁中進(jìn)行加載，再加載網(wǎng)頁的
內(nèi)容，導(dǎo)入外部樣式表是先加載網(wǎng)頁中的內(nèi)容，再進(jìn)行外部樣式表的加載
樣式表的優(yōu)先級(jí)別
行內(nèi)樣式>內(nèi)部樣式>外部樣式，遵循“就近原則”
5.CSS3中的選擇器
一、基本選擇器
1、標(biāo)簽選擇器：以標(biāo)簽名稱作為選擇器的名稱
選擇所有網(wǎng)頁的該標(biāo)簽元素，比如：p表示選擇該網(wǎng)頁中所有的p標(biāo)簽
2、類選擇器：以類的名稱作為選擇器的名稱，并且在選擇器的名稱前加上“.”，類
名能夠重復(fù)使用
3、id選擇器：以id的名稱作為選擇器的名稱，并且在選擇器的名稱前加上“#”，id
名在該網(wǎng)頁只能出現(xiàn)一次，具有唯一性
選擇器的優(yōu)先級(jí)
id選擇器>類選擇器>標(biāo)簽選擇器
二、層次選擇器
1、后代選擇器
語法：E F{聲明}，E表示的是被匹配的元素，F(xiàn)表示被匹配的E的后代元素
比如：body p{},表示匹配所有body的后代p元素
2、子選擇器
語法：E>F{聲明}，E表示的是被匹配的元素，F(xiàn)表示被匹配的E的子元素
比如：body>p{},表示匹配所有body的子元素中的p元素
3、相鄰兄弟選擇器
語法：E+F{聲明}，E表示的是被匹配的元素，F(xiàn)表示被匹配的E的相鄰兄弟元素
比如：.p1+p{},表示匹配.p1的相鄰元素并且為p元素，只匹配后面的元素
4、通用兄弟選擇器
語法：E~F{聲明}，E表示的是被匹配的元素，F(xiàn)表示被匹配的E的所有兄弟元素
比如：.p1~p{},表示匹配.p1的所有兄弟元素并且為p元素，只匹配后面的
元素
三、結(jié)構(gòu)偽類選擇器
1、語法：E>F:first-child，E表示的是被匹配的元素，F(xiàn)表示被匹配的F:first-
child表示被匹配的E的子元素中第一個(gè)元素并且這個(gè)元素是F元素
2、語法：E>F:last-child，E表示的是被匹配的元素，F(xiàn)表示被匹配的F:last-
child表示被匹配的E的子元素中最后一個(gè)元素并且這個(gè)元素是F元素
3、語法：E>F:nth-child(n)，E表示的是被匹配的元素，F(xiàn)表示被匹配的F:nth-
child(n)表示被匹配的E的子元素中最后一個(gè)元素并且這個(gè)元素是F元素
even表示匹配所有偶數(shù)行
odd表示匹配所有奇數(shù)行
4、語法：E>F:nth-of-type(n)，E表示的是被匹配的元素，F(xiàn)表示被匹配的F:nth-
of-type(n)表示被匹配的E的子元素中所有的F元素，然后再去找第n個(gè)
E>F:nth-child(n)表示先匹配所有的兒子，再去找第幾個(gè)兒子是不是F元素，如果是
就能匹配，E>F:nth-of-type(n)先匹配所有F元素，再去找第幾個(gè)元素
四、屬性選擇器
1、E[attr],E表示匹配的E元素，attr表示屬性，匹配具有attr屬性的E元素
2、E[attr=val],匹配具有attr屬性，并且屬性值為val的E元素
3、E[attr^=val],匹配具有attr屬性，并且屬性值以val開頭的E元素
4、E[attr$=val],匹配具有attr屬性，并且屬性值以val結(jié)尾的E元素
5、E[attr*=val],匹配具有attr屬性，并且屬性值中包含val的E元素
六、CSS3美化網(wǎng)頁元素
前言：<span>這個(gè)標(biāo)簽沒有任何實(shí)際意義，它只是為了突出顯示某個(gè)部分，它是一個(gè)行內(nèi)元素，不能夠獨(dú)
占一行，并且該元素所占的區(qū)域是根據(jù)內(nèi)容大小決定，不會(huì)因?yàn)楦淖儗挾群透叨雀淖兯拇笮?/p>
<div>這個(gè)標(biāo)簽沒有任何實(shí)際意義,它只是為了將某些部分裝起來，它是一個(gè)塊元素，會(huì)獨(dú)占一行，
并且該元素所占的區(qū)域是根據(jù)它的寬度和高度決定，會(huì)因?yàn)楦淖儗挾群透叨雀淖兯拇笮?/p>
1.字體樣式：
1、font-family字體類型，字體類型的值有：“楷書”、“隸書”、“微軟雅黑”、英文字體
可以寫多個(gè)字體格式，使用“，”隔開，如果同時(shí)存在英文和中文字體，英文就顯示
英文字體，中文就顯示中文字體，并且英文字體要放在中文字體前面
2、font-size字體大小，就是改變字體大小，字體大小的單位使用px
3、font-style
字體風(fēng)格，normal正常的（默認(rèn)）、italic（傾斜的）、oblique（傾斜的）
4、font-weight字體粗細(xì)，bold（粗體）、bolder（更粗的）、lighter（細(xì)的）
font字體屬性，需要滿足字體屬性設(shè)置順序，風(fēng)格=》粗細(xì)=》大小=》類型
2.文本樣式：
1、color
文本顏色
①使用英文單詞去表示顏色
②使用十六進(jìn)制的方式表示，并且如果相鄰的兩兩數(shù)字相同，可以縮寫為一位
③使用三原色的方式去表示，語法：rgb(r,g,b)，rgba(r,g,b,a)
r,g,b取值從0~255
a表示透明度，取值從0~1,0表示完全透明，1表示完全不透明
2、text-align
水平對(duì)齊方式，設(shè)置文本的水平對(duì)齊方式
屬性值：center居中，left居左，right居右
3、vertical-align垂直對(duì)齊方式，設(shè)置文本的水平對(duì)齊方式
屬性值：middle居中，top居上，bottom居下
4、text-indent設(shè)置文本首行縮進(jìn)，屬性值一般使用em相對(duì)單位，em表示長度為文本字符
大小的長度
5、line-height設(shè)置文本行高，屬性值使用px為單位，還可以設(shè)置為倍數(shù)
6、text-decoration
文本裝飾
屬性值：①none表示沒有任何裝飾
②underline表示下劃線
③overline表示上劃線
④line-through表示刪除線
7、text-shadow文本陰影
語法：text-shadow : color x-offset y-offset blur-radius; color陰影顏色
x-offset表示X軸偏移量，正數(shù)往右偏移，負(fù)數(shù)往左偏移
y-offset表示Y軸偏移量，正數(shù)往下偏移，負(fù)數(shù)往上偏移 blur-radius表示模糊半徑
2.超鏈接偽類
1、a:link單擊訪問前的超鏈接樣式
2、a:visited單擊訪問后的超鏈接樣式
3、a:hover鼠標(biāo)懸浮的超鏈接樣式
4、a:active鼠標(biāo)單擊未釋放的超鏈接樣式
列表樣式
1、list-style-type表示設(shè)置列表的標(biāo)記類型
常用類型：none表示沒有標(biāo)記
disc表示實(shí)心圓點(diǎn)
square表示實(shí)心正方形
circle表示空心圓點(diǎn)
decimal表示數(shù)字
2、list-style-image使用圖像代替標(biāo)記
3、list-style-position表示在哪個(gè)位置使用標(biāo)記
4、list-style設(shè)置列表屬性，通常使用這個(gè)屬性
3.背景樣式
1、背景顏色background-color
①使用英文單詞去表示顏色
②使用十六進(jìn)制的方式表示，并且如果相鄰的兩兩數(shù)字相同，可以縮寫為一位
③使用三原色的方式去表示，語法：rgb(r,g,b)，rgba(r,g,b,a)
r,g,b取值從0~255
a表示透明度，取值從0~1,0表示完全透明，1表示完全不透明
有一個(gè)特殊值，transparent表示透明的意思，它是默認(rèn)值
2、背景圖片background-image
url表示的圖片路徑
3、背景重復(fù)方式background-repeat
repeat表示沿水平方向和垂直方向進(jìn)行重復(fù)
no-repeat表示不重復(fù)
repeat-x表示沿水平方向重復(fù)
repeat-y表示沿垂直方向重復(fù)
4、背景位移background-position：X軸方向偏移量 Y軸方向偏移量
①可以使用像素值來表示偏移量，比如：50px 50px;
②可以使用百分比來表示偏移量，比如：20% 50%;
③可以使用英文字母來表示偏移量，比如：center middle;
5、背景屬性設(shè)置所有的背景樣式
6、背景尺寸background-size
①auto表示背景圖片保持原樣，默認(rèn)值
②percentage表示背景圖片大小根據(jù)容器大小的百分比決定大小，只寫一個(gè)值表示只
對(duì)一個(gè)值進(jìn)行設(shè)置，另外一個(gè)值會(huì)根據(jù)圖片本身的比例等比例縮放
本身比例為4:3
400px 300px
800px 600px
1200px 900px
③直接使用像素值px來設(shè)置圖片大小，只設(shè)置一個(gè)值和百分比一樣
④cover放大充滿整個(gè)容器
⑤contain放大充滿整個(gè)容器，如果有一個(gè)方向充滿了整個(gè)容器，那么不在放大
4.漸變
1、線性漸變
：顏色沿著一條直線過渡
linear-gradient(漸變方向,顏色1，顏色2，顏色n)
不加前綴方向使用“to 方向”表示往哪個(gè)方向進(jìn)行漸變，加上前綴之后使用“方向”
表示從哪個(gè)方向開始漸變
2、徑向漸變：從一個(gè)起點(diǎn)朝所有方向混合
-radial-gradient(漸變方向,顏色1，顏色2，顏色n)
5.瀏覽器前綴：(避免兼容問題)
IE瀏覽器前綴-ms-
Chrome瀏覽器前綴-webkit-
Safiri瀏覽器前綴-webkit-
Opera瀏覽器前綴-o-
Firefox瀏覽器前綴-moz-
七、盒子模型
1.盒子模型：就是一個(gè)虛擬的矩形容器
2.盒子模型的組成：
1、content（內(nèi)容）：表示主要內(nèi)容
2、padding（內(nèi)邊距）：表示內(nèi)容與邊框之間的距離
3、border（邊框）：表示包著內(nèi)容的外框，邊框是有一定寬度的
4、margin（外邊距）：表示邊框外部與其他盒子的距離
3.邊框border
1、border-color邊框顏色
①使用英文字母來表示顏色
②使用十六進(jìn)制來表示顏色
③使用三原色來表示顏色，rgb(),rgba()
所有的塊元素都是一個(gè)盒子模型
border-top-color上邊框，border-bottom-color下邊框
border-left-color左邊框，border-right-color右邊框
※※※※※※※
可以使用border-color去設(shè)置，可以取1~4個(gè)值任意一個(gè)
如果設(shè)置一個(gè)值表示對(duì)應(yīng)所有的方向
如果設(shè)置兩個(gè)值，第一個(gè)值表示上邊框和它對(duì)應(yīng)邊框的值，第二個(gè)值表示右邊框和它
對(duì)應(yīng)的值
如果設(shè)置三個(gè)值，第一個(gè)值表示上邊框，第二個(gè)值表示右邊框和它對(duì)應(yīng)的值，第三個(gè)
表示下邊框的值
如果設(shè)置四個(gè)值，第一個(gè)值表示上邊框，第二個(gè)值表示右邊框，第三個(gè)值表示下邊框，
第四個(gè)值表示左邊框，按照順時(shí)針的順序依次設(shè)置
2、border-width邊框的粗細(xì)
使用像素值去設(shè)置邊框的粗細(xì)，網(wǎng)頁一般使用這種方式
設(shè)置邊框顏色的方式一樣
3、border-style邊框的樣式
none表示沒有邊框
solid表示實(shí)線邊框
dashed表示虛線邊框
dotted表示點(diǎn)線邊框
設(shè)置邊框樣式的方式和置邊框顏色的方式一樣
border邊框?qū)傩?/p>
可以設(shè)置邊框的所有屬性，不需要按照順序
border-left設(shè)置左邊框的屬性
border-right設(shè)置右邊框的屬性
border-bottom設(shè)置下邊框的屬性
border-top設(shè)置上邊框的屬性
外邊距margin
margin-top設(shè)置上外邊距的距離
margin-right設(shè)置右外邊距的距離
margin-bottom設(shè)置下外邊距的距離
margin-left設(shè)置左外邊距的距離
可以使用margin去設(shè)置，可以取1~4個(gè)值任意一個(gè)
和設(shè)置邊框顏色的方式一樣
使用margin設(shè)置盒子居中，語法：margin：0px auto;需要滿足兩個(gè)條件
①必須為塊元素
②必須設(shè)置盒子的寬度和高度
內(nèi)邊距padding
padding-top設(shè)置上內(nèi)邊距的距離
padding-right設(shè)置右內(nèi)邊距的距離
padding-bottom設(shè)置下內(nèi)邊距的距離
padding-left設(shè)置左內(nèi)邊距的距離
可以使用padding去設(shè)置，可以取1~4個(gè)值任意一個(gè)
和設(shè)置邊框顏色的方式一樣
4.盒子模型的尺寸
盒子模型的尺存分為盒子模型的寬度和高度
盒子模型的外盒寬度=內(nèi)容寬度+內(nèi)邊距的左右寬度+邊框左右寬度+外邊距左右寬度
盒子模型的外盒高度=內(nèi)容高度+內(nèi)邊距的上下高度+邊框上下高度+外邊距上下高度
盒子模型的內(nèi)盒寬度=內(nèi)容寬度+內(nèi)邊距的左右寬度+邊框左右度
盒子模型的內(nèi)盒高度=內(nèi)容高度+內(nèi)邊距的上下高度+邊框上下度
5.拯救布局
使用box-sizing拯救布局，有3個(gè)值
1、content-box：默認(rèn)值，表示設(shè)置的寬度和高度等于內(nèi)容的寬度和高度，盒子的寬度和
高度通過計(jì)算獲得
2、border-box：表示設(shè)置的寬度和高度等于盒子的寬度和高度
3、inherit：繼承父元素的盒子模型模式
6.圓角邊框border-radius：為矩形邊框設(shè)置圓角效果
語法：border-radius:可以設(shè)置1~4個(gè)值;
設(shè)置一個(gè)值會(huì)對(duì)四個(gè)角進(jìn)行設(shè)置
設(shè)置兩個(gè)值，第一個(gè)值設(shè)置左上角和它對(duì)角的值，第二值是設(shè)置右上角和它對(duì)角的值
設(shè)置三個(gè)值，第一個(gè)設(shè)置左上角，第二個(gè)設(shè)置右上角和它對(duì)角的值，第三個(gè)設(shè)置右下角的值
設(shè)置四個(gè)值，第一個(gè)設(shè)置左上角，第二個(gè)設(shè)置右上角，第三個(gè)設(shè)置右下角，第四個(gè)設(shè)置左下角
設(shè)置圓形
①必須盒子的寬度和高度相同
②圓角邊框的值必須將四個(gè)角的值都設(shè)置為寬度的一半或者50%
設(shè)置上半圓：寬度不變，高度變?yōu)橐话耄谝粋€(gè)值、第二值為一半，第三和第四個(gè)為0
設(shè)置下半圓：寬度不變，高度變?yōu)橐话?，第一個(gè)值、第二值為0，第三和第四個(gè)為一半
設(shè)置左半圓：寬度為一半，高度變不變，第一個(gè)值、第四值為一半，第二和第三個(gè)為0
設(shè)置左半圓：寬度為一半，高度變不變，第一個(gè)值、第四值為0，第二和第三個(gè)為一半
扇形：高度和寬度都為一半，需要哪一個(gè)方向的就添加哪個(gè)角的值，其他都為0
7.盒子陰影box-shadow
語法：box-shadow:inset x-offset y-offset blur-radius color;
第一個(gè)參數(shù)表示陰影的類型，不寫為外陰影，inset表示為內(nèi)陰影
第二個(gè)參數(shù)表示陰影的水平偏移量，正數(shù)往右，負(fù)數(shù)往左
第三個(gè)參數(shù)表示陰影的垂直偏移量，正數(shù)往下，負(fù)數(shù)往上
第四個(gè)參數(shù)為模糊半徑，模糊范圍大小，越往外越模糊
第五個(gè)參數(shù)為陰影顏色
八、塊元素與行內(nèi)（內(nèi)聯(lián)）元素
1.塊元素與行內(nèi)（內(nèi)聯(lián)）元素的特性
1、塊元素：獨(dú)占一行，并且可以設(shè)置元素的寬高(div,h1-h6,p,列表)
2、行內(nèi)元素：不是獨(dú)占一行，設(shè)置寬高對(duì)它不起作用，寬度由元素內(nèi)容撐開。
2.display:顯示（元素以哪種形式進(jìn)行顯示）
1、block：塊級(jí)元素的默認(rèn)值，在元素前后會(huì)有換行
2、inline:行內(nèi)元素的默認(rèn)值，元素前后沒有換行
3、inline-block:行內(nèi)塊元素，元素既有行內(nèi)元素的特性(可以和其他元素顯示在同一行)又有塊級(jí)元素的特性（可以設(shè)置寬高）。
4、none:該元素不被顯示。
3.float:浮動(dòng):使得塊級(jí)元素排列在同一行
1、left:左浮動(dòng)
2、right：右浮動(dòng)
3、none:元素不浮動(dòng)，按照標(biāo)準(zhǔn)文檔流顯示
4.clear：清除浮動(dòng)
1、left：清除元素左邊的浮動(dòng)
2、right:清除元素右邊的浮動(dòng)
3、both：清除兩側(cè)
4、none:默認(rèn)值，不清除浮動(dòng)
5.解決父級(jí)邊框塌陷的方法
1、在浮動(dòng)元素的后面加空div，并且給這個(gè)空div設(shè)置樣式：clear：both
2、給父級(jí)設(shè)置高度height
3、給父級(jí)添加屬性overflow:auto;
4、給父級(jí)添加偽類after
#father:after{
content:’’;
display:block;
clear:both
}
6.overflow:屬性用來處理溢出
1、visible:可見的，內(nèi)容元素會(huì)被顯示出來，但是在父級(jí)邊框的外面
2、hidden:內(nèi)容元素會(huì)被顯示在邊框里，但是超出的部分會(huì)被隱藏
3、scroll:內(nèi)容元素會(huì)被隱藏，但是瀏覽器會(huì)提供滾動(dòng)條，滾動(dòng)以顯示超出的內(nèi)容
4、auto:當(dāng)內(nèi)容元素超出父級(jí)的高度時(shí)就提供滾動(dòng)條以顯示超出的內(nèi)容，若內(nèi)容未超出就不顯示滾動(dòng)條。
九、定位與動(dòng)畫
1.定位屬性:position
1、static:默認(rèn)值，沒有定位
2、relative：相對(duì)定位，相對(duì)于元素原本的位置進(jìn)行偏移，元素原來的位置會(huì)被保留，浮動(dòng)元素設(shè)置相對(duì)定位后，是相對(duì)元素浮動(dòng)以后的位置進(jìn)行偏移。
3、absolute:絕對(duì)定位，相對(duì)于離元素最近的已經(jīng)設(shè)置定位屬性的祖先元素為基準(zhǔn)進(jìn)行偏移，元素原來的位置不會(huì)被保留，如果沒有已經(jīng)定位的祖先元素，則以瀏覽器窗口為基準(zhǔn)進(jìn)行偏移。
4、fixed：固定定位，以瀏覽器窗口為基準(zhǔn)進(jìn)行偏移。
5、定位的元素的層級(jí)會(huì)比未定位的元素的級(jí)別更高，相對(duì)定位通常用于給父元素設(shè)置定位屬性，但是不設(shè)置不偏移量，結(jié)合絕對(duì)定位使用，固定定位用于廣告欄，返回頂部的圖標(biāo)，樓層導(dǎo)航等。
6、z-index：改變定位元素的堆疊順序，值為整數(shù)，值越大，級(jí)別越高，顯示在最上面。
2.動(dòng)畫
1、變形
語法:transform:變形函數(shù);
2、平移函數(shù)：translate(x,y);x代表水平方向的位移，y代表垂直方向的位移，單位為px；
3、縮放函數(shù)：scale(x,y);x代表元素寬度的縮放量，y代表高度的縮放量。
4、傾斜函數(shù)：skew(x,y);x代表元素水平方向的傾斜度數(shù)，y代表垂直方向的傾斜度數(shù)，單位是deg。
5、旋轉(zhuǎn)函數(shù)：rotate(x);x代表旋轉(zhuǎn)的度數(shù)，為正數(shù)時(shí)順時(shí)針旋轉(zhuǎn)，為負(fù)數(shù)時(shí)逆時(shí)針旋轉(zhuǎn)。
2、過渡transition：是一種動(dòng)畫轉(zhuǎn)換過程，漸慢，漸快等。
語法：transition:過渡樣式的屬性 過渡花費(fèi)的時(shí)間 過渡函數(shù)(過渡的速度) 過渡的延遲時(shí)間；
1)使用步驟
A、在元素默認(rèn)樣式中聲明元素默認(rèn)的樣式
B、聲明元素最終呈現(xiàn)的樣式，如懸浮(hover)，獲取焦點(diǎn)(focus)時(shí)的樣式
C、在元素默認(rèn)的樣式中添加過渡屬性。
3、過渡函數(shù)：
1、ease：默認(rèn)值，由快到慢
2、linear:勻速
3、ease-in:越來越快
4、ease-out:越來越慢
5、ease-in-out:先越來越快再越來越慢
3.動(dòng)畫animation
1、創(chuàng)建關(guān)鍵幀(瀏覽器兼容前綴是加在@與keyframes中間的)
語法：@keyframes 動(dòng)畫名稱{
0%{元素樣式}
25%{元素樣式}
…
}
4.調(diào)用動(dòng)畫
在元素樣式中調(diào)用
語法：animation:動(dòng)畫名稱 動(dòng)畫次數(shù) 動(dòng)畫播放的方向 動(dòng)畫播放狀態(tài)
1)、動(dòng)畫播放次數(shù)：為整數(shù)，默認(rèn)值為1，無限循環(huán)infinite
2)動(dòng)畫發(fā)生的操作：forwards(向前) backwards（向后） both（既可以向前又可以向后）
3)動(dòng)畫播放狀態(tài)：running(播放) paused(暫停)
4)動(dòng)畫播放方向：normal（向前） alternate(偶數(shù)次向前)
者：Jiawei Pan
轉(zhuǎn)發(fā)鏈接：https://mp.weixin.qq.com/s/hDdF8rni6MX4U55l3DKLQw
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
