元素的邊框就是圍繞元素內(nèi)容和內(nèi)邊距的一條或多條線。
border 簡寫屬性，用于把針對四個邊的屬性設(shè)置在一個聲明。
border-width 簡寫屬性，用于為元素的所有邊框設(shè)置寬度，或者單獨(dú)地為各邊邊框設(shè)置寬度。
常用單位為像素(px)、em
thin細(xì)的邊框。/medium 默認(rèn)/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-color 簡寫屬性，設(shè)置元素的所有邊框中可見部分的顏色，或?yàn)?4 個邊分別設(shè)置顏色。
border-bottom 簡寫屬性，用于把下邊框的所有屬性設(shè)置到一個聲明中。
border-bottom-color 設(shè)置元素的下邊框的顏色。
border-bottom-style 設(shè)置元素的下邊框的樣式。
border-bottom-width 設(shè)置元素的下邊框的寬度。
border-left 簡寫屬性，用于把左邊框的所有屬性設(shè)置到一個聲明中。
border-left-color 設(shè)置元素的左邊框的顏色。
border-left-style 設(shè)置元素的左邊框的樣式。
border-left-width 設(shè)置元素的左邊框的寬度。
border-right 簡寫屬性，用于把右邊框的所有屬性設(shè)置到一個聲明中。
border-right-color 設(shè)置元素的右邊框的顏色。
border-right-style 設(shè)置元素的右邊框的樣式。
border-right-width 設(shè)置元素的右邊框的寬度。
border-top 簡寫屬性，用于把上邊框的所有屬性設(shè)置到一個聲明中。
border-top-color 設(shè)置元素的上邊框的顏色。
border-top-style 設(shè)置元素的上邊框的樣式。
border-top-width 設(shè)置元素的上邊框的寬度。
border-radius 設(shè)置所有四個 border-radius 屬性的簡寫屬性。
* 同時設(shè)定四個角的圓角
** 分別設(shè)定左上 右下、左下 右上圓角
*** 分別設(shè)定左上 、左下 右上、右下圓角
**** 分別設(shè)定左上 、右上、右下、左下圓角
border-top-left-radius 左上角圓角邊框
border-top-right-radius 右上角圓角邊框
border-bottom-right-radius 右下角圓角邊框
border-bottom-left-radius 左下角圓角邊框
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)整
box-shadow 向方框添加一個或多個陰影。
none： 無陰影
div{
width: 500px;
height: 300px;
background: rgb(122,60,30);
border:2px solid green;
border-width: 8px;
border-style:dotted solid;
border-color:blue red;
border-bottom:5px solid black;
}
#div1{
border-radius: 3em;
}
#div2{
border-radius: 3em 1em;
}
#div3{
border-top-left-radius:2em;
}
#div4{
border-top-left-radius:2em 4em;
}
#div5{
border-radius: 3em 2em/1em 4em;
}
#div1{
border-image-source: url(../img/bj.jpg);
border-image-slice:30;
border-image-width:30px;
border-image-outset:10px;
border-image-repeat:stretch;
}
