CSS邊框?qū)傩?/h3>

元素的邊框就是圍繞元素內(nèi)容和內(nèi)邊距的一條或多條線亡鼠。

元素的邊框?qū)傩裕?/h5>

1. border 簡寫屬性陌凳，用于把針對四個(gè)邊的屬性設(shè)置在一個(gè)聲明。

   border: 2px solid rgb(66, 184, 162);

   • border-width 簡寫屬性，用于為元素的所有邊框設(shè)置寬度榆苞，或者單獨(dú)地為各邊邊框設(shè)置寬度。

     • 常用單位為像素(px)霞捡、em
     • thin細(xì)的邊框坐漏。/medium 默認(rèn)/thick 定義粗的邊框。

     border-width: thick;

   • border-style 用于設(shè)置元素所有邊框的樣式碧信，或者單獨(dú)地為各邊設(shè)置邊框樣式赊琳。

     • none 定義無邊框。
     • dotted 定義點(diǎn)狀邊框
     • dashed 定義虛線
     • solid 定義實(shí)線砰碴。
     • double 定義雙線
     • groove 定義 3D 凹槽邊框躏筏。
     • ridge 定義 3D 壟狀邊框。
     • inset 定義 3D inset 邊框
     • outset 定義 3D outset 邊框呈枉。

     border-style: ridge dotted;

   • border-color 簡寫屬性趁尼，設(shè)置元素的所有邊框中可見部分的顏色，或?yàn)?4 個(gè)邊分別設(shè)置顏色猖辫。

   border-color: rgb(121, 249, 151) rgb(78, 96, 9)

2. border-bottom 簡寫屬性酥泞，用于把下邊框的所有屬性設(shè)置到一個(gè)聲明中。

   border-bottom: 5px rgb(241, 225, 244) dotted;

   • border-bottom-color 設(shè)置元素的下邊框的顏色啃憎。
   • border-bottom-style 設(shè)置元素的下邊框的樣式芝囤。
   • border-bottom-width 設(shè)置元素的下邊框的寬度。

3. border-left 簡寫屬性辛萍，用于把左邊框的所有屬性設(shè)置到一個(gè)聲明中悯姊。

   • border-left-color 設(shè)置元素的左邊框的顏色。
   • border-left-style 設(shè)置元素的左邊框的樣式贩毕。
   • border-left-width 設(shè)置元素的左邊框的寬度悯许。

4. border-right 簡寫屬性，用于把右邊框的所有屬性設(shè)置到一個(gè)聲明中耳幢。

   • border-right-color 設(shè)置元素的右邊框的顏色岸晦。
   • border-right-style 設(shè)置元素的右邊框的樣式欧啤。
   • border-right-width 設(shè)置元素的右邊框的寬度。

5. border-top 簡寫屬性启上，用于把上邊框的所有屬性設(shè)置到一個(gè)聲明中邢隧。

   • border-top-color 設(shè)置元素的上邊框的顏色。
   • border-top-style 設(shè)置元素的上邊框的樣式冈在。
   • border-top-width 設(shè)置元素的上邊框的寬度倒慧。

CSS3新增的邊框?qū)傩裕?/h5>

1. border-radius 設(shè)置所有四個(gè) border-radius 屬性的簡寫屬性。

   • *同時(shí)設(shè)定四個(gè)角的圓角

   • **分別設(shè)定左上 右下包券、左下 右上圓角

   • *** 分別設(shè)定左上 纫谅、左下 右上、右下圓角

   • **** 分別設(shè)定左上 溅固、右上付秕、右下、左下圓角

     • border-top-left-radius 左上角圓角邊框
     • border-top-right-radius 右上角圓角邊框
     • border-bottom-right-radius 右下角圓角邊框
     • border-bottom-left-radius 左下角圓角邊框

     border-radius: 3em/1em;

     border-top-left-radius: 2em 10em;

2. border-image 設(shè)置所有 border-image屬性的簡寫屬性侍郭。

   • border-image 復(fù)合屬性询吴，設(shè)置邊框使用圖像來填充，可依次設(shè)置一下屬性：
   • border-image-source 圖像來源路徑
   • border-image-slice 邊框背景圖的分割方式
   • border-image-width 邊框的寬度亮元。
   • border-image-outset 邊框背景圖的擴(kuò)展(邊框圖像區(qū)域超出邊框的量猛计。)
   • border-image-repeat 邊框圖像的平鋪方式:stretch拉伸/repeat重復(fù)鋪滿/round重復(fù)鋪滿并對圖片進(jìn)行調(diào)整

   border-image-source: url(./img/bj.jpg);
   border-image-slice:90;
   border-image-width:30px ;
   border-image-outset:30px;
   border-image-repeat: round stretch;
   

   前兩個(gè)屬性需要和后面三個(gè)加/分割/ （和round不要加/）
   border-image:url(./img/bj.jpg) 30 /20px /30px round;
   

