摘要：原文地址本篇文章是筆者的設(shè)計(jì)指南學(xué)習(xí)筆記的第二部分，由于最近都在準(zhǔn)備期末考的事，所以都沒來(lái)得及對(duì)設(shè)計(jì)指南進(jìn)行一些總結(jié)，沒有看之前第一部分的話也可以從這里傳送過去。

原文地址：http://justclear.github.io/css-stylin-with-css-note-2

本篇文章是筆者的 《CSS 設(shè)計(jì)指南》 學(xué)習(xí)筆記的第二部分，由于最近都在準(zhǔn)備期末考的事，所以都沒來(lái)得及對(duì) 《CSS 設(shè)計(jì)指南》 進(jìn)行一些總結(jié)，沒有看之前第一部分的話也可以從這里傳送過去。

其實(shí) HTML 頁(yè)面中每個(gè)元素其實(shí)都是一個(gè)「盒子」，默認(rèn)情況下這些盒子的邊框不可見，背景也是透明的，所以我們不能直接的看到頁(yè)面中盒子的結(jié)構(gòu)，但是我們可以借助一些 Web Developer 工具條可以方便地顯示盒子的邊框和背景，讓我們能很直觀的看到這些盒子的結(jié)構(gòu)。

每個(gè)盒子都有三組屬性：

外邊距(margin)： 可以設(shè)置盒子與相鄰盒子之間的距離。

邊框(border)： 可以設(shè)置邊框的寬度、樣式和顏色。

內(nèi)邊距(padding)：可以設(shè)置盒子內(nèi)容區(qū)和邊框之間的距離。

一個(gè)盒子有四條邊，所以這些屬性也各有四個(gè)屬性，分別是上(top)、右(right)、下(bottom)和左(left)，為了更直觀的了解盒模型的結(jié)構(gòu)，這里放上一張盒模型的結(jié)構(gòu)圖：

盡管這三組屬性共有 12 個(gè)屬性值，但我們也可以對(duì)它們進(jìn)行簡(jiǎn)寫，這里以 margin 為例：

margin-top:1px; 
margin-right:1px; 
margin-botton:1px; 
margin-left:1px;

縮寫后的代碼如下:

margin:1px 1px 1px 1px; 

縮寫的順序是上 -> 右 -> 下 -> 左，順時(shí)針的方向。相對(duì)的邊的值相同，則可以省掉，代碼如下:

margin:1px;// 四個(gè)方向的邊距相同，等同于margin:1px 1px 1px 1px; 
margin:1px 2px;// 上下邊距都為1px，左右邊距均為2px，等同于margin:1px 2px 1px 2px 
margin:1px 2px 3px;// 右邊距和左邊距相同，等同于margin:1px 2px 3px 2px; 
margin:1px 2px 1px 3px;// 注意，這里雖然上下邊距都為1px，但是這里不能縮寫。 

邊框(border)有四個(gè)相關(guān)屬性：

寬度(border-width)：可以使用 thin、 medium 和 thick 等文本值，也可以使用除百分比和負(fù)值以外的任何絕對(duì)值。

樣式(border-style)：有 none、 hidden、 dotted、 dashed、 solid、 double、 groove、 ridge、 inset 和 outset 等文本值。

顏色(border-color)：可以使用任何顏色值，包括 rgb、 hsl、十六進(jìn)制顏色值和顏色關(guān)鍵字。

圓角(border-radius)：屬于 CSS3 新增屬性，可使用百分比、相對(duì)值和絕對(duì)值。

CSS 推薦標(biāo)準(zhǔn)并沒有明確規(guī)定 border-width 的幾個(gè)文本值的確切寬度，所以實(shí)際寬度會(huì)因?yàn)g覽器而異。
border-radius 不影響盒子的定位。

內(nèi)邊距是盒子內(nèi)容區(qū)與盒子邊框之間的距離。在沒有設(shè)置內(nèi)邊距的情況下，內(nèi)容緊挨著邊框：

設(shè)置內(nèi)邊距后，內(nèi)容區(qū)與邊框有一定的距離(padding 的大小)：

