一篇文章帶你了解CSS 邊框(Border)
一、CSS邊框屬性
CSS邊框屬性允許您定義框的邊框區域。邊框可以是預定義的樣式，例如實線，雙線，虛線等，[也可以是圖像]，定義邊框的樣式(border-style)，顏色(border-color)和厚度(border-width)。
1. 邊框寬度屬性(border-width)
border-width屬性指定邊框區域的寬度。用于同時設置元素邊框的所有四個邊的厚度。
例:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>項目</title>
- <style>
- p.one {
- border-style: solid;
- border-width: 5px;
- border-color: red;
- }
- p.two {
- border-style: solid;
- border-width: 5px 10px;
- border-color: red;
- }
- p.three {
- border-style: solid;
- border-width: 5px 10px 15px;
- border-color: red;
- }
- p.four {
- border-style: solid;
- border-width: medium 10px thick 15px;
- border-color: red;
- }
- </style>
- </head>
- <body style="background-color: aqua;">
- <p class="one">
- <strong>單值語法：</strong>：單個值設置所有四個邊框的寬度。</p>
- <p class="two">
- <strong>二值語法：</strong>第一個值設置上下邊框的寬度，第二個值設置左右邊框的寬度。</p>
- <p class="three">
- <strong>三值語法</strong>：第一個值設置頂部邊框的寬度，第二個值設置左右邊框的寬度，第三個值設置 底部邊框的寬度。</p>
- <p class="four">
- <strong>四值語法</strong>：每個值都按上，右，下和左的順序分別設置邊框的寬度。</p>
- <p>
- <strong>注意</strong>：必須在
- <code> border-width </code>屬性之前聲明
- <code> border-style </code>屬性。元素必須具有邊框，然后才能設置邊框的寬度。</p>
- </body>
- </html>
注：如果border-width缺少或未指定屬性值，border-width則將使用的默認值(medium)。
2. 邊框樣式屬性 (border-style)
該border-style屬性設置框邊框的樣式。它是用于設置元素邊框所有四個側面的線型的簡寫速記屬性。
該border-style屬性可采取以下值之一：none，hidden，dashed，dotted，double，groove，inset，outset，ridge和solid 。
例：
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>項目</title>
- <style>
- p {
- border-width: 3px;
- }
- 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;
- }
- </style>
- </head>
- <body style="background-color: aqua;">
- <h1>各種邊框樣式。</h1>
- <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>
- </body>
- </html>
3. 邊框顏色屬性 (border-color)
該border-color屬性指定color框的邊框。這也是用于設置元素邊框所有四個側面的顏色的簡寫屬性。
例：
- <style>
- p.one {
- border-style: solid;
- border-color: #ff0000;
- }
- p.two {
- border-style: solid;
- border-color: #ff0000 #00ff00;
- }
- p.three {
- border-style: solid;
- border-color: #ff0000 #00ff00 #0000ff;
- }
- p.four {
- border-style: solid;
- border-color: #ff0000 #00ff00 #0000ff #ff00ff;
- }
- </style>
注意：
border-color如果單獨使用該屬性，則該屬性將不起作用。
使用border-style屬性首先設置邊框。
二、邊框簡寫速記屬性
該border CSS屬性是設置一個或多個單獨的邊框屬性的速記屬性border-style，border-width和border-color在一個單一的規則。
例：
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>CSS邊框速記屬性</title>
- <style>
- p {
- border: 5px solid #ff4500;
- }
- </style>
- </head>
- <body style="background-color: aqua;">
- <p>這是一個段落.</p>
- </body>
- </html>
如果在設置border速記屬性時忽略或未指定單個border屬性的值，則將使用該屬性的默認值(如果有)。
注：
border-color在設置元素的邊框時，如果缺少屬性值或未指定屬性值(例如border: 5px solid;)，則該元素的color屬性將用作的值border-color。
在此例中，邊框將是寬度為5px的黑色實線。
例：
- <style>
- p {
- color: black;
- border: 5px solid;
- }
- </style>
但是，在有border-style屬性的情況下，省略該值將不會顯示任何邊框，因為這個時候border-style屬性 的默認值為none。
在下面的例子中，將沒有邊框：
- <style>
- p {
- border: 5px #00ff00;
- }
- </style>
三、總結
本文基于CSS基礎，介紹了關于邊框的相關屬性，定義邊框的寬度，邊框的顏色，邊框的樣式。對每一種屬性通過案例詳細的講解。
歡迎大家積極嘗試，有時候看到別人實現起來很簡單，但是到自己動手實現的時候，總會有各種各樣的問題，切勿眼高手低，勤動手，才可以理解的更加深刻。
