走的越遠你就越會發現
真正能在危難之時拉你一把的人
只有你自己

前段時間跟家裏打視頻電話
每每看到家人關懷的目光以及她們逐漸蒼老的面龐
就不忍心再對他們言哭言累
有時午夜輾轉反側腦海裏一想到他們
就會想自己最近渾渾噩噩的狀態是不是真的挺對不起他們的

5.1_盒子模型概述

5.1.1_認識盒子模型

所謂盒子模型就是把 HTML 頁面中的元素看作是一個矩形的盒子，也就是一個盛裝內容的容器。每個矩形都由元素的內容、內邊距、邊框和外邊框組成。

<!doctype html> 
<html>
<head>
<meta charset="utf-8">
<title>認識盒子模型</title>
<style type="text/css">

.box {
    
    
width: 200px;           /*盒子模型的寬度*/ 
height: 50px;           /*盒子模型的高度*/ 
border: 15px solid red; /*盒子模型的邊框*/ 
background: #CCC;       /*盒子模型的背景顏色*/ 
padding: 30pх;        /*盒子模型的內邊距*/ 
margin: 20px;           /*盒子模型的外邊距*/ 
}

</style> 
</head> 
<body> 

<p class="box">盒子中包含的內容</p>

</body> 
</html>

內邊距出現在內容區域的周圍，當給元素添加背景色或背景圖像時，該元素的背景色或背景圖像也將出現在內邊距中，外邊距是該元素與相鄰元素之間的距離，如果給元素定義邊框屬性，邊框將出現在內邊距和外邊距之間。

5.1.2_< div> 標記

div 是英文 division 的縮寫，意爲“分割、區域”。

< div> 標記簡單而言就是一個區塊容器標記，可以將網頁分割爲獨立的、不同的部分，以實現網頁的規劃和佈局。
< div> 與 < /div> 間相當於一個“盒子”，可以設置外邊距、內邊距、寬和高，同時內部可以容納段落、標題，表格、圖像等各種網頁元素，也就是說大多數 HTML 標記都可以嵌套在 < div> 標記中，< div> 中還可以嵌套多層 < div>。

案例：

 <!doctype html>
 <html> 
 <head> 
 <meta charset="utf-8"/> 
 <title>div標記</title> 
 <style type="text/css"> 
 
 .one {
    
     
 width: 450px;          /*設置寬度*/ 
 height: 30px;          /*設置高度*/  
 line-height: 30px;     /*設置行高*/ 
 background: #FCC;      /*設置背景顏色*/ 
 font-size: 18px;       /*設置字體大小*/ 
 font-weight: bold;     /*設置字體加粗*/ 
 text-align: center;    /*設置文本水平居中對齊*/
 }
 
 .two {
    
    
 width: 450px;      /*設置寬度*/
 height: 100px;     /*設置高度*/
 background: #0F0;  /*設置背景顏色*/
 font-size: 14px;   /*設置字體大小*/
 text-indent: 2em;  /*設置首行文本縮進*/
 }
 
 </style>
 </head>
 <body>
 
 <div class="one">
 用div標記設置的標題文本
 </div>
 <div class="two">
 <p>div標記中嵌套的P標記中的文本</p>
 </div>
 
 </body>
 </html>

注意：

(1) < div> 標記最大的意義在於和浮動屬性 float 配合，實現網頁的佈局，這就是常說的 div + css 網頁佈局。之後會詳細講解。
(2) < div> 可以替代塊級元素如 < h>、< p> 等，但是它們在語義上有一定的區別。
_
例如，< div> 和 < h2> 的不同在於 < h2> 具有特殊的含義，語義較重，代表着標題，而 < div> 是一個通用的塊級，主要用於佈局。

5.2_盒子模型相關屬性

5.2.1_邊框屬性

設置內容	樣式屬性	常用屬性值
邊框樣式	border-style:上邊 [ 右邊下邊左邊 ];	none無(默認)、solid單實線、dashed虛線、dotted點線、double雙實線
邊框寬度	border-width:上邊 [ 右邊下邊左邊 ];	像素值
邊框顏色	border-color: 上邊[ 右邊下邊左邊 ];	顏色值、#十六進制、rgb(r,g,b)、rgb(r%,g%,b%)
綜合設置邊框	border:四邊寬度四邊樣式四邊顏色;
圓角邊框	border-radius:水平半徑參數/垂直半徑參數;	像素值或百分比
圖片邊框	border-images:圖片路徑裁切方式/邊框寬度/邊框擴展距離重複方式;

1. 邊框樣式( border-style )

在 CSS 屬性中，border-style 屬性用於設置邊框樣式。其基本語法格式:

border-style: 上邊 [右邊 下邊 左邊];

在設置邊框樣式時既可以針對四條邊分別設置，也可以綜合設置四條邊的樣式。

border-style 屬性的常用屬性值有4個：

● solid: 邊框爲單實線。

● dashed: 邊框爲虛線。

● dotted: 邊框爲點線。

● double: 邊框爲雙實線。

使用 border-style 屬性綜合設置四邊樣式時，必須按上右下左的順時針順序，省略時採用值複製的原則，即一個值爲四邊，兩個值爲上下/左右，三個值爲上/左右/下。

案例： < p> 只有上邊爲虛線(dashed)，其他三邊爲單實線( solid )，可以使用 ( border-style ) 綜合屬性分別設置各邊樣式:

p {
   
   
border-style: dashed solid solid solid;
}

案例: 對邊框樣式屬性進行演示，

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>設置邊框樣式</title>
<style type="text/css">
/*新建HTML頁面，並在頁面中添加標題和段落文本，然後通過邊框樣式屬性控制標題和段落的邊框效果*/

h2 {
    
    
border-style: double;
} /*4條邊框相同一雙實線*/

.one {
    
    
border-style: dotted solid;
} /*上下爲點線, 左右爲單實線*/

.two {
    
    
border-style: solid dotted dashed;
} /*上實線、左右點線、下虛線*/

</style>
</head>
<body>

<h2>邊框樣式一雙實線</h2>
<p class="one">邊框樣式一 上下爲點線左右爲單實線</p>
<p class="two">邊框樣式一 上邊框單實線、左右點線、下邊框虛線</P> 

</body>
</html>

注意，由於兼容性的問題，在不同的瀏覽器中點線 dotted 和虛線 dashed 的顯示樣式可能會略有差異。

2. 邊框寬度( border-width )

border- width 屬性用於設置邊框的寬度，其基本語法格式:

