CSS ???
CSS ???
CSS ??? ??
CSS ??? ??? ???? ?? ???? ???? ??? ??? ? ????.
??? ???
??? ??? ??? ??? ??? ??? ?????.
border-style ??? ??? ???? ???? ? ?????.
border-style ?:
none: ????? ??? ??
dotted: ?? ??? ??
??: ?? ?? ??
solid: ?? ?? ??
double: ? ?? ??? ?????. ? ???? ??? border-width ?? ?????.
groove: 3D ? ??? ?????. ???? ?? ?? ?? ??? ?????.
ridge: 3D ?? ???? ?????. ??? ???? ?? ?? ?? ????.
inset: 3D ?? ???? ?????. ??? ???? ?? ?? ?? ????.
outset: 3D ?? ???? ?????. ??? ???? ?? ??? ?????
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
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;}
p.ridge {border-style:ridge;}
p.inset {border-style:inset;}
p.outset {border-style:outset;}
p.hidden {border-style:hidden;}
</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"> 凹槽邊框。</p>
<p class="ridge">壟狀邊框。</p>
<p class="inset">嵌入邊框。</p>
<p class="outset">外凸邊框。</p>
<p class="hidden">隱藏邊框。</p>
</body>
</html>????? ???? ??? ???
??? ??
border-width ??? ?? ??? ??? ??? ? ????.
??? ??? ???? ???? ? ??? ????. 2px ?? 0.1em? ?? ?? ?? ????? ???, ??(???), ??? ?? 3?? ??? ? ??? ??? ? ????.
??: CSS? 3? ???? ?? ??? ???? ???? ? ??? ????? ??, ??, ???? ?? 5px, 3px, 2px? ???? ?? ??? ????? 3px, 2px? ??? ? ????. ?? 1px???.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}
p.three
{
border-style:solid;
border-width:1px;
}
</style>
</head>
<body>
<p class="one">一些文本。</p>
<p class="two">一些文本。</p>
<p class="three">一些文本。</p>
</body>
</html>Note: "border-width" ??? ???? ???? ?? ??? ????. ?? "border-style" ??? ???? ???? ???? ???.
????? ???? ??? ???
??? ??
border-color ??? ??? ??? ???? ? ?????. ??? ? ?? ??:
name - "red"? ?? ?? ?? ??
RGB - "rgb(255,0,0)"? ?? RGB ? ??
Hex - 16?? ?? "# ff0000"
??? ??? "??"?? ??? ?? ????.
Note: border-color? ???? ??? ? ???? ????. Border-style? ???? ??? ???? ?? ???? ???.
?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
p.one
{
border-style:solid;
border-color:red;
}
p.two
{
border-style:solid;
border-color:#98bf21;
}
</style>
</head>
<body>
<p class="one">山河拱手，為君一笑 。</p>
<p class="two">如是顛簸生世亦無悔。</p>
</body>
</html>????? ???? ??? ???
Border - ? ?? ????? ?????
CSS??? ? ?? ?? ?? ?? ???? ??? ? ????.
?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
</style>
</head>
<body>
<p>兩個不同的邊界樣式。</p>
</body>
</html>????? ???? ??? ???
border-style ??? 1~4?? ?? ?? ? ????.
border-style: ?? ?? ??;
?? ???? ?????
The ??? ???? ??
?? ???? ?? ???
?? ???? ??
???
border-style: ?? ??;
- ?? ? ?? ???? ?????.
- ??? ? ?? ???? ?????.
??? ??? : ??;
- ?? ?? ???? ???? ??????
- ? ????? ??? ???? ??????. ??? border-width ? border-color? ?? ??? ?? ????.
Border - ?? ??
?? ???? ???? ???? ?? ?? ??? ?????.
- T ???? ???? ??? ?? ????.
"???" ???? ??? ? ????:
border-width - border-style (??)
border-color
????
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
p
{
border:5px solid red;
}
</style>
</head>
<body>
<p>段落中的一些文本。</p>
</body>
</html>?? ???? ??? ????? ? ??
4?? ??? ?? ??
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style> p.one { border-style:solid; border-color:#0000ff; } p.two { border-style:solid; border-color:#ff0000 #0000ff; } p.three { border-style:solid; border-color:#ff0000 #00ff00 #0000ff; } p.four { border-style:solid; border-color:#ff0000 #00ff00 #0000ff rgb(250,0,255); } </style> </head> <body> <p class="one">One-colored border!</p> <p class="two">Two-colored border!</p> <p class="three">Three-colored border!</p> <p class="four">Four-colored border!</p> </body> </html>????? ???? ??? ???
Attribute Description border ?? ??, ??? ????? ? ?? ?? ??? ???? ? ?????. border-style ? ??? ?? ??? ???? ????? ? ??? ??? ???? ????? ???? ? ?????. border-width ??? ?? ??? ??? ????? ? ???? ??? ????? ???? ? ???? ?? ?????. border-color ?? ????, ??? ?? ????? ??? ??? ??? ????? 4? ? ??? ??? ?????. border-bottom ?? ??, ?? ???? ?? ??? ??? ????? ???? ? ?????. border-bottom-color ??? ??? ??? ??? ?????. border-bottom-style ??? ?? ??? ???? ?????. border-bottom-width ??? ?? ??? ??? ?????. border-left ?? ??, ?? ???? ?? ??? ??? ????? ???? ? ?????. border-left-color ??? ?? ??? ??? ?????. border-left-style ??? ?? ??? ???? ?????. border-left-width ??? ?? ??? ??? ?????. border-right ?? ??, ??? ???? ?? ??? ??? ????? ???? ? ?????. border-right-color ??? ??? ??? ??? ?????. border-right-style ??? ??? ??? ???? ?????. border-right-width ??? ??? ??? ??? ?????. border-top ?? ??, ?? ???? ?? ??? ??? ????? ???? ? ?????. border-top-color ??? ?? ??? ??? ?????. border-top-style ??? ?? ??? ???? ?????. border-top-width ??? ?? ??? ??? ?????.
