CSS 邊框樣式
CSS邊框樣式
可以使用border-style來設(shè)定邊框的樣式，也可以分別來設(shè)定上下左右的樣式：
border- top-style
border-left-style
#border-right-style
##border -bottom-style
邊框樣式有很多種，可以定義很多，像是單邊框，虛線的邊框，實(shí)線的邊框，雙邊框，還有沒有邊框的邊框。<html>
<head>
<title>測(cè)試內(nèi)邊距</title>
<meta charset="utf-8">
<!-- 調(diào)用CSS樣式表 -->
<style type="text/css">
p.none{border-style: none;}/*設(shè)置無邊的邊框*/
p.dotted {border-style: dotted}/*設(shè)置點(diǎn)狀邊框*/
p.dashed {border-style: dashed}/*設(shè)置虛線邊框*/
p.solid {border-style: solid}/*設(shè)置實(shí)線邊框*/
p.double {border-style: double}/*設(shè)置雙線邊框*/
p.groove {border-style: groove}/*設(shè)置3D凹槽邊框*/
p.ridge {border-style: ridge}/*設(shè)置3D壟狀邊框*/
p.inset {border-style: inset}/*設(shè)置3D inset 邊框*/
p.outset {border-style: outset}/*設(shè)置3D outset 邊框*/
</style>
</head>
<body>
<p class="none">我沒有邊框</p>
<p class="dotted">點(diǎn)狀邊框</p>
<p class="dashed">虛線邊框</p>
<p class="solid">實(shí)線邊框</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來定義的，可以分別設(shè)定上下左右4個(gè)屬性border-top-width
border-bottom-width
border-left-width
border-right-width
邊框顏色邊框?qū)挾仁峭高^border-color來定義的，同樣也可以分別設(shè)定上下左右4個(gè)屬性border-top-color
border-bottom-color
border-left -color
border-right-color
<!DOCTYPE html>
<html>
<head>
<title>測(cè)試內(nèi)邊距</title>
<meta charset="utf-8">
<!-- 調(diào)用CSS樣式表 -->
<style type="text/css">
/*定義p標(biāo)簽，是實(shí)線邊框*/
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">我是設(shè)置所有邊框的</p>
<p class="top">我只負(fù)責(zé)上面</p>
<p class="bottom">我負(fù)責(zé)下面</p>
<p class="left">我設(shè)置的是左邊</p>
<p class="right">我設(shè)置的是右邊</p>
</body>
</html>單獨(dú)設(shè)定各邊框
在CSS中，可以指定不同的側(cè)面不同的邊框：實(shí)例#p{
border-top-style:dotted;
border -right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
##上面的例子也可以設(shè)定一個(gè)單一屬性：
border-style屬性可以有1- 4個(gè)值：
上邊框是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;
