邊框（Border）和圓角（Border Radius）

邊框（Border）和圓角（Border Radius）

CSS 的 邊框（Border） 和 圓角（Border Radius） 是用來裝飾和設計元素外觀的重要屬性。邊框可用於設定元素的外邊框樣式、寬度和顏色，而圓角則用於控制元素邊框的圓滑程度。

1. 邊框（border）

邊框（Border） 屬性用於設置元素的邊框，它由三個主要部分組成：邊框寬度（Width）、邊框樣式（Style） 和 邊框顏色（Color）。

• 語法：

  border: [寬度] [樣式] [顏色];
  

• 值的說明：
  • 寬度：可以使用具體的長度（如 2px）、百分比或關鍵字（如 thin、medium、thick）。
  • 樣式：常用的樣式包括 solid（實線）、dashed（虛線）、dotted（點線）、double（雙線）、groove（凹線）、ridge（凸線）、inset（內嵌）、outset（外凸）、none（無邊框）等。
  • 顏色：可以使用任何有效的 CSS 顏色值，例如名稱（red）、十六進位值（#ff0000）、RGB 或 HSL 等。
• 範例：

  .box {
      border: 2px solid #333; /* 2像素的實線邊框，顏色為深灰色 */
  }
  

2. 單邊邊框設置

我們可以單獨設置元素的每一個邊的邊框：

• 屬性：
  • border-top：設置上邊框。
  • border-right：設置右邊框。
  • border-bottom：設置下邊框。
  • border-left：設置左邊框。
• 範例：

  .element {
      border-top: 3px dashed red;    /* 上邊框為3像素虛線，紅色 */
      border-right: 2px solid blue;  /* 右邊框為2像素實線，藍色 */
      border-bottom: 1px dotted green; /* 下邊框為1像素點線，綠色 */
      border-left: 5px double purple;  /* 左邊框為5像素雙線，紫色 */
  }
  

3. 邊框的簡寫屬性

• border-width：設置邊框的寬度。

  border-width: 2px 4px 6px 8px; /* 順序為上、右、下、左 */
  

• border-style：設置邊框的樣式。

  border-style: solid dashed dotted double; /* 順序為上、右、下、左 */
  

• border-color：設置邊框的顏色。

  border-color: red green blue black; /* 順序為上、右、下、左 */
  

4. 圓角（border-radius）

圓角（Border Radius） 屬性用於設置元素邊框的圓角效果。可以為所有角設置相同的圓角半徑，也可以為每個角設置不同的圓角半徑。

• 語法：

  border-radius: [左上角] [右上角] [右下角] [左下角];
  

• 值的說明：
  • 單個值：為所有四個角設置相同的圓角半徑，例如 border-radius: 10px;。
  • 兩個值：第一個值應用於左上角和右下角，第二個值應用於右上角和左下角，例如 border-radius: 10px 5px;。
  • 四個值：依次為左上角、右上角、右下角、左下角，例如 border-radius: 10px 20px 30px 40px;。
• 範例：

  .rounded-box {
      border: 2px solid #000;     /* 設置2像素的黑色實線邊框 */
      border-radius: 15px;        /* 四角皆設置為15像素的圓角 */
  }
  
  .different-radius {
      border: 2px solid #666;     /* 設置2像素的灰色實線邊框 */
      border-radius: 10px 20px 30px 40px; /* 左上角為10px，右上角為20px，右下角為30px，左下角為40px */
  }
  

5. 圓形與橢圓形圓角

border-radius 可以設置成圓形或橢圓形的效果：

• 當將 border-radius 設置為 50% 時，可以將一個正方形的元素變成圓形：

  .circle {
      width: 100px;
      height: 100px;
      border: 2px solid #333;
      border-radius: 50%; /* 正方形元素變成圓形 */
  }
  

• 也可以使用兩個值來設置橢圓形的圓角：

  .oval {
      width: 150px;
      height: 100px;
      border: 2px solid #333;
      border-radius: 50% / 30%; /* 水平半徑50%，垂直半徑30% */
  }
  

6. 邊框圖片（border-image）

邊框圖片（Border Image） 屬性用於將圖像應用為邊框。可以使用該屬性來代替傳統的邊框設計，使設計更具創意。

• 語法：

  border-image: url(border.png) 30 30 round;
  

• 值的說明：
  • 第一個參數是圖片的路徑。
  • 接下來四個數字分別定義了圖片的四個部分（上、右、下、左）的切片位置。
  • 最後的 round 表示如何重複圖像（stretch、repeat、round）。
• 範例：

  .fancy-border {
      border-width: 10px;
      border-image: url('fancy-border.png') 10 10 round;
  }
  

7. 小結

邊框和圓角是 CSS 中控制元素外觀的重要屬性。邊框屬性允許我們創建各種樣式的邊框，而圓角屬性則使得我們能夠打造圓滑的邊角效果。這些屬性的靈活使用有助於增強網頁設計的視覺吸引力，並能創造出更具創意和個性化的佈局。