編程教程CSS 邊框
基本邊框的三個關鍵屬性是border-widthborder-style和border-color。
- border-width - 設置邊框的寬度。
- border-style - 設置用于繪制邊框的樣式。
- border-color - 設置邊框的顏色。 值：顏色。
以下代碼定義了一個基本邊框。
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {border-width: 5px;border-style: solid;border-color: black;
}
</style>
</head>
<body>
<p>This is a test.</p>
</body>
</html>上面的代碼呈現如下：
邊框寬度
您可以將border-width屬性表示為
- CSS長度規則：em，px或cm
- 將繪制邊框的區域的寬度的百分比：perc％
- 三個快捷值之一：thin，medium，thick
默認邊框寬度值為medium。
以下代碼定義了一個基本邊框。
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {border-width: 5px;border-style: solid;border-color: black;
}
</style>
</head>
<body>
<p>This is a test.</p>
</body>
</html>上面的代碼呈現如下：
邊框樣式
border-style屬性可以是以下列表中顯示的值之一。
- none - 定義無邊框。
- dashed - 定義虛線。
- dotted - 定義點狀邊框。
- double - 定義雙線。
- groove - 定義3D 凹槽邊框。
- inset - 定義3D inset 邊框。
- outset - 定義3D outset 邊框。
- ridge - 定義3D 壟狀邊框。。
- solid - 定義實線。
默認值為none，表示不繪制邊框。
以下代碼定義了一個基本邊框。
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
div {padding: 10px;margin: 10px;border: thick black;
}
</style>
</head>
<body>
<div style="border-style: dashed;">border-style: dashed;</div>
<div style="border-style: solid;">border-style: solid;</div>
<div style="border-style: ridge;">border-style: ridge;</div>
<div style="border-style: outset;">border-style: outset;</div>
<div style="border-style: none;">border-style: none;</div>
<div style="border-style: inset;">border-style: inset;</div>
<div style="border-style: hidden;">border-style: hidden;</div>
<div style="border-style: groove;">border-style: groove;</div>
<div style="border-style: dotted;">border-style: dotted;</div>
</body>
</html>上面的代碼呈現如下：
邊框顏色
border-color控制邊框顏色。
下面的代碼顯示了如何將邊框顏色設置為藍色。
<html>
<head>
<style type="text/css">
div {margin-bottom: 1em;padding: .5em;border-width: thick;border-color: blue;border-style: groove;
}
.dotted {border-color: red;border-width: medium;border-style: dotted;
text-align: center;
}
#two {border-style: double solid;border-color: red green purple blue;border-width: thin medium thick .25cm;
}
</style>
</head>
<body>
<div>this is a test.</div>
<p class="dotted">Dotted</p>
<p id="two">This is another paragraph
that has its borders set in a very bizarre way!</p>
</body>
</html>上面的代碼呈現如下：
單面邊框
您可以使用更具體的屬性為元素的每一側應用不同的邊框。
- border-top
border-top-width
border-top-style
border-top-color
定義頂部邊框。
值與通用屬性的值相同。 - border-left
border-left-width
border-left-style
border-left-color
定義左邊框。
值與通用屬性的值相同。 - border-right
border-right-width
border-right-style
border-right-color
定義右邊框。
值與通用屬性的值相同。
- border-bottom
border-bottom-width
border-bottom-style
border-bottom-color
值與通用屬性的值相同。
以下代碼使用邊特定邊框屬性。
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h2 {border-bottom-style: dashed;
}
p {border-width: 5px;border-style: solid;border-color: black;border-left-width: 10px;border-left-style: dotted;border-top-width: 10px;border-top-style: dotted;
}
.myStyle {border-bottom: 1px dotted black;
}
</style>
</head>
<body>
<h2>This is the title</h2>
<p>This is a test.</p>
<span class="myStyle">Under 5</span>
</body>
</html>上面的代碼呈現如下：
邊框屬性簡寫
您可以使用在一個步驟中設置所有三個值的縮寫屬性。
- border
設置所有邊的邊框。
Value: 寬度樣式顏色 - border-top
border-bottom
border-left
border-right
設置單個邊的邊框。
Value: 寬度樣式顏色
您可以通過在單個行中指定寬度，樣式和顏色值（以空格分隔）來設置這些屬性的值。
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {border: medium solid black;
}
div#shorthand {border: 1px solid crimson;
}
</style>
</head>
<body>
<p>This is a test.</p>
<div id="shorthand">border</div>
</body>
</html>上面的代碼呈現如下：
border-top屬性的顏色未設置。如果省略一個或多個值，瀏覽器將使用先前定義的值。
在這種情況下，由邊框簡寫屬性指定的顏色。
相關屬性
| 屬性 | 描述 | CSS |
|---|---|---|
| border-bottom-color | 設置底部邊框的顏色 | 1 |
| border-bottom-left-radius | 設置左下角的邊框半徑 | 3 |
| border-bottom-right-radius | 設置右下角的邊界半徑 | 3 |
| border-bottom-style | 設置邊框底部樣式 | 1 |
| border-bottom-width | 設置底邊框的寬度 | 1 |
| border-bottom | 底邊界的簡寫屬性 | 1 |
| border-collapse | 折疊表邊框 | 2 |
| border-color | 設置四個邊框的顏色 | 1 |
| border-image-outset | 設置邊框圖像區域延伸超出邊框的距離 | 3 |
| border-image-repeat | 重復，圓形或拉伸圖像邊界 | 3 |
| border-image-slice | 設置圖像邊框的向內偏移 | 3 |
| border-image-source | 設置邊框圖像位置 | 3 |
| border-image-width | 設置圖像邊框的寬度 | 3 |
| border-image | 所有border-image- *屬性的簡寫屬性 | 3 |
| border-left-color | 設置左邊框的顏色 | 1 |
| border-left-style | 設置左邊框的樣式 | 1 |
| border-left-width | 設置左邊框的寬度 | 1 |
| border-left | 左邊框的簡寫屬性 | 1 |
| border-radius | 簡寫屬性設置所有四個border - * - radius屬性 | 3 |
| border-right-color | 設置右邊框的顏色 | 1 |
| border-right-style | 設置右邊框的樣式 | 1 |
| border-right-width | 設置右邊框的寬度 | 1 |
| border-right | 右邊界的簡寫屬性 | 1 |
| border-spacing | 設置相鄰單元格的邊界之間的距離 | 2 |
| border-style | 設置所有四個邊框的樣式 | 1 |
| border-top-color | 設置頂部邊框的顏色 | 1 |
| border-top-left-radius | 設置左上角的邊界半徑 | 3 |
| border-top-right-radius | 設置右上角的邊界半徑 | 3 |
| border-top-style | 設置頂部邊框的樣式 | 1 |
| border-top-width | 設置頂邊框的寬度 | 1 |
| border-top | 頂部邊框的簡寫屬性 | 1 |
| border-width | 為所有四個方向設置邊框寬度 | 1 |
| border | 簡寫邊框設置 | 1 |