css border-style邊框樣式

2012/11/26 15:47:29作者：佚名來源：網(wǎng)絡(luò)

移動(dòng)端

【實(shí)例介紹】

使用邊框樣式屬性可以定義邊框的風(fēng)格樣式，這個(gè)屬性必須用于指定可見的邊框。可以分別設(shè)置上邊框樣式border-top-style、下邊框樣式border-bottom-style、左邊框樣式border-left-style和右邊框樣式border-right-style。

【基本語(yǔ)法】

【語(yǔ)法介紹】

none：無邊框。與任何指定的border-width值無關(guān)。
hidden：隱藏邊框。IE不支持。
dotted：在MAC平臺(tái)上IE4+與WINDOWS和UNIX平臺(tái)上IE5．5+為點(diǎn)線，否則為實(shí)線二
dashed：在MAC平臺(tái)上IE4+與WINDOWS和UNIX平臺(tái)上IE5．5+為虛線，否則為實(shí)線二
solid：實(shí)線邊框。
double：雙線邊框。兩條單線與其間隔的和等于指定的border—width值。
groove：根據(jù)border—color的值畫3D凹槽。
ridge：根據(jù)border．color的值畫菱形邊框。
reset：根據(jù)border—color的值畫3D凹邊。
outset：根據(jù)border—color的值畫3D凸邊。

【實(shí)例代碼】


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
</head>
<style type="text/css">
.b {
border-top-style: dashed;
border-right-style: dashed;
border-bottom-style: dotted;
border-left-style: solid;
line-height: 20px;
}
</style>
<body class="b">
造化弄人，普通人踏上非凡之路，小隱隱于野，大隱隱于市，巨隱隱于朝。<br />
波瀾壯闊人生路，不負(fù)一世弄潮頭！
</body>
</html>

【代碼分析】

在代碼中，加粗部分的標(biāo)記分別用來設(shè)置上、右、下、左邊框的樣式為虛線邊框dashed、虛線邊框dashed、點(diǎn)線邊框doRed、實(shí)線邊框solid，在瀏覽器中預(yù)覽效果，如圖所示。

邊框樣式border-style運(yùn)行效果