與內(nèi)邊距和邊框相比，外邊距就要顯得復(fù)雜的多了，首先是外邊距疊加，垂直方向上的外邊距會(huì)疊加，例如有三個(gè)段落應(yīng)用了如下規(guī)則：

p {
    height:50px; 
    border:1px solid #000;
    background: #fff;
    margin-top: 50px;
    margin-bottom: 30px;
}

由于第一段的下邊距與第二段的上邊距相鄰，你可能會(huì)覺得它們兩個(gè)盒子邊框之間的外邊距只和是 80px，但實(shí)際上是 50px，像這樣上下外邊距相遇時(shí)，它們會(huì)相互重疊，直到一個(gè)外邊距碰到另一個(gè)盒子的邊框。就上面例子而言，第二段較寬的上外邊距會(huì)碰到第一段的邊框，也就是說較寬的外邊距決定兩個(gè)盒子之間的距離。

在設(shè)置段落文本外邊距時(shí)應(yīng)該注意，為了避免因增大字號(hào)導(dǎo)致段落間外邊距不變引起的整體不協(xié)調(diào)的問題，在設(shè)置段落的上下外邊距是應(yīng)該使用 em 單位，這樣當(dāng)字體大小調(diào)整時(shí)，段落的上下外邊距也會(huì)根據(jù)字體的大小來(lái)調(diào)整距離，這樣頁(yè)面的整體布局就會(huì)比較協(xié)調(diào)一致，而左右外邊距則可以用 px 絕對(duì)單位，確保左右外邊距不會(huì)因字體大小的調(diào)整而發(fā)生改變，比如可以這么設(shè)置：

p {
    font-size: 1em;
    margin: .75em 30px;
}

這樣段落垂直距離就會(huì)始終保持字體高度的四分之三的高度，水平外邊距不會(huì)因字體的調(diào)整而發(fā)生改變了。

作者在本章介紹了塊級(jí)元素和行內(nèi)元素的不同行為。

作者在這一節(jié)中專門提到了一個(gè) 「沒有寬度」的概念：沒有顯式地設(shè)置元素的 width 屬性。如果不設(shè)置塊級(jí)元素的 width 屬性，那么這個(gè)屬性的默認(rèn)值就是 auto ，結(jié)果就是會(huì)讓元素的寬度擴(kuò)展到與父元素同寬，對(duì)于塊級(jí)元素和行內(nèi)元素更具體的介紹請(qǐng)看筆者的上一篇文章CSS 設(shè)計(jì)指南 學(xué)習(xí)筆記 一。

盒模型結(jié)論一：

沒有設(shè)置寬度的元素始終會(huì)擴(kuò)展到填滿其父元素的寬度為止，添加水平外邊距、水平邊框和水平內(nèi)邊距都會(huì)導(dǎo)致內(nèi)容寬度的減少，減少量等于水平外邊距、水平邊框和水平內(nèi)邊距的和。

盒模型結(jié)論二：

為設(shè)定了寬度的盒子添加外邊距、邊框和內(nèi)邊距，會(huì)導(dǎo)致盒子擴(kuò)展的更寬，實(shí)際上，盒子的 width 屬性設(shè)定的只是盒子內(nèi)容區(qū)的寬度，而不是盒子要占據(jù)的( margin-left + border-left + padding-left + width + padding-right + border-right + margin-right )水平寬度。

所以一定要記住的是，給設(shè)定了 width 的元素添加外邊距、邊框和內(nèi)邊距所展示的行為與默認(rèn)的 auto 狀態(tài)下的行為會(huì)有截然不同的表現(xiàn)。

拓展：

但是與布局相關(guān)的元素大部分都同時(shí)設(shè)置了 margin、 border、 padding 和 width，這就導(dǎo)致了在布局時(shí)的各種計(jì)算保證總寬度( margin-left + border-left + padding-left + width + padding-right + border-right + margin-right )保持不變，這樣不僅麻煩，有的時(shí)候還比較容易出錯(cuò)，為了解決這一問題， CSS3 新增了一個(gè) box-sizing 屬性，通過它可以將設(shè)置了 width 的元素也設(shè)定成具有默認(rèn)的 auto 狀態(tài)下的行為。這樣就省去了許多計(jì)算 width 的時(shí)間，同時(shí)也不會(huì)出錯(cuò)，而且它的瀏覽器支持情況也是一片大好（ 除了 IE 6 和 IE 7 不支持，其他個(gè)別老版本的瀏覽器需要添加瀏覽器私有前綴才支持 ）。

