CSS border 相關屬性介紹:新手必讀

更新日期: 2024 年 10 月 22 日

在網頁設計中,邊框(border)是常用來強調元素、分隔區域或增強視覺效果的屬性。

CSS 提供了一系列 border 屬性,讓我們能夠靈活地控制元素的邊框,包括邊框的寬度、樣式、顏色等。

在這篇文章中,我們將詳細介紹 CSS border 相關的屬性,並通過範例幫助你快速掌握它們的使用方法。

border 屬性總覽

在 CSS 中,border 屬性有多個子屬性,允許你為元素設置邊框的寬度、樣式和顏色。

這些屬性可以分開使用,也可以通過簡寫語法一次性設置。

主要的 border 屬性包括:

  • border-width
  • border-style
  • border-color
  • border-radius
  • border(簡寫屬性)

border-width

說明

border-width 用來設置邊框的寬度。

你可以使用具體的數值(如 pxem),也可以使用一些預定義的值(如 thinmediumthick)。

基本語法

element {
  border-width: 寬度值;
}

範例

div {
  border-width: 2px;
}

這段程式碼會為 div 元素設置一個 2px 寬的邊框。

多邊設置

你還可以為每一邊設置不同的寬度:

div {
  border-width: 2px 4px 6px 8px;
}

這段程式碼依次為上、右、下、左四個邊設置不同的邊框寬度。

border-style

說明

border-style 用來定義邊框的樣式。

CSS 支援多種邊框樣式,包括實線、虛線、點線等。

常見的邊框樣式

  • solid:實線
  • dashed:虛線
  • dotted:點線
  • double:雙線
  • groove:凹槽邊框
  • ridge:脊狀邊框
  • none:無邊框

基本語法

element {
  border-style: 樣式;
}

範例

div {
  border-style: solid;
}

這段程式碼會為 div 元素設置一個實線邊框。

多邊設置

border-width 一樣,你也可以為每個邊設置不同的樣式:

div {
  border-style: solid dashed dotted double;
}

這段程式碼依次為上、右、下、左四個邊設置不同的邊框樣式。

border-color

說明

border-color 用來設置邊框的顏色。你可以使用顏色名稱、十六進制顏色值(如 #000000)、RGB 或 HSL 顏色值。

基本語法

element {
  border-color: 顏色值;
}

範例

div {
  border-color: red;
}

這段程式碼會為 div 元素設置紅色的邊框。

多邊設置

你可以為四個邊設置不同的顏色:

div {
  border-color: red green blue yellow;
}

這段程式碼會依次為上、右、下、左邊框設置紅、綠、藍、黃色。

border-radius

說明

border-radius 用來設置元素邊框的圓角。這個屬性讓元素邊框不再只是方形,而是可以變成圓角或圓形的樣式。

基本語法

element {
  border-radius: ;
}

範例

div {
  border: 2px solid black;
  border-radius: 10px;
}

這段程式碼會讓 div 元素的邊框變成圓角,圓角半徑為 10px。

完全圓形邊框

border-radius 的值是元素的寬或高的一半時,元素的邊框會變成一個圓形:

div {
  width: 100px;
  height: 100px;
  border: 2px solid black;
  border-radius: 50%;
}

這段程式碼會將 div 變成一個圓形。

border 簡寫屬性

說明

border 屬性是 border-widthborder-styleborder-color 的簡寫方式。這讓我們可以在一行內同時定義這三個屬性,簡化程式碼。

基本語法

element {
  border: [邊框寬度] [邊框樣式] [邊框顏色];
}

範例

div {
  border: 2px solid blue;
}

這段程式碼會為 div 元素設置一個 2px 寬的藍色實線邊框。

案例:多邊框設置與圓角應用

HTML

<div class="box">範例內容</div>

CSS

.box {
  width: 200px;
  height: 200px;
  border: 5px solid red;
  border-radius: 15px;
}

結果

這段程式碼會產生一個寬 200px、高 200px 的方框,擁有 5px 寬的紅色實線邊框,並且邊框有 15px 的圓角。這樣的設置既讓元素邊框清晰可見,又讓元素具有柔和的圓角效果。

總結

CSS 的 border 屬性為我們提供了靈活的邊框設置方式,讓我們能夠輕鬆控制元素的邊框寬度、樣式、顏色和圓角等。

無論是基本的實線邊框,還是更複雜的多邊框設置和圓角應用,這些屬性都能幫助我們在網頁設計中創建多樣化的邊框效果。

希望這篇文章能幫助你掌握 border 相關屬性的基本概念,並在實際開發中靈活運用它們!

Similar Posts