3. box-shadow 向方框添加一個(gè)或多個(gè)陰影。

   • none： 無陰影
   • 陰影水平偏移值/陰影垂直偏移值/陰影模糊值/陰影外延值/陰影的顏色/inset內(nèi)陰影(默認(rèn)值為outset)

   偏移量為0的時(shí)候outset寫不寫效果不一樣爆捞，其他可以省略不寫
   
    box-shadow: -5px -5px 1px rgb(255,0,0),-10px -10px 1px rgb(255,255,0),-15px -15px 1px rgb(200,100,0);
    
    // 四周陰影
    box-shadow: 
    0px 0px 1px  5px rgb(255,0,0),
    0px 0px 1px  10px rgb(255,255,0),
    0px 0px 1px 15px  rgb(200,100,0);
    
    // 內(nèi)嵌陰影（inset方向反過來）
    box-shadow: 5px 5px 5px rgb(251, 97, 186) inset;
   
   

元素的背景屬性：

1. background 簡寫屬性奉瘤，作用是將背景屬性設(shè)置在一個(gè)聲明中。
   • background-attachment 背景圖像是否固定或者隨著頁面的其余部分滾動煮甥。scroll默認(rèn)值盗温。/fixed當(dāng)頁面的其余部分滾動時(shí)，背景圖像不會移動苛秕。
   • background-color 設(shè)置元素的背景顏色肌访。
   • background-image 把圖像設(shè)置為背景找默。
   • background-position 設(shè)置背景圖像的起始位置艇劫。
     • left/right/center/bottom/top這幾個(gè)屬性值可以兩兩組合使用，如果只規(guī)定了一個(gè)關(guān)鍵詞惩激，那么第二個(gè)值將是"center"店煞。
     • x% y% 第一個(gè)值是水平位置，第二個(gè)值是垂直位置;左上角是 0% 0%风钻。右下角是 100% 100%;如果僅規(guī)定了一個(gè)值顷蟀，另一個(gè)值將是 50%。
     • x y 左上角是 0 0骡技。單位是像素 (0px 0px) 或任何其他的 CSS 單位鸣个。如果僅規(guī)定了一個(gè)值羞反，另一個(gè)值將是50%。
   • background-repeat 設(shè)置背景圖像是否及如何重復(fù)囤萤。repeat/repeat-x/repeat-y/no-repeat

CSS3新增的背景屬性：

1. background-size 規(guī)定背景圖片的尺寸昼窗。
   • 像素/百分比設(shè)置寬高
   • cover:把背景圖像擴(kuò)展至足夠大，以使背景圖像完全覆蓋背景區(qū)域涛舍。
   • contain 把圖像圖像擴(kuò)展至最大尺寸澄惊，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域
2. background-clip 規(guī)定背景的繪制區(qū)域。
   • border-box 背景被裁剪到邊框盒
   • padding-box 背景被裁剪到內(nèi)邊距框富雅。
   • content-box 背景被裁剪到內(nèi)容框掸驱。
3. background-origin 規(guī)定背景圖片的定位區(qū)域。
   • padding-box 背景圖像相對于內(nèi)邊距框來定位没佑。
   • border-box 背景圖像相對于邊框盒來定位毕贼。
   • content-box 背景圖像相對于內(nèi)容框來定位。

線性漸變和徑向漸變

線性漸變：

屬性：linear-gradinet(開始位置 角度蛤奢，起始顏色帅刀，終止顏色 )

background-image: linear-gradient(rgb(198, 218, 78),rgb(34, 63, 113));

1. 開始位置：漸變開始的位置，屬性值可以為百分比/長度/left远剩、right扣溺、top、bottom（可組合使用）

   background-image: linear-gradient(to right bottom,rgb(25, 24, 156),rgb(194, 159, 73));
   
   background-image: linear-gradient(60deg ,rgb(198, 218, 78)0%,rgb(34, 63, 113)10px,rgb(251, 165, 168)100px,rgb(86, 162, 22)300px);
   

2. 角度：漸變終止方向的角度瓜晤，當(dāng)開始位置為數(shù)值或百分比時(shí)候可用

   background-image: linear-gradient(60deg ,rgb(198, 218, 78)0%,rgb(34, 63, 113)20%,rgb(251, 165, 168)80%,rgb(86, 162, 22)100%);