可以這樣使用這個(gè)屬性：

* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

浮動(dòng)和清除是頁(yè)面布局的一大利劍，分別是 float 和 clear，浮動(dòng)可以讓原來(lái)上下堆疊的塊級(jí)元素變成左右并列，可以實(shí)現(xiàn)文字繞圖片排列效果。浮動(dòng)的元素會(huì)脫離常規(guī)的文檔流，原來(lái)緊跟其后的元素會(huì)在空間允許的情況下向上提升到與浮動(dòng)元素平起平坐。如果浮動(dòng)元素后面有兩個(gè)段落，而你只想讓第一段與浮動(dòng)元素并列（就算旁邊還能放下第二段，也不想讓它上來(lái)），就可以使用 clear 屬性清除浮動(dòng)。

浮動(dòng)元素脫離了文檔流，所以我們看不到包含它的父元素了，這種情況有時(shí)候并不是我們想要的，所以作者在本章介紹了如何圍住浮動(dòng)元素的三種方法。

方法一：為父元素添加 overflow: hidden; 強(qiáng)制它包圍浮動(dòng)元素。

這種方法在某些情況下也不適用，比如通過浮動(dòng)設(shè)置的水平排列的菜單，對(duì)其父元素設(shè)置 overflow: hidden; 后，盡管父元素圍住了它，但是如果菜單有下拉選項(xiàng)的話，當(dāng)鼠標(biāo)移動(dòng)到上面的時(shí)候下拉菜單并不會(huì)顯示，因?yàn)樵O(shè)置了 overflow: hidden;，所以超出父元素范圍的內(nèi)容都被隱藏掉了。

方法二：同時(shí)浮動(dòng)父元素

父元素設(shè)置浮動(dòng)后，不管其子元素是否是浮動(dòng)，父元素都會(huì)緊緊地包圍住它的子元素，因此需要用 width: 100%; 再讓父元素的寬度與瀏覽器容器同寬。同樣，盡管父元素圍住了它，但是這樣會(huì)導(dǎo)致頁(yè)面中出現(xiàn)大量的浮動(dòng)元素，而浮動(dòng)元素有往往不好控制，并不利于頁(yè)面的布局。

方法三：添加非浮動(dòng)的清除元素

第三種強(qiáng)制父元素包含其浮動(dòng)的子元素的方式就是給父元素的最后添加一個(gè)非浮動(dòng)的子元素，然后清除該子元素，因此父元素一定會(huì)包含這個(gè)子元素以及前面的浮動(dòng)元素：

// HTML

    
It"s fun to float
    



// CSS
p {
    float: left;
}
.clearfix {
    clear:both;
}

盡管這個(gè)方法能解決上面提到的兩種方法中的問題，但它還不是最好的方法，因?yàn)樗鼤?huì)在文檔中添加無(wú)意義的標(biāo)簽，這違反了標(biāo)簽語(yǔ)義化的規(guī)則，對(duì)搜索引擎并不友好。所以如果你要清楚浮動(dòng)但既不想浮動(dòng)父元素又不想對(duì)父元素設(shè)置 overflow: hidden; 也不想增加無(wú)意義的標(biāo)簽的話，可以使用偽元素來(lái)清除浮動(dòng)：

.clearfix::after {
    content: " ";
    display: table;
    clear: both;
}

然后在父元素中添加 clearfix 類，因?yàn)樗阉饕娌⒉粫?huì)抓取偽元素，所以這種方法并沒有增加無(wú)意義的標(biāo)簽，這里應(yīng)該注意的是，CSS3 標(biāo)準(zhǔn)是用兩個(gè)冒號(hào)來(lái)區(qū)別偽元素和偽類，而 CSS2.1 中不管是偽元素還是偽類都是用單個(gè)冒號(hào)表示，然而 IE8 并不支持雙冒號(hào)的偽元素，所以問題就來(lái)了，如果你要遵循 CSS3 的標(biāo)準(zhǔn)使用雙冒號(hào)的話就不兼容 IE8 了，如果使用但冒號(hào)的話又不符合 CSS3 標(biāo)準(zhǔn)規(guī)范，當(dāng)然現(xiàn)在大多數(shù)還是使用但冒號(hào)的，選擇哪種還是看個(gè)人的選擇。

