CSS ??? ???
CSS ??? ???
border-style? ???? ??? ???? ????? ??, ???, ?? ? ??? ???? ??? ??? ? ????.
???-? ???
??? ?? ???
??? ??? ???
border -bottom-style
?? ???, ?? ???, ?? ???, ?? ???, ??? ?? ??? ? ??? ? ?? ??? ????? ?? ??? ????. .
<html>
<head>
<title>測(cè)試內(nèi)邊距</title>
<meta charset="utf-8">
<!-- 調(diào)用CSS樣式表 -->
<style type="text/css">
p.none{border-style: none;}/*設(shè)置無(wú)邊的邊框*/
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 ??? ?? ? ??
??? ??
??? ??? border-width? ????, ?, ??, ??
border-top-width
border-bottom-width
border -?? ??
??? ??? ??
??? ??
??? ??? ??? ???? ????, ??? ???? ??? ??? ? ????. ??? ???? 4?? ??
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>? ??? ?? ?????
CSS??? ?? ?? ??? ?? ?? ???? ??? ? ????.
????
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: ?? ?? ??;
?? ???? ??? ????. ??
??? ???? ??
?? ???? ???
?? ???? ??
border-style: ?? ??? ;
?? ???? ????
??, ??? ???? ????
??? ???? ????
border-style: ?? ??;
?? ? ?? ???? ?????
??? ? ?? ???? ?????
border-style: ??;
?? ???? ???? ?????
????? ?? ??? ????
border: 5px solid red;
