CSS 邊框

2018-01-16 16:42 更新

基本邊框的三個(gè)關(guān)鍵屬性是 border-width border-style 和 border-color 。

  • border-width - 設(shè)置邊框的寬度。
  • border-style - 設(shè)置用于繪制邊框的樣式。
  • border-color - 設(shè)置邊框的顏色。 值：顏色。

以下代碼定義了一個(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)如下：

基本邊框

邊框?qū)挾?/h2>

您可以將 border-width 屬性表示為

  • CSS長(zhǎng)度規(guī)則：em，px或cm
  • 將繪制邊框的區(qū)域的寬度的百分比：perc％
  • 三個(gè)快捷值之一：thin，medium，thick

默認(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 屬性可以是以下列表中顯示的值之一。

  • none - 定義無邊框。
  • dashed - 定義虛線。
  • dotted - 定義點(diǎn)狀邊框。
  • double - 定義雙線。
  • groove - 定義3D 凹槽邊框。
  • inset - 定義3D inset 邊框。
  • outset - 定義3D outset 邊框。
  • ridge - 定義3D 壟狀邊框。。
  • solid - 定義實(shí)線。

默認(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)如下：

示例1
示例2
示例3

邊框顏色

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)用不同的邊框。

  • 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 
      定義底部邊框。
      值與通用屬性的值相同。

以下代碼使用邊特定邊框?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)如下：

特定邊框?qū)傩? /><br /></p><h2 id=

邊框?qū)傩院?jiǎn)寫

您可以使用在一個(gè)步驟中設(shè)置所有三個(gè)值的縮寫屬性。

  • border
    設(shè)置所有邊的邊框。
    Value: 寬度樣式顏色
  • border-top
    border-bottom
    border-left
    border-right
    設(shè)置單個(gè)邊的邊框。
    Value: 寬度樣式顏色

您可以通過在單個(gè)行中指定寬度，樣式和顏色值（以空格分隔）來設(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)如下：

設(shè)置寬度，樣式和顏色

border-top屬性的顏色未設(shè)置。如果省略一個(gè)或多個(gè)值，瀏覽器將使用先前定義的值。

在這種情況下，由邊框簡(jiǎn)寫屬性指定的顏色。

屬性 描述 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)寫屬性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)寫屬性3
border-left-color設(shè)置左邊框的顏色1
border-left-style設(shè)置左邊框的樣式1
border-left-width設(shè)置左邊框的寬度1
border-left左邊框的簡(jiǎn)寫屬性1
border-radius簡(jiǎn)寫屬性設(shè)置所有四個(gè)border - * - radius屬性3
border-right-color設(shè)置右邊框的顏色1
border-right-style設(shè)置右邊框的樣式1
border-right-width設(shè)置右邊框的寬度1
border-right右邊界的簡(jiǎn)寫屬性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)寫屬性1
border-width為所有四個(gè)方向設(shè)置邊框?qū)挾?/td>1
border簡(jiǎn)寫邊框設(shè)置1
以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)