11-6盒模型--邊框（一） · 初識HTML+CSS

盒子模型的邊框就是圍繞著內容及補白的線，這條線你可以設置它的粗細、樣式和顏色(邊框三個屬性)。如下面代碼為 div 來設置邊框粗細為 2px、樣式為實心的、顏色為紅色的邊框： ~~~ div{ border:2px solid red; } ~~~ 上面是 border 代碼的縮寫形式，可以分開寫： ~~~ div{ border-width:2px; border-style:solid; border-color:red; } ~~~ **注意：** 1、border-style（邊框樣式）常見樣式有： dashed（虛線）| dotted（點線）| solid（實線）。 2、border-color（邊框顏色）中的顏色可設置為十六進制顏色，如: ~~~ border-color:#888;//前面的井號不要忘掉。 ~~~ 3、border-width（邊框寬度）中的寬度也可以設置為： thin | medium | thick（但不是很常用），最常還是用像素（px）。 ### 任務 **我也來試試，設 p 標簽的邊框樣式** 1.在右邊編輯器的第 7 行，輸入： ~~~ p{border:2px dotted #ccc;} ~~~ ``` <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>邊框</title> <style type="text/css"> </style> </head> <body> <h1>勇氣</h1> <p>三年級時，我還是一個膽小如鼠的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。</p> <p>到了三年級下學期時，我們班上了一節公開課，老師提出了一個很簡單的問題，班里很多同學都舉手了，甚至成績比我差很多的，也舉手了，還說著："我來，我來。"我環顧了四周，就我沒有舉手。</p> </body> </html> ```