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

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

• dotted：點線
• dashed：虛線
• solid：實線
• double：雙實線

效果如下：

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

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

border-width: 5px;

效果如下：

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

• border-left-width: 設(shè)置左邊框?qū)挾?/li>
• border-right-width: 設(shè)置右邊框?qū)挾?/li>
• border-top-width: 設(shè)置上邊框?qū)挾?/li>
• border-bottom-width: 設(shè)置下邊框?qū)挾?/li>

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

效果如下：

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

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

border-color: red;

 效果如下：

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

• 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è)置圓角邊框

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

border-radius: 50px;

效果如下：

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

• 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;

效果如下：

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

到此這篇關(guān)于css邊框修飾的文章就介紹到這了,更多相關(guān)css邊框修飾內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評論