border-width: 上邊 [右邊 下邊 左邊];

在上面的語法格式中，border- width 屬性常用取值單位爲像素px。並且同樣遵循值複製的原則，其屬性值可以設置1 ~ 4個，即一個值爲四邊，兩個值爲上下/左右，三個值爲上/左右/下，四個值爲上/右/下/左。

案例:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>設置邊框寬度</title>
<style type="text/css">

.one {
    
    
border-width: 2px;
}

.two {
    
    
border-width: 3px 1px;
}

.three {
    
    
border-width: 3px 1px 2px;
}

</style>
</head>
<body>

<p class="one">邊框寬度 2px。 邊框樣式 單實線。</p>
<P class="two">邊框寬度 上下3px,左右1px。 邊框樣式 單實線。</p>
<P class="three">邊框寬度 上3px， 左右1px，下2px。邊框樣式單實線。</p>

</body>
</html>

上述代碼運行後，段落文本並沒有顯示預期的邊框效果。這是因爲在設置邊框寬度時，必須同時設置邊框樣式，如果未設置樣式或設置爲 none，則不論寬度設置爲多少都沒有效果。

在上述的CSS代碼中，爲< p>標記添加邊框樣式，代碼爲:

p {
   
   
border-style: solid;
} /*綜合設置邊框樣式*/

3. 邊框顏色( border-color )

border-color 屬性用於設置邊框的顏色，其基本語法格式:

border-color: 上邊 [右邊 下邊 左邊];

在上面的語法格式中，border-color的屬性值可爲預定義的顏色值、十六進制#RRGGBB(最常用)或RGB代碼r,g,b)。 border-color 的屬性值同樣可以設置爲1個、2個、3個、4個，遵循值複製的原則。

案例：設置段落的邊框樣式爲實線，上下邊灰色，左右邊紅色，

p {
   
   
border-style: solid;       /*綜合設置邊框樣式*/
border-color: #CCC #FF0000;/*設置邊框顏色:上下灰色、左右紅色*/
}

值得一提的是，在 CSS3 中對邊框顏色屬性進行了增強，運用該屬性可以製作漸變等絢麗的邊框效果。CSS 在原邊框顏色屬性( border-color )的基礎上派生了 4 個邊框顏色屬性。

border-top-color
border-right-color
border-bottom-color
border-left-color

上面的 4 個邊框屬性的屬性值同樣可爲預定義的顏色值、十六進制 #RRGGBB 或 RGB 代碼 rgb(r，g，b)。

案例：

p {
   
   
border-style: solid;
border-width: 10px;
border-top-color: #FFA500;
border-right-color: #87CEEB;
border-bottom-color: aliceblue;
border-left-color: #FF0000;
}

<p>阿ken</p>

注意:

設置邊框屬性時必須設置邊框樣式，如果未設置樣式或設置爲none，則其他的邊框屬性無效。

4. 綜合設置邊框 ( border )

使用 border-style、border-width、border-color 雖然可以實現豐富的邊框效果，但是這種方法書寫的代碼繁瑣，且不便於閱讀，爲此CSS提供了更簡單的邊框設置方式，其基本格式：

border: 寬度width 樣式style 顏色color;

上面的設置方式中，寬度、樣式、顏色的順序不分前後，可以只指定需要設置的屬性，省略的部分將取默認值(樣式不能省略)。

當每一側的邊框樣式都不相同，或者只需單獨定義某一側的邊框時，可以使用單側邊框的綜合屬性 border-top 、border-bottom、border-left 或 border-right 進行設置。

案例：單獨定義段落的上邊框，

p {
   
   
border-top: 2px solid #CCC;
} /*定義上邊框，各個值順序任意*/

<p>阿ken</p>

案例：將二級標題的邊框沒置爲雙實線、紅色、3像素寬，

h2 {
   
   
border: 3px double red;
}

<h2>阿ken</h2>

像border、border-top等，能夠一個屬性定義元素的多種樣式，在CSS中稱之爲複合屬性。
常用的複合屬性有 font、border、margin、padding和background等。
實際工作中常使用複合屬性，它可以簡化代碼，提高頁面的運行速度。

案例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>綜合設置邊框</title>
<style type="text/css">

h2 {
    
    
border-top: 3px dashed #F00;  /*單側複合屬性設置各邊框*/
border-right: 10px double #900;
border-bottom: 5px double #FF6600;
border-left: 10px solid green;
}

.pingmian{
    
    
border: 15px solid #FF6600;
} /*border複合屬性設置各邊框相同*/

</style>
</head>
<body>

<h2>綜合設置邊框</h2>
<img class="pingmian" src="....填一個" alt="網頁平面設計" /> 

</body>
</html>

上述代碼中，首先使用邊框的單側複合屬性設置二級標題，使其各側邊框顯示不同樣式，然後使用複合屬性 border，爲圖像設置四條相同的邊框。

5. 圓角邊框( border-radius )

在網頁設計中，經常需要設置圓角邊框，運用 CSS3 中的 border-radius 屬性可以將矩形邊框圓角化，其基本語法格式:

border-radius: 參數1/參數2;

在上面的語法格式中，border-radius 的屬性值包含2個參數，它們的取值可以爲像素值或百分比。其中“參數1”表示圓角的水平半徑，“參數2”表示圓角的垂直半徑，兩個參數之間用“/”隔開。

案例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>圓角邊框</title>
<style type="text/css">

img{
    
    
border: 8px solid #6C9024;
border-radius: 100px/50px;/*設置水平半徑爲100像素，垂直半徑爲50像素*/
}

</style>
</head>
<body>

<img class="yuanjiao" 
src="https://img-blog.csdnimg.cn/20201011123716531.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tlbmtlbl8=,size_16,color_FFFFFF,t_70#pic_center)" 
alt="圓角邊框" />

</body>
</html>

上述代碼中，設置圖片圓角邊框的水平半徑爲100px，垂直半徑爲50px。
運行後：

需要注意的是，在使用border-radius屬性時，如果第二個參數省略，則會默認等於第一個參數。

將上述代碼第9行代碼替換爲:

border-radius: 50px; /*設置圓角半徑爲50像素*/

運行後：

圓角邊框四角弧度相同，這是因爲未定義“參數2”(垂直半徑)時，系統會將其取值設定爲“參數1”(水平半徑)。
值得一提的是，border- radius 屬性同樣遵循值複製的原則，其水平半徑(參數1)和垂直半徑(參數2)均可以設置 1 ~ 4 個參數值，用來表示四角圓角半徑的大小，具體解釋如下：

