在這里插入圖片描述
走的越遠你就越會發現
真正能在危難之時拉你一把的人
只有你自己

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

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/252144.html

標籤：其他

上一篇：continue與標簽一起使用，回圈體里的變數為什么還可以接著遞增？

下一篇：揭開JS無埋點技術的神秘面紗

一篇博文教會你學習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. 重復徑向漸變