一、設(shè)置線條樣式

通過(guò)?border-style?屬性設(shè)置，可選擇的一些屬性如下：

• dotted：點(diǎn)線

• dashed：虛線

• solid：實(shí)線

• double：雙實(shí)線

效果如下：

二、設(shè)置邊框線寬度

① 通過(guò)?border-width?整體設(shè)置上下左右邊框

border-width: 5px;

效果如下：

② 分別設(shè)置邊框四個(gè)方向的寬度

• border-left-width: 設(shè)置左邊框?qū)挾?/p>

• border-right-width: 設(shè)置右邊框?qū)挾?/p>

• border-top-width: 設(shè)置上邊框?qū)挾?/p>

• border-bottom-width: 設(shè)置下邊框?qū)挾?/p>

border-left-width: 20px;
border-top-width: 15px;
border-right-width: 10px;
border-bottom-width: 5px;

效果如下：

三、設(shè)置邊框顏色

① 通過(guò) border-color 屬性設(shè)置四個(gè)方向的邊框顏色

border-color: red;

?效果如下：

② 分別設(shè)置四個(gè)方向的邊框顏色

• border-left-color： 設(shè)置左邊框顏色

• border-top-color： 設(shè)置上邊框顏色

• border-right-color： 設(shè)置右邊框顏色

• border-bottom-color：設(shè)置下邊框顏色

border-left-color: red;
border-top-color: green;
border-right-color: blue;
border-bottom-color: blueviolet;

?效果如下：

四、設(shè)置圓角邊框

① 通過(guò) border-radius 屬性整體設(shè)置四個(gè)圓角

border-radius: 50px;

效果如下：

② 分別設(shè)置四個(gè)方向的圓角邊框

• border-top-left-radius: 設(shè)置左上角圓角

• border-bottom-left-radius: 設(shè)置左下角圓角

• border-top-right-radius: 設(shè)置右上角圓角

• border-bottom-right-radius: 設(shè)置右下角圓角

 border-top-left-radius: 50px;border-bottom-left-radius: 20px;border-top-right-radius: 10px;border-bottom-right-radius: 10px;

效果如下：

注意：修飾邊框時(shí)，邊框線條樣式、邊框?qū)挾榷家O(shè)置才會(huì)顯示出來(lái)!!