● 參數 1 和參數 2 設置一個參數值時，表示四角的圓角半徑。

● 參數1和參數2設置兩個參數值時，第一個參數值代表左上圓角半徑和右下圓角半徑，第二個參數值代表右上和左下圓角半徑，具體示例代碼如下：

img{
   
   
border-radius: 50px 20px/30px 60px;
}

在上面的示例代碼中設置圖像左上和右下圓角水平半徑爲50px, 垂直半徑爲30px, 右上和左下圓角水平半徑爲20px, 垂直半徑爲60px。

運行後：

● 參數1和參數2設置三個參數值時，第一個參數值代表左上圓角半徑，第二個參數值代表右上和左下圓角半徑，第三個參數值代表右下圓角半徑，具體示例代碼如下：

img{
   
   
border-radius: 50px 20px 10px/30px 40px 60px;
}

在上面的示例代碼中設置圖像左上圓角的水平半徑爲50px，垂直半徑爲30px，右上和左下圓角水平半徑爲20px，垂直半徑爲40px，右下四角的水平半徑爲10px，垂直半徑爲60px。

● 參數1和參數2設置四個參數值時，第一個參數值代表左上圓角半徑，第二個參數值代表右上圓角半徑，第三個參數值代表右下圓角半徑，第四個參數值代表左下圓角半徑，

img{
   
   
border-radius: 50px 30px 20px 10px/50px 30px 20px 10px;
}

在上面的示例代碼中設置圖像左上圓角的水平垂直半經均爲 50px，右上圓角的水平和垂直半徑均爲 30px，右下圓角的水平和垂直半徑均爲 20px，左下圓角的水平和垂直半徑均爲 10px。

運行後：

注意：如“參數 2”省略，則會默認等於“參數 1“的參數值。此時圓角的水平半徑和垂直半徑相等。

案例：設置4個參數值，

img{
   
   
border-radius: 50px 30px 20px 10px/50px 30px 20px 10px;
}

可以簡寫爲:

img{
   
    
border-radius: 50px 30px 20px 10px;
}

6. 圖片邊框( border-image )

在網頁設計中，有時需要對區域整體添加一個圖片邊框，運用 CSS3 中的 border-image 屬性可以輕鬆實現這個效果。border-image 屬性是一個簡寫屬性，用於設置 border-image-source、border-image-slice 、border-image-width、border-image-outset 以及 border-image-repeat 等屬性，其基本語法格式：

border-image: border-image-source border-image-slice/border-image-width/border-image-outset border-image-repeat;

border-image 各屬性說明：

屬性	說明
border-image-source	指定圖片的路徑
border-image-slice	指定邊框圖像頂部、右側、底部、左側內偏移量
border-image-width	指定邊框寬度
border-image-ouset	指定邊框背景向盒子外部延伸的距離
border-image-repeat	指定背景圖片的平鋪方式

案例：

<!doctype html>
<head>
<meta charset="utf-8">
<title>圖片邊框</title>
<style type="text/css">

div {
    
    
width: 300px;
height: 300px;
}

