CSS 邊框樣式
CSS邊框樣式
可以使用border-style來設置邊框的樣式，也可以分別來設置上下左右的樣式：
border-top-style
border-left-style
border-right-style
border-bottom-style
邊框樣式有很多種，可以定義很多，比如單邊框，虛線的邊框，實線的邊框，雙邊框，還有沒有邊框的邊框。
<html>
<head>
<title>測試內(nèi)邊距</title>
<meta charset="utf-8">
<!-- 調(diào)用CSS樣式表 -->
<style type="text/css">
p.none{border-style: none;}/*設置無邊的邊框*/
p.dotted {border-style: dotted}/*設置點狀邊框*/
p.dashed {border-style: dashed}/*設置虛線邊框*/
p.solid {border-style: solid}/*設置實線邊框*/
p.double {border-style: double}/*設置雙線邊框*/
p.groove {border-style: groove}/*設置3D凹槽邊框*/
p.ridge {border-style: ridge}/*設置3D壟狀邊框*/
p.inset {border-style: inset}/*設置3D inset 邊框*/
p.outset {border-style: outset}/*設置3D outset 邊框*/
</style>
</head>
<body>
<p class="none">我沒有邊框</p>
<p class="dotted">點狀邊框</p>
<p class="dashed">虛線邊框</p>
<p class="solid">實線邊框</p>
<p class="double">雙線邊框</p>
<p class="groove">3D凹槽邊框</p>
<p class="ridge">3D 壟狀邊框</p>
<p class="inset">3D inset 邊框</p>
<p class="outset"> 3D outset 邊框</p>
</body>
</html>CSS邊框?qū)挾扰c顏色
邊框?qū)挾?/p>
邊框?qū)挾仁峭ㄟ^border-width來定義的，可以分別設置上下左右4個屬性
border-top-width
border-bottom-width
border-left-width
border-right-width
邊框顏色
邊框?qū)挾仁峭ㄟ^border-color來定義的，同樣也可以分別設置上下左右4個屬性
border-top-color
border-bottom-color
border-left-color
border-right-color
<!DOCTYPE html>
<html>
<head>
<title>測試內(nèi)邊距</title>
<meta charset="utf-8">
<!-- 調(diào)用CSS樣式表 -->
<style type="text/css">
/*定義p標簽，是實線邊框*/
p {border-style: solid;}
.all {
/*定義所有邊框?qū)挾葹?像素*/
border-width: 5px;
/*定義所有邊框是顏色為橙色*/
border-color: #FF8000
}
.top {
/*定義上邊框?qū)挾葹?像素*/
border-top-width: 5px;
/*定義上邊框是顏色為橙色*/
border-top-color: #FF8000
}
.bottom {
/*定義下邊框?qū)挾葹?像素*/
border-bottom-width: 5px;
/*定義下邊框是顏色為橙色*/
border-bottom-color: #FF8000
}
.left {
/*定義左邊框?qū)挾葹?像素*/
border-left-width: 5px;
/*定義左邊框是顏色為橙色*/
border-left-color: #FF8000
}
.right {
/*定義右邊框?qū)挾葹?像素*/
border-right-width: 5px;
/*定義右邊框是顏色為橙色*/
border-right-color: #FF8000
}
</style>
</head>
<body>
<p class="all">我是設置所有邊框的</p>
<p class="top">我只負責上面</p>
<p class="bottom">我負責下面</p>
<p class="left">我設置的是左邊</p>
<p class="right">我設置的是右邊</p>
</body>
</html>單獨設置各邊框
在CSS中，可以指定不同的側(cè)面不同的邊框：
實例
p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
上面的例子也可以設置一個單一屬性：
border-style:dotted solid;
border-style屬性可以有1-4個值：
border-style:dotted solid double dashed;
上邊框是 dotted
右邊框是 solid
底邊框是 double
左邊框是 dashed
border-style:dotted solid double;
上邊框是 dotted
左、右邊框是 solid
底邊框是 double
border-style:dotted solid;
上、底邊框是 dotted
右、左邊框是 solid
border-style:dotted;
四面邊框是 dotted
邊框也擁有簡寫屬性
border: 5px solid red;