3. 起始顏色......

4. 終止顏色......

5. 重復(fù)漸變將屬性修改為：repeating-linear-gradinet()

   background-image: repeating-linear-gradient(60deg,rgb(198, 218, 78)20px,rgb(251, 165, 168)40px);

徑向漸變(放射漸變)：

屬性：radial-gradinet()(形狀 發(fā)散方向锥余，起始顏色，終止顏色)

1. 形狀:ellipse（橢圓）/circle（圓形）

   background-image: radial-gradient(circle,rgb(70, 90, 255),rgb(43, 135, 21),rgb(231, 144, 53));

2. 發(fā)散方向：屬性值可以為left痢掠、right驱犹、top、bottom足画、center（可組合使用）

   background-image: radial-gradient(circle at top left,rgb(69, 13, 130),rgb(93, 184, 43),rgb(189, 43, 210));

3. 大小(半徑)：屬性值可用像素或關(guān)鍵字表示

   • closest-side:圓心到距離最近的邊
   • farthest-side:圓心到距離最遠(yuǎn)的邊
   • closest-corner：圓心到距離最近的角
   • farthest-corner：圓心到距離最遠(yuǎn)的角

   background-image: radial-gradient(circle 50px,rgb(145, 195, 100),rgb(237, 235, 20));
   

background-image: radial-gradient(circle farthest-corner,rgb(120, 240, 13),rgb(237, 235, 20),rgb(10, 99, 250));
```

4. 起始顏色......

5. 終止顏色......

6. 重復(fù)的徑向漸變：repeating-radial-gradinet()

   background-image: repeating-radial-gradient(circle closest-side,rgb(120, 240, 13),rgb(237, 235, 20),rgb(10, 99, 250));

線性漸變和徑向漸變

線性漸變：

屬性：linear-gradinet(開始位置 角度雄驹，起始顏色，終止顏色 )

background-image: linear-gradient(rgb(198, 218, 78),rgb(34, 63, 113));

1. 開始位置：漸變開始的位置淹辞，屬性值可以為百分比/長度/left医舆、right、top象缀、bottom（可組合使用）

   background-image: linear-gradient(to right bottom,rgb(25, 24, 156),rgb(194, 159, 73));
   
   background-image: linear-gradient(60deg ,rgb(198, 218, 78)0%,rgb(34, 63, 113)10px,rgb(251, 165, 168)100px,rgb(86, 162, 22)300px);
   

2. 角度：漸變終止方向的角度蔬将，當(dāng)開始位置為數(shù)值或百分比時(shí)候可用

   background-image: linear-gradient(60deg ,rgb(198, 218, 78)0%,rgb(34, 63, 113)20%,rgb(251, 165, 168)80%,rgb(86, 162, 22)100%);

3. 起始顏色......

4. 終止顏色......

5. 重復(fù)漸變將屬性修改為：repeating-linear-gradinet()

   background-image: repeating-linear-gradient(60deg,rgb(198, 218, 78)20px,rgb(251, 165, 168)40px);

徑向漸變(放射漸變)：

屬性：radial-gradinet()(形狀 發(fā)散方向，起始顏色央星，終止顏色)

1. 形狀:ellipse（橢圓）/circle（圓形）

   background-image: radial-gradient(circle,rgb(70, 90, 255),rgb(43, 135, 21),rgb(231, 144, 53));

2. 發(fā)散方向：屬性值可以為left霞怀、right、top莉给、bottom毙石、center（可組合使用）

   background-image: radial-gradient(circle at top left,rgb(69, 13, 130),rgb(93, 184, 43),rgb(189, 43, 210));

3. 大小(半徑)：屬性值可用像素或關(guān)鍵字表示

   • closest-side:圓心到距離最近的邊
   • farthest-side:圓心到距離最遠(yuǎn)的邊
   • closest-corner：圓心到距離最近的角
   • farthest-corner：圓心到距離最遠(yuǎn)的角

   background-image: radial-gradient(circle 50px,rgb(145, 195, 100),rgb(237, 235, 20));
   

background-image: radial-gradient(circle farthest-corner,rgb(120, 240, 13),rgb(237, 235, 20),rgb(10, 99, 250));
```

4. 起始顏色......

5. 終止顏色......

6. 重復(fù)的徑向漸變：repeating-radial-gradinet()

   background-image: repeating-radial-gradient(circle closest-side,rgb(120, 240, 13),rgb(237, 235, 20),rgb(10, 99, 250));