CSS 布局的核心是 position 屬性，對(duì)元素應(yīng)用這個(gè)屬性可以相對(duì)于它在常規(guī)文檔流中的位置重新定位，position 屬性有 4 個(gè)值： static、 relative、 absolute 和 fixed。

靜態(tài)定位下的塊級(jí)元素會(huì)在默認(rèn)文檔流中上下堆疊，想要突破 static 定位提供的這種按順序布局元素的方式，就必須對(duì)元素的 position 屬性的值改為其他三個(gè)值。

所謂的相對(duì)定位就是相對(duì)于元素原來(lái)的位置（static 狀態(tài)下的位置）進(jìn)行定位，也就是說在不設(shè)置 top、 right、 bottom 或 left 的話，和它在默認(rèn)(static)情況下的表現(xiàn)是相同的，但是如果對(duì)它設(shè)置了 top、 right、 bottom 或 left 的話，就會(huì)相對(duì)與它默認(rèn)的位置進(jìn)行定位。相對(duì)定位的元素可以遮住靜態(tài)(static)定位的元素。可以給 top 和 left 屬性設(shè)定負(fù)值，把元素向上和向左移動(dòng)。

絕對(duì)定位跟靜態(tài)定位和相對(duì)定位是絕對(duì)不一樣的，靜態(tài)定位和相對(duì)定位并不會(huì)脫離文檔流，會(huì)占居原來(lái)的位置，而絕對(duì)定位會(huì)把元素徹底從文檔流中拿出來(lái)，然后再相對(duì)于其他元素（這里的其他元素指的是定位上下文，默認(rèn)是 body 元素）定位。

絕對(duì)定位的一個(gè)重要的概念就是定位上下文，把元素的 position 屬性設(shè)定為 relative、 absolute 或 fixed 后，繼而可以使用 top、 right、 bottom 和 left 屬性，相對(duì)于「另一個(gè)元素」移動(dòng)該元素的位置。這里的「另一個(gè)元素」就是該元素的定位上下文。

絕對(duì)定位的默認(rèn)定位上下文是 body，這是因?yàn)?body 是標(biāo)記中所有元素的唯一的祖先元素，而實(shí)際上，絕對(duì)定位元素的任何祖先元素都可以成為該絕對(duì)定位元素的定位上下文，只要把相應(yīng)的祖先元素的 position 屬性的值設(shè)定為 relative 即可。

從完全脫離文檔流的角度說，固定定位與絕對(duì)定位類似。但不同之處在于，固定定位的定位上下文是視口（瀏覽器窗口），因此它不會(huì)隨頁(yè)面的滾動(dòng)而移動(dòng)。最常見的情況是用它來(lái)創(chuàng)建不隨頁(yè)面滾動(dòng)而移動(dòng)的導(dǎo)航元素。

display 屬性的值很多，但常用的除了前面提到的控制塊級(jí)元素、行內(nèi)元素和行內(nèi)塊級(jí)元素的 block、 inline 和 inline-block 以外，還有一個(gè)比較常用的就是 none，把元素的 display 屬性的值設(shè)定為 none 后，該元素及所包含在其中的元素，都不會(huì)在頁(yè)面中顯示。他們?cè)葢?zhàn)局的所有空間都會(huì)被「回收」，就好像相關(guān)元素根本不存在一樣。

與此類似的屬性還有 visibility，這個(gè)屬性常用的兩個(gè)值是 visible(默認(rèn)值) 和 hidden，把元素的 visibility 屬性的值設(shè)定成 hidden ，元素會(huì)被隱藏，但它還會(huì)占據(jù)頁(yè)面中原來(lái)的空間位置。

