border-width
border-style
和 border-color
。以下代碼定義了一個(gè)基本邊框。
<!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>
上面的代碼呈現(xiàn)如下:
您可以將 border-width
屬性表示為
默認(rèn)邊框?qū)挾戎禐閙edium。
以下代碼定義了一個(gè)基本邊框。
<!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>
上面的代碼呈現(xiàn)如下:
border-style
屬性可以是以下列表中顯示的值之一。
默認(rèn)值為none,表示不繪制邊框。
以下代碼定義了一個(gè)基本邊框。
<!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>
上面的代碼呈現(xiàn)如下:
border-color
控制邊框顏色。
下面的代碼顯示了如何將邊框顏色設(shè)置為藍(lán)色。
<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>
上面的代碼呈現(xiàn)如下:
您可以使用更具體的屬性為元素的每一側(cè)應(yīng)用不同的邊框。
以下代碼使用邊特定邊框?qū)傩浴?/p>
<!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>
上面的代碼呈現(xiàn)如下:
您可以使用在一個(gè)步驟中設(shè)置所有三個(gè)值的縮寫(xiě)屬性。
您可以通過(guò)在單個(gè)行中指定寬度,樣式和顏色值(以空格分隔)來(lái)設(shè)置這些屬性的值。
<!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>
上面的代碼呈現(xiàn)如下:
border-top屬性的顏色未設(shè)置。如果省略一個(gè)或多個(gè)值,瀏覽器將使用先前定義的值。
在這種情況下,由邊框簡(jiǎn)寫(xiě)屬性指定的顏色。
屬性 | 描述 | CSS |
---|---|---|
border-bottom-color | 設(shè)置底部邊框的顏色 | 1 |
border-bottom-left-radius | 設(shè)置左下角的邊框半徑 | 3 |
border-bottom-right-radius | 設(shè)置右下角的邊界半徑 | 3 |
border-bottom-style | 設(shè)置邊框底部樣式 | 1 |
border-bottom-width | 設(shè)置底邊框的寬度 | 1 |
border-bottom | 底邊界的簡(jiǎn)寫(xiě)屬性 | 1 |
border-collapse | 折疊表邊框 | 2 |
border-color | 設(shè)置四個(gè)邊框的顏色 | 1 |
border-image-outset | 設(shè)置邊框圖像區(qū)域延伸超出邊框的距離 | 3 |
border-image-repeat | 重復(fù),圓形或拉伸圖像邊界 | 3 |
border-image-slice | 設(shè)置圖像邊框的向內(nèi)偏移 | 3 |
border-image-source | 設(shè)置邊框圖像位置 | 3 |
border-image-width | 設(shè)置圖像邊框的寬度 | 3 |
border-image | 所有border-image- *屬性的簡(jiǎn)寫(xiě)屬性 | 3 |
border-left-color | 設(shè)置左邊框的顏色 | 1 |
border-left-style | 設(shè)置左邊框的樣式 | 1 |
border-left-width | 設(shè)置左邊框的寬度 | 1 |
border-left | 左邊框的簡(jiǎn)寫(xiě)屬性 | 1 |
border-radius | 簡(jiǎn)寫(xiě)屬性設(shè)置所有四個(gè)border - * - radius屬性 | 3 |
border-right-color | 設(shè)置右邊框的顏色 | 1 |
border-right-style | 設(shè)置右邊框的樣式 | 1 |
border-right-width | 設(shè)置右邊框的寬度 | 1 |
border-right | 右邊界的簡(jiǎn)寫(xiě)屬性 | 1 |
border-spacing | 設(shè)置相鄰單元格的邊界之間的距離 | 2 |
border-style | 設(shè)置所有四個(gè)邊框的樣式 | 1 |
border-top-color | 設(shè)置頂部邊框的顏色 | 1 |
border-top-left-radius | 設(shè)置左上角的邊界半徑 | 3 |
border-top-right-radius | 設(shè)置右上角的邊界半徑 | 3 |
border-top-style | 設(shè)置頂部邊框的樣式 | 1 |
border-top-width | 設(shè)置頂邊框的寬度 | 1 |
border-top | 頂部邊框的簡(jiǎn)寫(xiě)屬性 | 1 |
border-width | 為所有四個(gè)方向設(shè)置邊框?qū)挾?/td> | 1 |
border | 簡(jiǎn)寫(xiě)邊框設(shè)置 | 1 |
更多建議: