CSS邊框屬性
元素的邊框就是圍繞元素內容和內邊距的一條或多條線。
元素的邊框屬性：
-
border 簡寫屬性，用于把針對四個邊的屬性設置在一個聲明。
border: 2px solid rgb(66, 184, 162);-
border-width 簡寫屬性，用于為元素的所有邊框設置寬度，或者單獨地為各邊邊框設置寬度。
- 常用單位為像素(px)、em
- thin細的邊框。/medium 默認/thick 定義粗的邊框。
border-width: thick; -
border-style 用于設置元素所有邊框的樣式，或者單獨地為各邊設置邊框樣式。
- none 定義無邊框。
- dotted 定義點狀邊框
- dashed 定義虛線
- solid 定義實線。
- double 定義雙線
- groove 定義 3D 凹槽邊框。
- ridge 定義 3D 壟狀邊框。
- inset 定義 3D inset 邊框
- outset 定義 3D outset 邊框。
border-style: ridge dotted; border-color 簡寫屬性，設置元素的所有邊框中可見部分的顏色，或為 4 個邊分別設置顏色。
border-color: rgb(121, 249, 151) rgb(78, 96, 9) -
-
border-bottom 簡寫屬性，用于把下邊框的所有屬性設置到一個聲明中。
border-bottom: 5px rgb(241, 225, 244) dotted;- border-bottom-color 設置元素的下邊框的顏色。
- border-bottom-style 設置元素的下邊框的樣式。
- border-bottom-width 設置元素的下邊框的寬度。
-
border-left 簡寫屬性，用于把左邊框的所有屬性設置到一個聲明中。
- border-left-color 設置元素的左邊框的顏色。
- border-left-style 設置元素的左邊框的樣式。
- border-left-width 設置元素的左邊框的寬度。
-
border-right 簡寫屬性，用于把右邊框的所有屬性設置到一個聲明中。
- border-right-color 設置元素的右邊框的顏色。
- border-right-style 設置元素的右邊框的樣式。
- border-right-width 設置元素的右邊框的寬度。
-
border-top 簡寫屬性，用于把上邊框的所有屬性設置到一個聲明中。
- border-top-color 設置元素的上邊框的顏色。
- border-top-style 設置元素的上邊框的樣式。
- border-top-width 設置元素的上邊框的寬度。
CSS3新增的邊框屬性：
-
border-radius 設置所有四個 border-radius 屬性的簡寫屬性。
*同時設定四個角的圓角
**分別設定左上 右下、左下 右上圓角
*** 分別設定左上 、左下 右上、右下圓角
-
**** 分別設定左上 、右上、右下、左下圓角
- 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;
-
border-image 設置所有 border-image屬性的簡寫屬性。
- border-image 復合屬性，設置邊框使用圖像來填充，可依次設置一下屬性：
- border-image-source 圖像來源路徑
- border-image-slice 邊框背景圖的分割方式
- border-image-width 邊框的寬度。
- border-image-outset 邊框背景圖的擴展(邊框圖像區(qū)域超出邊框的量。)
- border-image-repeat 邊框圖像的平鋪方式:stretch拉伸/repeat重復鋪滿/round重復鋪滿并對圖片進行調整
border-image-source: url(./img/bj.jpg); border-image-slice:90; border-image-width:30px ; border-image-outset:30px; border-image-repeat: round stretch;前兩個屬性需要和后面三個加/分割/ （和round不要加/） border-image:url(./img/bj.jpg) 30 /20px /30px round; -
box-shadow 向方框添加一個或多個陰影。
- none： 無陰影
- 陰影水平偏移值/陰影垂直偏移值/陰影模糊值/陰影外延值/陰影的顏色/inset內陰影(默認值為outset)
偏移量為0的時候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); // 內嵌陰影（inset方向反過來） box-shadow: 5px 5px 5px rgb(251, 97, 186) inset;
元素的背景屬性：
- background 簡寫屬性，作用是將背景屬性設置在一個聲明中。
- background-attachment 背景圖像是否固定或者隨著頁面的其余部分滾動。scroll默認值。/fixed當頁面的其余部分滾動時，背景圖像不會移動。
- background-color 設置元素的背景顏色。
- background-image 把圖像設置為背景。
- background-position 設置背景圖像的起始位置。
- left/right/center/bottom/top這幾個屬性值可以兩兩組合使用，如果只規(guī)定了一個關鍵詞，那么第二個值將是"center"。
- x% y% 第一個值是水平位置，第二個值是垂直位置;左上角是 0% 0%。右下角是 100% 100%;如果僅規(guī)定了一個值，另一個值將是 50%。
- x y 左上角是 0 0。單位是像素 (0px 0px) 或任何其他的 CSS 單位。如果僅規(guī)定了一個值，另一個值將是50%。
- background-repeat 設置背景圖像是否及如何重復。repeat/repeat-x/repeat-y/no-repeat
CSS3新增的背景屬性：
- background-size 規(guī)定背景圖片的尺寸。
- 像素/百分比設置寬高
- cover:把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區(qū)域。
- contain 把圖像圖像擴展至最大尺寸，以使其寬度和高度完全適應內容區(qū)域
- background-clip 規(guī)定背景的繪制區(qū)域。
- border-box 背景被裁剪到邊框盒
- padding-box 背景被裁剪到內邊距框。
- content-box 背景被裁剪到內容框。
- background-origin 規(guī)定背景圖片的定位區(qū)域。
- padding-box 背景圖像相對于內邊距框來定位。
- border-box 背景圖像相對于邊框盒來定位。
- content-box 背景圖像相對于內容框來定位。
線性漸變和徑向漸變
線性漸變：
屬性：linear-gradinet(開始位置 角度，起始顏色，終止顏色 )
background-image: linear-gradient(rgb(198, 218, 78),rgb(34, 63, 113));
-
開始位置：漸變開始的位置，屬性值可以為百分比/長度/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); -
角度：漸變終止方向的角度，當開始位置為數值或百分比時候可用
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%); 起始顏色......終止顏色......-
重復漸變將屬性修改為：repeating-linear-gradinet()
background-image: repeating-linear-gradient(60deg,rgb(198, 218, 78)20px,rgb(251, 165, 168)40px);
徑向漸變(放射漸變)：
屬性：radial-gradinet()(形狀 發(fā)散方向，起始顏色，終止顏色)
-
形狀:ellipse（橢圓）/circle（圓形）
background-image: radial-gradient(circle,rgb(70, 90, 255),rgb(43, 135, 21),rgb(231, 144, 53)); -
發(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)); -
大小(半徑)：屬性值可用像素或關鍵字表示
- closest-side:圓心到距離最近的邊
- farthest-side:圓心到距離最遠的邊
- closest-corner：圓心到距離最近的角
- farthest-corner：圓心到距離最遠的角
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));
```
起始顏色......終止顏色......-
重復的徑向漸變：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));
-
開始位置：漸變開始的位置，屬性值可以為百分比/長度/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); -
角度：漸變終止方向的角度，當開始位置為數值或百分比時候可用
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%); 起始顏色......終止顏色......-
重復漸變將屬性修改為：repeating-linear-gradinet()
background-image: repeating-linear-gradient(60deg,rgb(198, 218, 78)20px,rgb(251, 165, 168)40px);
徑向漸變(放射漸變)：
屬性：radial-gradinet()(形狀 發(fā)散方向，起始顏色，終止顏色)
-
形狀:ellipse（橢圓）/circle（圓形）
background-image: radial-gradient(circle,rgb(70, 90, 255),rgb(43, 135, 21),rgb(231, 144, 53)); -
發(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)); -
大小(半徑)：屬性值可用像素或關鍵字表示
- closest-side:圓心到距離最近的邊
- farthest-side:圓心到距離最遠的邊
- closest-corner：圓心到距離最近的角
- farthest-corner：圓心到距離最遠的角
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));
```
起始顏色......終止顏色......-
重復的徑向漸變：repeating-radial-gradinet()
background-image: repeating-radial-gradient(circle closest-side,rgb(120, 240, 13),rgb(237, 235, 20),rgb(10, 99, 250));