筆者覺得有點(diǎn)類似定位中 absolute 和 relative 的感覺，就是 absolute 定位的元素的原來(lái)的位置會(huì)被「回收」（脫離文檔流），就好像元素根本不存在一樣（指的是原來(lái)占據(jù)的位置不存在一樣），relative 定位的元素還會(huì)占據(jù)頁(yè)面中原來(lái)的空間位置。

背景支持為元素添加背景顏色也背景圖片。

CSS 規(guī)定以下與背景相關(guān)屬性：

background-color: ; // 背景顏色
background-image: url(); // 背景圖片
background-repeat: ; // 背景重復(fù)
background-position: ; // 背景位置
background-size: ; // 背景尺寸 CSS3 新增屬性
background-attachment: ; // 背景粘附
background-clip: ; // 背景
background-origin: ; // 背景

background-position：關(guān)鍵字 px em 百分比；

用于控制背景位置的 background-position 屬性，是所有背景屬性中最復(fù)雜的。background-position 有 5 個(gè)關(guān)鍵字值： top、 right、 bottom、 left 或 center，這些關(guān)鍵字值任意兩個(gè)組合起來(lái)都可以作為該屬性的值。比如 top right 表示把圖片放在元素的右上角位置，center center 表示把圖片放在元素的中心位置。除了這些關(guān)鍵字值以外還可以用百分比、px 和 em 等單位。

拓展

要是只設(shè)置一個(gè)值，則將其用來(lái)設(shè)定水平位置，而垂直位置會(huì)被設(shè)為 center。

在使用關(guān)鍵字和百分比的情況下，情況有點(diǎn)特殊，設(shè)定的值會(huì)同時(shí)應(yīng)用于元素和圖片，也就是說，如果設(shè)定了 80% 20%，則圖片水平 80% 的位置與元素 33% 的位置對(duì)齊，垂直方向也一樣，如下圖：

其他單位數(shù)值就不一樣了，如果用像素單位來(lái)設(shè)定位置：

background-position: 80px 20px;

那么圖片的左上角會(huì)被放在距元素左邊 80px 上邊 20px 的地方。

background-size 是 CSS3 新增的屬性，但卻的到了瀏覽器很好的支持，這個(gè)屬性用來(lái)控制背景圖片的尺寸，可以給它設(shè)定的值及含義如下：

50%：縮放圖片，使其填充背景區(qū)的一半。

100px 50px：把圖片調(diào)整到 100px 寬，50px 高。

cover：拉大圖片，使其完全填滿背景區(qū)，并保持寬高比例。

contain：縮放圖片，使其恰好適應(yīng)整個(gè)背景區(qū)域，并保持寬高比例。

background-attachment 屬性控制滾動(dòng)元素內(nèi)的背景圖片是否隨元素滾動(dòng)而移動(dòng)，這個(gè)屬性默認(rèn)是 scroll，即背景圖片隨元素移動(dòng)，如果把它的值改為 fixed，那么背景圖片不會(huì)隨元素滾動(dòng)而移動(dòng)。

background:
    [background-color]
    [background-image]
    [background-repeat]
    [background-attachment]
    [background-position] / [ background-size]
    [background-origin]
    [background-clip];

聲明中少些了哪個(gè)屬性（比如沒寫 no-repeat），就會(huì)使用相應(yīng)屬性的默認(rèn)值（repeat）。

CSS3 新增的一些背景屬性：

background-clip：控制背景繪制區(qū)域的范圍，比如可以讓背景顏色和背景圖片只出現(xiàn)在內(nèi)容區(qū)，而不出現(xiàn)在內(nèi)邊距區(qū)域，默認(rèn)情況下背景繪制區(qū)域是擴(kuò)展到邊框外邊界的。

background-origin：控制背景定位區(qū)域的原點(diǎn)，可以設(shè)定為元素盒子左上角以外的位置。

background-break：控制分離元素（比如跨越多行的行內(nèi)元素盒子）的顯示效果。

background-size、 background-clip 和 background-origin 的瀏覽器支持情況還是挺不錯(cuò)的：

CSS3 還可以給元素背景條件多個(gè)背景圖片：

p {
    background-image:     url(img/1.png), 
                        url(img/2.png), 
                        url(img/3.png);
    background-position:20% 20%,
                        30px 50px,
                        center center;
    background-repeat:    repeat,
                        no-repeat,
                        repeat;
}

