一、設置線條樣式

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

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

效果如下：

二、設置邊框線寬度

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

border-width: 5px;

效果如下：

② 分別設置邊框四個方向的寬度

• border-left-width: 設置左邊框寬度
• border-right-width: 設置右邊框寬度
• border-top-width: 設置上邊框寬度
• border-bottom-width: 設置下邊框寬度

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

效果如下：

三、設置邊框顏色

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

border-color: red;

 效果如下：

② 分別設置四個方向的邊框顏色

• border-left-color： 設置左邊框顏色
• border-top-color： 設置上邊框顏色
• border-right-color： 設置右邊框顏色
• border-bottom-color：設置下邊框顏色

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

 效果如下：

四、設置圓角邊框

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

border-radius: 50px;

效果如下：

② 分別設置四個方向的圓角邊框

• border-top-left-radius: 設置左上角圓角
• border-bottom-left-radius: 設置左下角圓角
• border-top-right-radius: 設置右上角圓角
• border-bottom-right-radius: 設置右下角圓角

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

效果如下：

注意：修飾邊框時，邊框線條樣式、邊框寬度都要設置才會顯示出來!!

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

最新評論