div {
    
    
width: 300px;
height: 300px;
border-style: solid;      /*第十行代碼*/

border-image-source:
url(https://img-blog.csdnimg.cn/20201011174631808.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tlbmtlbl8=,size_16,color_FFFFFF,t_70#pic_center); 
/*設置邊框圖片路徑 或者改成border-image-source:url(./1.png); */

border-image-slice: 33%; /*邊框圖像項部、右側、底部、左側內偏移量*/
border-width: 200px;  /*設置邊框寬度*/
border-image-outset: 0;/*設置邊框圖像區域超出邊框量*/   /*第十四行代碼*/
border-image-repeat: repeat;/*設置圖片平鋪方式*/
}

</style>
</head>
<body>

<div></div>

</body>
</html>

 當返回上一級目錄時，用../

素材圖：

運行後：

如果尺寸不夠，則按照指定的方式自動填充。

修改上述第十四行代碼，將填充方式改爲“拉伸填充”，具體代碼:

border-image-repeat: stretch;  /*設置圖片填充方式*/

圖案邊框也可以進行綜合設置。
修改上述第10~14行代碼：

border-image: url(images/images.jpg) 33%/200px repeat;

在上面的示例代碼中，“33%”表示邊框的內偏移，“41px"表示邊框的寬度，二者要用“/”隔開。

5.2.2_邊距屬性

CSS的邊距屬性包括“內邊距”和“外邊距”兩種。

1. 內邊距

在網頁設計中，爲了調整內容在盒子中的顯示位置，常需要給元素設置內邊距，所謂內邊距指的是元素內容與邊框之間的距離，也常常稱爲內填充，在 CSS 中 padding 屬性用於設置內邊距，同邊框屬性 border 一樣，padding 也是複合屬性，其相關設置方法如下:
● padding-top: 上內邊距;

● padding-right : 右內邊距;

● padding-bottom : 下內邊距;

● padding-left : 左內邊距:

● padding : 上內邊距 [ 右內邊距下內邊距左內邊距 ]。

在上面的設置中，padding 相關屬性的取值可爲 auto 自動(默認值)、不同單位的數值相對於父元素(或瀏覽器)寬度的百分比(%)，實際工作中最常用的是像素值(px)，不允許使用負值。

同邊框相關屬性一樣，使用複合屬性 padding 定義內邊距時，必頂按順時針順序採用值複製，一個值爲四邊、兩個值爲上下/左右，三個值爲上/左右/下。

案例:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>設置內邊距</title>
<style type="text/css">

.border {
    
    
border: 5px solid #F60;
} /*爲圖像和段落設置邊框*/

img {
    
    
padding: 80px;/*圖像4個方向內邊距相同*/
padding-bottom: 0;/*單獨設置下內邊距*/
}   /*上面兩行代碼等價於 padding:80px 80px 0;*/

p{
    
    
padding: 5%;
}  /*段落內邊距爲父元素寬度的5%*/ 

</style>
</head>
<body>

<img class="border" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3660691301,837491451&fm=26&gp=0.jpg" alt="阿ken"/>
<p class="border">段落內邊距爲父元素寬度的5%。</p>

</body>
</html>

由於段落的內邊距設置了%數值，當拖動瀏覽器窗口改其寬度時，段落的內邊距會隨之發生變化(此時< p>標記的父元素爲< body>)。

注意:

如果設置內外邊距爲百分比，則不論上下或左右的內外邊距，都是相對於父元素寬度 width 的百分比，隨父元素 width 的變化而變化，和高度 height 無關。

2. 外邊距

網頁是由多個盒子排列而成的，要想拉開盒子與盒於之間的距離，合理地佈局網頁，就需要爲盒子設置外邊距，所謂外邊距指的是元素邊框與相鄰元素之間的距離。在 CSS 中 margin 屬性用於設置外邊距，它是一個複合屬性，與內邊距 padding 的用法類似，設置外邊距的方法如下：

● margin-top: 上外邊距;

● margin-right: 右外邊距;

● margin-bottom: 下外邊距;

● margin-left: 左外邊距;

● margin: 上外邊距 [右外邊距下外邊距左外邊距] 。

margin 相關屬性的值，以及複合屬性 margin 取 1 ~ 4 個值的情況與 padding 相同。但是外邊距可以使用負值，使相鄰元素重疊。

當對塊級元素應用寬度屬性width，並將左右的外邊距都設置爲 auto ,可使塊級元素水平居中，實際工作中常用這種方式進行網頁佈局，示例代碼如下：

.header{
   
   
width: 960px;
margin: 0 auto;
}

案例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>設置外邊距</title>
<style type="text/css">

img{
    
    
width: 300px;
border: 5px solid red;
float: left; /*設置圖像左浮動*/
margin-right: 50px; /*設置圖像的右外邊距*/
margin-left: 30px;  /*設置圖像的左外邊距*/
/*上面兩行代碼等價於margin: 0 50px 0 30px;*/
}

p{
    
    
text-indent: 2em;
}

</style>
</head>
<body>

<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1471480362,870954799&fm=26&gp=0.jpg" alt="我是阿ken"/>
<p>你好，我是阿ken</p>

</body>
</html>

使用浮動屬性float使圖像居左，同時設置圖像的左外邊距和右外邊距，使圖像和文本之間拉開一定的距離，實現常見的排版效果(對於浮動，這裏瞭解即可，後面章節將會詳細介紹)。

圖像和段落文本之間拉開了一定的距離，實現了圖文混排的效果。但是仔細觀察效果圖會發現，瀏覽器邊界與網頁內容之間也存在一定的距離，然而我們並沒有對< p>或< body>元素應用內邊距或外邊距，可見這些元素默認就存在內邊距和外邊距樣式。網頁中默認就存在內外邊距的元素有< body>、< h1>~< h6>、 < p>等。

爲了更方便地控制網頁中的元素，製作網頁時，可使用如下代碼清除元素的默認內外邊距：

*{
   
   
padding: 0; /*清除內邊距*/
margin: 0;  /*清除外邊距*/
}

清除元素默認內邊距和外邊距樣式後，瀏覽器邊界與網頁內容之間的距離消失。

5.2.3_box-shadow屬性

在網頁製作中，經常需要對盒子添加陰影效果。CSS 中的box-shadow屬性可以實現陰影的添加。

其基本語法格式：

box-shadow: 像素值1 像素值2 像素值3 像素值4 顏色值 陰影類型;

在上面的語法格式中，box-shadow 屬性共包含6個參數值。

box-shadow 屬性參數值：

參數值	說明
像素值1	表示元素水平陰影位置，可以爲負值(必選屬性)
像素值2	表示元素垂直陰影位置，可以爲負值(必選屬性)
像素值3	陰影模糊半徑(可選屬性)
像素值4	陰影擴展半徑，不能爲負值(可選屬性)
顏色值	陰影顏色(可選屬性)
陰影類型	內陰影 ( inset ) /外陰影 (默認) (可選屬性)

其中“像素值1”、“像素值2”爲必選參數值不可以省略，其餘爲可選參數值，不設置”陰影類型“參數時默認爲”外陰影“，設置”inset“參數值後，陰影類型變爲內陰影。

案例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>box-shadow屬性</tit1e>
<style type="text/css">

img{
    
    
padding: 20px;
border-radius: 50%;
border: 1px solid #CCC;
box-shadow: 5px 5px 10px 2px #999 inset;
}

</style>
</head>
<body>

<img class="border" src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1172960894,4133724990&fm=26&gp=0.jpg" alt="阿ken"/>

</body>
</html>

代碼定義了一個水平位置和垂直位置均爲5px，模糊半徑爲10px，擴展半徑爲2px的淺灰色內陰影。

圖片出現了內陰影效果。值得一提的是，同 text-shadow 屬性(文字陰影屬性)一樣，box-shadow 屬性也可以改變陰影的投射方向及添加多重陰影效果。

示例代碼如下：

box-shadow: 5px 5px 10px 2px #999 inset, -5px -5px 10px 2px #333 inset;

5.2.4_box-sizing 屬性

當一個盒子的總寬度確定之後，要想給盒子添加邊框或內邊距，往往需要更改 width 屬性值，才能保證盒子總寬度不變，操作起來煩瑣且容易出錯，運用CSS3的box-sizing 屬性可以輕鬆解決這個問題。box-sizing 屬性用於定義盒子的寬度值和高度值是否包含元素的內邊距和邊框。

其基本語法格式：

box-sizing: content-box/border-box;

在上面的語法格式中，box-sizing 屬性的取值可以爲 content-box 或 border-box 。

對它們的解釋如下：

● content-box: 瀏覽器對盒模型的解釋遵從 W3C 標準，當定義 width 和 height 時，它的參數值不包括 border 和 padding 。

● border-box: 當定義 width 和 height 時，border 和 padding 的參數值被包含在 width 和 height 之內。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>box-sizing</title>
<style type="text/css">

.box1{
    
    
width: 300px;
height: 100px;
padding-right: 10px;
background: #F90;
border: 10px solid #CCC;
box-sizing: content-box;
}

.box2{
    
    
width: 300px;
height: 100px;
padding-right: 10px;
background: #F90;
border: 10px solid #CCC;
box-sizing: border-box;
}

</style>
</head>
<body>

<div class="box1">content_box屬性</div>
<div class="box2">border_box屬性</div>

</body>
</html>

在上述代碼中定義了兩個盒子，並對它們設置相同的寬、高、右內邊距和邊框樣式。並且，對第一個盒子定義 “ box-sizing: content-box; ” 樣式，對第二個盒子定義 “ box-sizing: border-box; ” 樣式。

應用了 “ box-sizing: content-box; ” 樣式的盒子1，寬度比 width 參數值多出 30px，總寬度爲 330px；而應用了 “ box-sizing: border-box; ” 樣式的盒子2，寬度等於 width 參數值，總寬度仍爲 300px。

可見應用 “ box-sizing: border-box; ” 樣式後，盒子border 和padding的參數值是被包含在width和height之內的。

5.3_背景屬性

5.3.1_設置背景顏色( background-color )

在CSS中，使用 background-color 屬性來設置網頁元素的背景顏色，其屬性值與文本顏色的取值一樣，可使用預定義的顏色值、十六進制#RRGGBB或RGB代碼rgb(r,g,b)。
background-color的默認值爲transparent,即背景透明，此時子元素會顯示其父元素的背景。

案例:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>設置背景顏色</title>
<style type="text/css">

body{
    
    
background-color: #CCC;
}/*設置網頁的背景顏色*/

h2{
    
    
font-family: "微軟雅黑";
color: #FFF;
background-color: #FC3;
}/*設置標題的背景顏色*/

</style>
</head>
<body>

<h2>你好</h2>
<p>我是阿ken</p>

</body>
</html>

上述代碼運行後，標題文本的背景顏色爲黃色，段落文本顯示父元素 body 的背景顏色。這是由於未對段落標記< p>設置背景顏色時，會默認爲透明背景( transparent )，所以段落將顯示其父元素的背景顏色。

5.3.2_設置背景圖像( background-image )

背景不僅可以設置爲某種顏色，還可以將圖像作爲元素的背景。在 CSS 中通過 background-image 屬性設置背景圖像。

案例：

body{
   
   
background-color: #CCC; /*設置網頁的背景顏色*/
background-image: url(#); /*設置網頁的背景圖像*/
}

<p>阿ken</p>

上述代碼運行後，容易看出，背景圖像自動沿着水平和豎直兩個方向平鋪，充滿整個頁面，並且覆蓋了< body> 的背景顏色。

5.3.3_背景與圖片不透明度的設置

1. RGBA模式

RGBA是 CSS3 新增的顏色模式，它是 RGB 顏色模式的延伸，該模式是在紅、綠、藍三原色的基礎上添加了不透明度參數。其語法格式:

rgba(r, g, b, alpha);

在上面的語法格式中，前三個參數與 RGB 中的參數含義相同，alpha 參數是一個介於 0.0 ( 完全透明 ) 和 1.0 ( 完全不透明 ) 之間的數字。

案例：

p {
   
   
background-color: rgba(255, 0, 0, 0.5);
}/*RGBA模式爲p元素指定透明度爲0.5，顏色爲紅色的背景*/

<p>阿ken</p>

2. opacity屬性

在 CSS3 中，使用 opacity 屬性能夠使任何元素呈現出透明效果。其語法格式:

opacity: opacityValue;

在上述語法中，opacity 屬性用於定義元素的不透明度，參數 opacityVaule 表示不透明度的值，它是一個介於 0 ~ 1 的浮點數值。其中，0 表示完全透明，1 表示完全不透明，而 0.5 則表示半透明。

案例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>opacity屬性設置圖像的透明度</title>
<style type="text/css">

#boxwrap {
    
    
width: 330px; 
margin: 10px auto; 
border: solid 1px #FF6666;
}

img:first-child {
    
    
opacity: 1;
}

img:nth-child(2) {
    
    
opacity: 0.8;
}

img:nth-child(3) {
    
    
opacity: 0.5;
}

img:nth-child(4) {
    
    
opacity: 0.2;
}

</style>
</head>
<body>

<div id="boxwrap">
<img src="#" width="160" height="109">
<img src="#" width="160" height="109">
<img src="#" width="160" height="109">
<img src="#" width="160" height="109">
</div>

</body>
</html>

上述代碼通過使用 opacity 屬性爲同一張圖片設置了不同的透明度，且 opacityVaule 依次減小。

opacityValue 的值越小表示透明度越高。

5.3.4_設置背景圖像平鋪( background-repeat )

默認情況下，背景圖像會自動沿着水平和豎直兩個方向平鋪，如果不希望圖像平鋪，或者只沿着一個方向平鋪，可以通過 background-repeat 屬性來控制。

該屬性的取值如下：

repeat: 沿水平和豎直兩個方向平鋪(默認值)。
no-repeat: 不平鋪(圖像位於元素的左上角，只顯示一個)。
repeat-x: 只沿水平方向平鋪。
repeat-y: 只沿豎直方向平鋪。

如果將背景圖像的平鋪屬性 background-repeat 定義爲 no-repeat，圖像將默認以元素的左上角爲基準點顯示。

案例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>設置背景圖像的位置</title>
<style type="text/css">

body {
    
    
background-image: url(#); /*設置網頁的背景圖像*/
background-repeat: no-repeat; /*設置背景圖像不平鋪*/
}

</style>
</head>
<body>

<h2> ———— 王蒙《人生即燃燒》</h2>
<p>“即使生活還相當艱難，愛情還隱隱約約，</p>
<p>學習還道路方長，社會還明明暗暗，</p>
<p>人間還有許多不平，你也要投入，也要盡力盡情盡興盡一切可能，</p>
<p>努力去爭取一切可以爭取到也應該爭取到的，以使你能夠得到智慧和光明，得到成績和價值。”</p>

</body>
<html>

將主體元素 < body> 的背景圖像定義爲 no-repeat 不平鋪。在瀏覽器中運行，背景圖像位於 HTML 頁面的左上角，即 < body> 元素的左上角。

5.3.5_設置背景圖像的位置( background-position )

如果希望背景圖像出現在其他位置，就需要另一個 CSS 屬性 background-position，設置背景圖像的位置。

案例，將上述案例中的背景圖像定義在頁面的右上角，可以更改 body 元素的 CSS 樣式代碼:

body{
   
   
background-image: url(#); /*設置網頁的背景圖像*/
background-repeat: no-repeat;/*設置背景圖像不平鋪*/
background-position: right top;/*設置背景圖像的位置*/

/*背景圖像出現在頁面的右上角*/
}

在 CSS 中，background-position 屬性的值通常設置爲兩個，中間用空格隔開，用於定義背景圖像在元素的水平和垂直方向的座標，如上面的 " right top " 。background-position 屬性的默認值爲 “ 0.0 ” 或 " left top ”，即背景圖像位於元素的左上角。

background-position 屬性的取值有多種，具體如下：

(1) 使用不同單位 ( 最常用的是像素px ) 的數值: 直接設置圖像左上角在元素中的座標。如 " background-position: 20px 20px; " 。
(2) 使用預定義的關鍵字: 指定背景圖像在元素中的對齊方式。
● 水平方向值: left、center、right。
● 垂直方向值: top、center、bottom。
兩個關鍵字的順序任意，若只有一個值則另一個默認爲center。
_
例如:
center 相當於center center(居中顯示)。
_
top 相當於center top (水平居中、上對齊)。
(3) 使用百分比: 按背景圖像和元素的指定點對齊。
_
● 0% 0% 表示圖像左上角與元素的左上角對齊。
_
● 50% 50% 表示圖像50% 50% 中心點與元素50% 50%的中心點對齊。
_
● 20% 30% 表示圖像20% 30% 的點與元素20% 30%的點對齊。
_
● 100% 100% 表示圖像右下角與元素的右下角對齊，而不是圖像充滿元素。
_
如果只有一個百分數，將作爲水平值，垂直值則默認爲50%。

接下來將 backgound poiton 的值定義爲像素值來控制上述案例代碼中背景圖像的位置，body 元素的 CSS 樣式代碼如下：

body {
   
   
background-image:url(images/wdjl.jpg); /*設置網頁的背景圖像*/
background-repeat:no-repeat;/*設置背景圖像不平鋪*/
background-position:50px 80px;/*用像素值控制背景圖像的位置*/
}

運行後，圖像距離 body 元素的左邊緣爲 50px，距離上邊緣爲 80px。

5.3.6_設置背景圖像固定( background-attachment )

當網頁中的內容較多時，在網頁中設置的背景圖像會隨着頁面滾動條的移動而移動。

如果希望背景圖像固定在屏幕的某一位置，不隨着滾動條移動，可以使用 background-attachment 屬性來設置。

background-attachment 屬性有兩個屬性值:

scroll: 圖像隨頁面元素一起滾動 (默認值)。
fixed: 圖像固定在屏幕上，不隨頁面元素滾動。

下面來控制例上述案例代碼中的背景圖像，使其固定在屏幕上，body 元素的 CSS 樣式代碼如下：

body {
   
   
background-image: url(#); /*設置網頁的背景圖像*/
background-repeat: no-repeat;/*設置背景圖像不平鋪*/
background-position: 50px 80px;/*用像素值控制背景圖像的位置*/
background-attachment: fixed; /*設置背景圖像的位置固定*/
}

無論如何拖動瀏覽器的滾動條、背景圖像的位置都固定不變。

5.3.7_設置背景圖像的大小( background-size )

在 CSS3 中，background-size 屬性用於控制背景圖像的大小，其基本語法格式如下：

background-size:屬性值1 屬性值2;

在上面的語法格式中，backgroud-size 屬性可以設置一個或兩個值定義背景圖像，其中屬性值1爲必選屬性值，屬性值2爲可選屬性值。屬性值可以是像素值、百分比、"cover"或"contain"關鍵字。

background-size 屬性值：

屬性值	說明
像素值	設置背景圖像的高度和寬度。第一個值設置寬度，第二個值設置高度。如果只設置一個值，則第二個值會默認爲auto
百分比	以父元素的百分比來設置背景圖像的寬度和高度。第一個值設置寬度，第二個值設置高度。如果只設置一個值，則第個值會默認爲 auto
cover	把背景圖像擴展至足夠大，使背景圖像完全覆蓋背景區域。背景圖像的某些部分也許無法顯示在背景定位區域中
contain	把圖像擴展至最大尺寸，以使其寬度和高度完全適應內容區域

案例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>設置背景圖像的大小</title>
<style type="text/css">

div{
    
    
width: 300px;
height: 300px;
border: 3px solid #666;
margin: 0 auto;
background-color: #FCC;
background-image: url(images/JL.png);
background-repeat: no-repeat;
background-position: center center;
}

</style>
</head>
<body>

<div>300px的盒子</div>

</body>
</html>

上述代碼中定義了一個寬高均爲 300px 的盒子，井爲其填充一個居中顯示的背景圖片。背景圖片居中顯示。

運用 background-size 屬性可以對圖片的大小進行控制，爲 div 添加 CSS 樣式代碼，具體如下：

background-size: 100px 200px;

運行後容易看出，背景圖片被不成比例縮小，如果想要等比例控制圖片大小，可以只設置一個屬性值。

5.3.8_設置背景的顯示區域( background-origin )

在默認情況下，background-position 屬性總是以元素左上角爲座標原點定位背景圖像，運用 CSS3 中的background-origin 屬性可以改變這種定位方式，自行定義背景圖像的相對位置，其基本語法格式如下：

background-origin: 屬性值;

在上面的語法格式中，background-origin 屬性有 3 種取值，分別表示不同的含義，具體解釋如下：

padding-box: 背景圖像相對於內邊距區域來定位。
border-box: 背景圖像相對於邊框來定位。
content-box: 背景圖像相對於內容來定位。

案例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>設置背景圖像的顯示區域</title>
<style type="text/css">

p{
    
    
width: 300px;
height: 200px;
border: 8px solid #bbb;
padding: 40px;
background-image: url(#);
background-repeat: no-repeat;
}

</style>
</head>
<body>

<p>中國的夜，攜帶了衆多的須你準制在臨溪石徑，若說，人生在世，爲何商悲，問星展， 卻是那樓心事，六分深理，三分佈塵埃，一分寓高着下心中構樓:低雙人生長路漫漫，看世間百態， 煙花易冷，只有利那芳華，紅塵過往，萬載糾結，亦喜、亦悲。</p>

</body>
</html>

背景圖片在元素區域的左上角顯示。此時對段落文本添加 background-orign 屬性可以改變背景圖像的位置。

例如使背景圖像相對於文本內容來定位，CSS 代碼如下:

background-origin: content-box; /*背景圖像相對文本內容定位*/

5.3.9_設置背景圖像的裁剪區域( background-clip )

在CSS樣式中，background-clip 屬性用於定義背景圖像的裁剪區域，其基本語法格式：

background-clip: 屬性值;

在語法格式上，background-clip 屬性和 background-origin 屬性的取值相似，但含義不同，具體解釋如下：

border-box: 默認值，從邊框區域向外裁剪背景。
padding-box: 從內邊距區域向外裁剪背景。
content-box: 從內容區域向外裁剪背景。

案例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>設置背景圖像的裁剪區域</title>
<style type="text/css">

p{
    
    
width: 300px;
height: 150px;
border: 8px dotted #666;
padding: 40px;
background-color: #CF9; // 爲段落文本<p>定義淺綠色的背景色。
background-repeat: no-repeat;
}

</style>
</head>
<body>

<p>深邃的夜， 攜帶了衆多的瑣碎徘徊在臨溪石徑。若說，人生在世，縱然莫過於可悲了。蒼天有淚，爲何而悲，問星辰，卻是那一縷心事，六分深埋，三分寄塵埃， 一分薄酒難平心中惆悵!低嘆人生長路漫漫，看世間百態，煙花易冷，只有剎那芳華。紅塵過往，萬載糾結，亦喜、亦悲。</p>

</body>
</html>

運行後易看出，背景顏色鋪滿了包括邊框和內邊距在在內的整個區域。
這時如果想要綠色背景只鋪滿文字部分，就需要設置背景圖像的裁剪區域，爲段落文本< p>添加如下所示的樣式代碼：

background-clip: content-box/*從內容區域向外裁剪背景*/

5.3.10_設置多重背景圖像

在 CSS3 之前的版本中，一個容器只能填充一張背景圖片，如果重複設置，後設置的背景圖片將覆蓋之前的背景。CSS3 中增強了背景圖像的功能，允許一個容器裏顯示多個背景圖像。使背景圖像效果更容易控制。但是 CSS3 中並沒有爲實現多背景圖片提供對應的屬性，而是通過 background-image、background-repeat、background-position和background-size等屬性提供多個屬性值來實現多重背景圖像效果，各屬性值之間用逗號隔開。

案例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>設置背景圖像的裁切位置</title>
<style type="text/css">

div{
    
    
width: 300px;
height: 300px;
border: lpx dotted #999;
background-image:
url(#),
url(#),
url(#);
background-repeat:no-repeat;
background-position:bottom,right top,center;
}

</style>
</head>
<body>

<div>設置多重背景圖像</div>

</body>
</html>

首先通過background-image 屬性定義了3張背景圖，然後設置背景圖的平鋪方式爲“no-repeat”，最後通過background-position 屬性分別設置3張背景圖片的位置。其中"bottom"等價於"bottom center“用於設置草地的位置，”right top“用於設置太陽的位置，"center”等價於“center center"用於設置天空的位置。

5.3.11_背景複合屬性( background )

同邊框屬性一樣，在 CSS 中背景屬性也是一個複合屬性，可以將背景相關的樣式都綜合定義在一個複合屬性 background 中。使用 background 屬性綜合設置背景樣式的語注法格式如下:

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

在上面的語法格式中，各個樣式順序任意，對於不需要的樣式可以省略。

案例:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>背景複合屬性</title>
<style type="text/css">

div{
    
    
width:200px;
height:200px;
border:5px dashed #B5FFFF;
padding:25px;
background:#B5FFFF url(#) no-repeat left bottom padding-box;
}

</style>
</head>
<body>

<div>走過紅塵的紛擾，彈落靈魂沾染的塵埃，攜攜抹談淡的情懷。</div>

</body>
</html>

運用背景複合屬性爲 div 定義了背景顏色、背景圖片、圖像平鋪方式、背景圖像位置及裁剪區域等多個屬性。

多學一招: 使用背景圖像屬性定義列表樣式

list-style 是一個複合屬性，用於控制列表項目符號的樣式。在實際網頁製作過程中，爲了更高效地控制列表項目符號，通常將 list-style 的屬性值定義爲 none , 然後通過爲< li>設置背景圖像的方式實現不同的列表項目符號。

案例:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>背景屬性定義列表項目符號</title>.
<style type="text/css">

li{
    
    
list-style:none;/*清除列表的默認樣式*/
height:26px;
line-height:26px;
background:url(images/book.png) no-repeat left center; /*爲li設置背景圖像*/
padding-left:25px;
}

</style>
</head>
<body>

<h2>傳智播客學科</h2>
<ul>
<li>網頁平面</li>
<li>Java</li>
<li>PHP</li>
<li>.NET</li>
</u1>

</body>
</html>

定義了一個無序列表，其中第8行代碼通過"list-style:none;"清除列表的默認顯示樣式，第11行代碼通過爲< li>設置背景圖像的方式來定義列表項目符號。
每個列表項前都添加了列表項目圖像，如果需要調整列表項目圖像只需更改< li>的背景樣式即可。

5.4_CSS3漸變屬性

CSS3 的漸變屬性主要包括線性漸變和徑向漸變。

5.4.1_線性漸變

在線性漸變過程中，起始顏色會沿着一條直線按順序過渡到結束顏色。
運用CSS3中的"background-image: linear-gradient (參數值);"樣式可以實現線性漸變效果，其基本語法格式如下:

background-image: linear-gradient (浙變角度, 顏色值1, 顏色值2..., 顏色值n);

在上面的語法格式中，Iinear-gradient 用於定義漸變方式爲線性漸變，括號內用於設定漸變角度和顏色值，具體解釋如下：

漸變角度
_
漸變角度指水平線和漸變線之間的夾角，可以是以 deg 爲單位的角度數值或“to"加"left” ”right“ ”top“ ”bottom“等關鍵詞。在使用角度設定漸變起點的時候，odeg 對應“to top"，90deg對應“to right", 1800deg對應“to bottom", 270deg對應"to left"，整個過程是以 bottom 爲起點順時針旋轉。
_
當未設置漸變角度時，會默認爲"180deg" 等同於"to bottom”。
顏色值
_
顏色值用於設置漸變顏色，其中“顏色值1”表示起始顏色，“顏色值n”表示結束顏色，起始顏色和結束顏色之間可以添加多個顏色值，各顏色值之間用"，"隔開。
_
案例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>線性漸變</title>
<style type="text/ess">

div{
    
    
width:200px;
height:200px;
background-image:linear-gradient(30deg,#0f0,#00F);
}
/*爲 div 定義了一個漸變角度爲 30deg、綠色(#0f0)到藍色(#00f)的線性漸變。*/

</style>
</head>
<body>

<div></div>

</body>
</html>

上述代碼實現了綠色到藍色的線性漸變。值得一提的是，在每一個顏色值後面還可出寫一個百分比數值，用於標示顏色漸變的位置，具體示例代碼如下:

background-image;linear-gradient (30deg,#0f0 50%,#00F 80%);

在上面的示例代碼中，可以看做綠色( #0f0)由50%的位置開始出現漸變至藍色(#00F) 位於80%的位置結束漸變。可以用 Photoshop 中的漸變色塊進行類比。

5.4.2_徑向漸變

徑向漸變是網頁中另一種常用的漸變，在徑向漸變過程中，起始顏色會從一箇中心點開始，依據橢圓或圓形形狀進行擴張漸變。
運用CSS3中的“background-image:radial-gradient(參數值);”樣式可以實現徑向漸變效果，其基本語法格式如下:

background-image: radial-gradient(漸變形狀圓心位置, 顏色值1, 顏色值2..., 顏色值n);

在上面的語法格式中，radial-gadient 用於定義漸變的方式爲徑向漸變，括號內的參數值用於設定漸變形狀、圓心位置和顏色值。

對各參數的具體介紹如下：

漸變形狀
_
漸變形狀用來定義徑向漸變的形狀，其取值既可以是定義水平和垂直半徑的像素值或百分比，也可以是相應的關鍵詞。其中關鍵詞主要包括兩個值“circle" 和ellipse"。
_
具體解釋如下：
_
● 像素值/百分比: 用於定義形狀的水平和垂直半徑，如“80px 50px" 表示一個水平半徑爲80px,垂直半徑爲50px的橢圓形。
_
● circle: 指定圓形的徑向漸變。
_
● ellipse: 指定橢圓形的徑向漸變。
圓心位置
_
**圓心位置用於確定元素漸變的中心位置，使用“at"加上關鍵詞或參數值來定義徑向漸變的中心位置。該屬性值類似於CSS中background- position 屬性值，如果省略則默認爲“center"。**該屬性值主要有以下幾種：
_
● 像素值/百分比: 用於定義圓心的水平和垂直座標，可以爲負值。
_
● left: 設置左邊爲徑向漸變圓心的橫座標值。
_
● center: 設置中間爲徑向漸變圓心的橫座標值或縱座標。
_
● right: 設置右邊爲徑向漸變圓心的橫座標值。
_
● top: 設置頂部爲徑向漸心的縱標值。
_
● bottom: 設置底部爲徑向漸變圓心的縱標值。
顏色值
_
“顏色值1”表示起始顏色，“顏色值n”表示結束顏色，起始顏色和結束顏色之間可以添加多個顏色值，各顏色值之間用“,”隔開。
_
案例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>徑向漸變</title>
<style type="text/css">

div{
    
    
width:200px;
height:200px;
border-radius:50%;/*設置圓角邊框*/
background-image:radial-gradient(ellipse at center, #Of0,#030);/*設置徑向漸變*/
}

</style>
</head>
<body>

<div></div>

</body>
</html>

爲div定義了一個漸變形狀爲橢圓形，徑向漸變位置在容器中心點，綠色(##0f0)到深綠色(##030)的徑向漸變;同時使用"border-radius" 屬性將容器的邊框設置爲圓角。

值得一提的是，同“線性漸變”類似，在“徑向漸變”的顏色值後面也可以書寫一個百分比數值，用於設置漸變的位置。

5.4.3_重複漸變

在網頁設計中，經常會遇到在一個背景上重複應用漸變模式的情況，這時就需要使用重複漸變。重複漸變包括重複線性漸變和重複徑向漸變，具體解釋如下：

1. 重複線性漸變

_
在CSS3中，**通過"background-image：repeating-Iinear-gradient (參數值);"樣式可以實現重複線性漸變的效果，**共基本語法格式如下：

background-image: repeating-linear-gradient(漸變角度, 顏色值1, 顏色值2..., 顏色值n);

在上面的語法格式中，"repeating-linear-gradient(參數值)"用於定義漸變方式爲重複線性漸變，括號內的參數取值和線性漸變相同，分別用於定義漸變角度和顏色值。

案例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>重複線性漸變</title>
<style type="text/css">

div{
    
    
width:200px;
height:200px;
background image: repeating-linear-gradient(90deg,#E50743,#E8ED30 10%,#3FA62E 15%);
}

</style>
</head>
<body>

<div></div>

</body>
</html>

爲div定義了一個漸變角度爲 90deg，紅黃綠三色的重複線性漸變。

2. 重複徑向漸變

_
在 CSS3 中，通過"background-image: repeating-radial-gradient(參數值);"樣式可以實現重複線性漸變的效果，其基本語法格式如下:

background-image: repeating-radial-gradient(漸變形狀 圓心位置, 顏色值1, 顏色值2..., 顏色值n);

在上面的語法格式中，"repeating-radial-gradient(參數值)”用於定義漸變方式爲爲重複徑向改變，括號內的參數取值和徑向漸變相同，分別用於定義漸變形狀、圓心位置和顏色值。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>重複徑向漸變</tit1e>
<style type="text/css">

div{
    
    
width:200px;
height:200px;
border-radius:50%;
background-image:repeating-radial-gradient(circle at 50% 50%,
#E50743, #E8ED30 10%,#3FA62E 15%);
}

</style>
</head>
<body>

<div></div>

</body>
</html>

爲div定義了一個個漸變形狀爲圓形，徑向漸變位置在容器中心點，紅、黃、綠三色徑向漸變。

不要總被奇奇怪怪的東西拖下水
很多時候你應該保持清醒
自己是爲何而戰

謝謝光臨
我是阿ken

一篇博文教會你學習CSS盒子模型（五）

5.1_盒子模型概述

5.1.1_認識盒子模型

5.1.2_< div> 標記

5.2_盒子模型相關屬性

5.2.1_邊框屬性

1. 邊框樣式( border-style )

2. 邊框寬度( border-width )

3. 邊框顏色( border-color )

4. 綜合設置邊框 ( border )

5. 圓角邊框( border-radius )

6. 圖片邊框( border-image )

5.2.2_邊距屬性

1. 內邊距

2. 外邊距

5.2.3_box-shadow屬性

5.2.4_box-sizing 屬性

5.3_背景屬性

5.3.1_設置背景顏色( background-color )

5.3.2_設置背景圖像( background-image )

5.3.3_背景與圖片不透明度的設置

1. RGBA模式

2. opacity屬性

5.3.4_設置背景圖像平鋪( background-repeat )

5.3.5_設置背景圖像的位置( background-position )

5.3.6_設置背景圖像固定( background-attachment )

5.3.7_設置背景圖像的大小( background-size )

5.3.8_設置背景的顯示區域( background-origin )

5.3.9_設置背景圖像的裁剪區域( background-clip )

5.3.10_設置多重背景圖像

5.3.11_背景複合屬性( background )

5.4_CSS3漸變屬性

5.4.1_線性漸變

5.4.2_徑向漸變

5.4.3_重複漸變

1. 重複線性漸變

2. 重複徑向漸變