在 CSS 中，我們把每張圖片的聲明都多帶帶放在了一行，以逗號(hào)分隔，以便看清他們的位置、重復(fù)的設(shè)定值等等。要注意的是，代碼中先列出的圖片顯示在上方，或者說更接近前景，還有就是對(duì)每張背景圖設(shè)置重復(fù)或者位置的時(shí)候，也要用逗號(hào)一一對(duì)應(yīng)隔開。

漸變就是在一定長(zhǎng)度內(nèi)兩種或多種顏色之間自然過度。漸變分兩種，一種是線性漸變，一種是徑向漸變。線性漸變是從元素的一端延伸到另一端，徑向漸變則是從元素的一點(diǎn)向四周發(fā)散，下面來(lái)看一個(gè)簡(jiǎn)單的線性漸變例子：

// HTML




// CSS 
.gradient {
    width: 200px;
    height: 200px;
    margin: 0 20px;
}
/* 默認(rèn)為從上到下 */
.effect-1 {
    background: -webkit-linear-gradient(#45b29a, #fff);
    background:    -moz-linear-gradient(#45b29a, #fff);
    background:      -o-linear-gradient(#45b29a, #fff);
    background:         linear-gradient(#45b29a, #fff);
}
.effect-2 {
    background: -webkit-linear-gradient(left, #45b29a, #fff);
    background:    -moz-linear-gradient(left, #45b29a, #fff);
    background:      -o-linear-gradient(left, #45b29a, #fff);
    background:         linear-gradient(to right, #45b29a, #fff);
}
.effect-3 {
    background: -webkit-linear-gradient(45deg, #45b29a, #fff);
    background:    -moz-linear-gradient(45deg, #45b29a, #fff);
    background:      -o-linear-gradient(45deg, #45b29a, #fff);
    background:         linear-gradient(45deg, #45b29a, #fff);
}

上面展示了三種簡(jiǎn)單的漸變效果，默認(rèn)情況下漸變方向是從上到下的如圖一，例 2 起點(diǎn)關(guān)鍵字 left 意思是漸變方向從左到右，例 3 中的 45deg （順時(shí)鐘旋轉(zhuǎn) 45 度）相當(dāng)于把起點(diǎn)從默認(rèn)的中上設(shè)定到了又上。

3.6.11.1 漸變點(diǎn)

漸變點(diǎn)就是漸變方向上的點(diǎn)，可以在這些點(diǎn)上設(shè)定顏色和不透明度。可以添加任意多個(gè)漸變點(diǎn)：

// HTML





// CSS 
.gradient {
    width: 200px;
    height: 200px;
    margin: 0 20px;
}
/* 50% 處有一個(gè)漸變點(diǎn) */
.effect-1 {
    background: -webkit-linear-gradient(#45b29a, #fff 50%, #45b29a);
    background:    -moz-linear-gradient(#45b29a, #fff 50%, #45b29a);
    background:      -o-linear-gradient(#45b29a, #fff 50%, #45b29a);
    background:         linear-gradient(#45b29a, #fff 50%, #45b29a);
}
/* 20% 和 80%處有一個(gè)漸變點(diǎn) */
.effect-2 {
    background: -webkit-linear-gradient(#45b29a 20%, #fff 50%, #45b29a 80%);
    background:    -moz-linear-gradient(#45b29a 20%, #fff 50%, #45b29a 80%);
    background:      -o-linear-gradient(#45b29a 20%, #fff 50%, #45b29a 80%);
    background:         linear-gradient(#45b29a 20%, #fff 50%, #45b29a 80%);
}
/* 25%、50% 和 75% 處有一個(gè)漸變點(diǎn) */
.effect-3 {
    background: -webkit-linear-gradient(#45b29a, #fff 25%, #45b29a 50%, #fff 75%, #45b29a);
    background:    -moz-linear-gradient(#45b29a, #fff 25%, #45b29a 50%, #fff 75%, #45b29a);
    background:      -o-linear-gradient(#45b29a, #fff 25%, #45b29a 50%, #fff 75%, #45b29a);
    background:         linear-gradient(#45b29a, #fff 25%, #45b29a 50%, #fff 75%, #45b29a);
}
/* 為同一個(gè)漸變點(diǎn)設(shè)定兩種顏色可以的到突變的效果 */
.effect-4 {
    background: -webkit-linear-gradient(#45b29a, #fff 25%, #45b29a 25%%, #45b29a 75%, #fff 75%, #45b29a);
    background:    -moz-linear-gradient(#45b29a, #fff 25%, #45b29a 25%%, #45b29a 75%, #fff 75%, #45b29a);
    background:      -o-linear-gradient(#45b29a, #fff 25%, #45b29a 25%%, #45b29a 75%, #fff 75%, #45b29a);
    background:         linear-gradient(#45b29a, #fff 25%, #45b29a 25%%, #45b29a 75%, #fff 75%, #45b29a);
}

例 1，如果不是使用百分比或其他值聲明漸變點(diǎn)的位置，三種顏色會(huì)均勻分布于整個(gè)漸變。

例 2，演示了起點(diǎn)和終點(diǎn)不是 0% 和 100% 時(shí)的情形。此時(shí)，在第一個(gè)漸變點(diǎn)(20%)之前，是第一個(gè)漸變點(diǎn)聲明的實(shí)色，而在該點(diǎn)之后，則是從該顏色到下一個(gè)漸變點(diǎn)顏色的過度。同樣，在最后一個(gè)漸變點(diǎn)(80%)之后，該漸變點(diǎn)的顏色會(huì)以實(shí)色擴(kuò)展到元素結(jié)束。

例 3，簡(jiǎn)單展示了相同顏色在幾個(gè)漸變點(diǎn)之間變來(lái)變?nèi)サ男Ч?/p>

例 4，展示了在同一個(gè)漸變點(diǎn)聲明兩種不同顏色，能實(shí)現(xiàn)一種突變的效果。

3.6.11.2 徑向漸變

在創(chuàng)建徑向漸變的時(shí)候，可以使用參數(shù)指定形狀、位置、尺寸、顏色和不透明度：

// HTML




// CSS 
.gradient {
    width: 300px;
    height: 200px;
    margin: 0 20px;
}
.effect-1 {
    background: -webkit-radial-gradient(#fff, #45b29a);
    background:    -moz-radial-gradient(#fff, #45b29a);
    background:      -o-radial-gradient(#fff, #45b29a);
    background:         radial-gradient(#fff, #45b29a);
}
.effect-2 {
    background: -webkit-radial-gradient(circle, #fff, #45b29a);
    background:    -moz-radial-gradient(circle, #fff, #45b29a);
    background:      -o-radial-gradient(circle, #fff, #45b29a);
    background:         radial-gradient(circle, #fff, #45b29a);
}
.effect-3 {
    background: -webkit-radial-gradient(50px 30px, circle, #fff, #45b29a);
    background:    -moz-radial-gradient(50px 30px, circle, #fff, #45b29a);
    background:      -o-radial-gradient(50px 30px, circle, #fff, #45b29a);
    background:         radial-gradient(50px 30px, circle, #fff, #45b29a);
}

例 1，展示了默認(rèn)的漸變形狀，即漸變效果會(huì)填充元素，這里是矩形，如果元素是正方形，那漸變就是圓形：

例 2，設(shè)定了關(guān)鍵字 circle，于是漸變形狀變得均勻，并在元素最近的邊達(dá)到終點(diǎn)，形成了圓形漸變。而長(zhǎng)邊剩下的區(qū)域則填充了終點(diǎn)的顏色。

例 3，位置參數(shù) 50px 30px 把漸變的圓心放到了靠近左上角的位置。

本章的內(nèi)容不少，都是一些很重要的概念，比如盒模型、定位元素、浮動(dòng)與清除浮動(dòng)和元素背景屬性。

到目前為止，也對(duì) 《CSS 設(shè)計(jì)指南》 的重點(diǎn)知識(shí)進(jìn)行了總結(jié)，當(dāng)然可能有些地方總結(jié)的不夠好，如有不對(duì)的地方歡迎指出和討論急。