關于邊框，什么是補白的問題？
盒子模型的邊框就是圍繞著內容及補白的線，這條線你可以設置它的粗細、樣式和顏色(邊框三個屬性)。
qq_一生之久_0
2016-04-01
1 回答
舉報
0/150
提交
取消
2016-04-01
盒模型--邊框（一）
盒子模型的邊框就是圍繞著內容及補白的線，這條線你可以設置它的粗細、樣式和顏色(邊框三個屬性)。
如下面代碼為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）。
e.g.
[html]?view plain?copy?print?
<!DOCTYPE?HTML>??
<html>??
<head>??
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8">??
<title>邊框</title>??
<style?type="text/css">??
p{border:2px?dotted?#ccc;}??
</style>??
</head>??
<body>??
????<h1>勇氣</h1>??
????<p>三年級時，我還是一個膽小如鼠的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。</p>??
????<p>到了三年級下學期時，我們班上了一節公開課，老師提出了一個很簡單的問題，班里很多同學都舉手了，甚至成績比我差很多的，也舉手了，還說著："我來，我來。"我環顧了四周，就我沒有舉手。</p>?????
</body>??
</html>??
6 盒模型--邊框（二）
現在有一個問題，如果有想為p標簽單獨設置下邊框，而其它三邊都不設置邊框樣式怎么辦呢？css樣式中允許只為一個方向的邊框設置樣式：
div{border-bottom:1px solid red;}
同樣可以使用下面代碼實現其它三邊上、右、左邊框的設置：
border-top:1px solid red;
border-right:1px solid red;
border-left:1px solid red;
e.g.
[html]?view plain?copy?print?
<!DOCTYPE?HTML>??
<html>??
<head>??
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8">??
<title>邊框</title>??
<style?type="text/css">??
li{??
????border-bottom:1px?dotted?#ccc;??
}??
</style>??
</head>??
<body>??
<ul>??
????<li>別讓不會說話害了你</li>??
????<li>二十七八歲就應該有的見識</li>??
????<li>別讓不好意思害了你</li>??
</ul>??
</body>??
</html>??