一篇文章帶你了解CSS 邊框(Border)

作者：前端進階者 2021-01-25 05:39:54

開發前端

CSS邊框屬性允許您定義框的邊框區域。邊框可以是預定義的樣式，例如實線，雙線，虛線等，[也可以是圖像]，定義邊框的樣式（border-style），顏色（border-color）和厚度（border-width）。

[[378009]]

一、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基礎，介紹了關于邊框的相關屬性，定義邊框的寬度，邊框的顏色，邊框的樣式。對每一種屬性通過案例詳細的講解。

歡迎大家積極嘗試，有時候看到別人實現起來很簡單，但是到自己動手實現的時候，總會有各種各樣的問題，切勿眼高手低，勤動手，才可以理解的更加深刻。

責任編輯：姜華來源：前端進階學習交流

Css 前端 Border

国产精品电影_久久视频免费_欧美日韩国产激情_成年人视频免费在线播放_日本久久亚洲电影_久久都是精品_66av99_九色精品美女在线_蜜臀a∨国产成人精品_冲田杏梨av在线_欧美精品在线一区二区三区_麻豆mv在线看

一篇文章帶你了解CSS 邊框(Border)