css盒模型的邊框怎么用

css盒模型的邊框怎么用？這個問題可能是我們日常學習或工作經常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家帶來的參考內容，讓我們一起來看看吧！

珙縣網站制作公司哪家好，找創新互聯建站！從網頁設計、網站建設、微信開發、APP開發、成都響應式網站建設公司等網站項目制作，到程序開發，運營維護。創新互聯建站于2013年創立到現在10年的時間，我們擁有了豐富的建站經驗和運維經驗，來保證我們的工作的順利進行。專注于網站建設就選創新互聯建站。

首先我們來聊聊盒模型的組成部分：

想到盒模型就不由自主的想到一個盒子，css樣式的盒模型里面有內容，邊框，內邊距，外邊距等等，我們今天這篇文章主要說的就是盒模型的邊距。

我們先看幾個屬性和介紹：

border-style 屬性用于設置元素所有邊框的樣式
border-width 屬性為元素的所有邊框設置寬度（thin/medium/thick/length）
border-color 屬性設置四條邊框的顏色

記得在之前的文章里面講過關于border的用法，第一個用過了，但是我們還是要說一說的。

現在我們先來看個完整的實例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>創新互聯</title>
<style type="text/css">
table{border-style:solid; border-width:medium; border-color:red}
</style>
</head>
<body>
<table width="200px"; height="150px">
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>
</body>
</html>

這是個完整的HTML所有的代碼，里面把上面那三個屬性都用上去了。

現在我們來看看在瀏覽器中顯示的效果：

css盒模型的邊框怎么用

這就是邊框的內容了，有三個屬性定義了這個圖像的完成。（想看更多就到創新互聯css參考手冊欄目中學習）

我們再來看看深入點的內容：

border-bottom-style:double：這個是定義下邊框為double(雙線邊框)
border-width:20px：這個定義了邊框像素值為20px。

我們來把這個加入代碼中去：

<style type="text/css">
table{border-style:solid; border-width:medium; border-color:red;border-top-style:double;border-left-style:double;
border-width:20px;}
</style>

是不是有些多了，現在我們再來看看效果：

css盒模型的邊框怎么用