文章

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

發布於 更新於
作者 Ned Hsu 6 分鐘閱讀

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

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

1. 邊框（border）

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

  • 語法：
    1

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

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

2. 單邊邊框設置

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

  • 屬性：
    • border-top：設置上邊框。
    • border-right：設置右邊框。
    • border-bottom：設置下邊框。
    • border-left：設置左邊框。
  • 範例：
    1
2
3
4
5
6

    .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：設置邊框的寬度。
    1

    border-width: 2px 4px 6px 8px; /* 順序為上、右、下、左 */
  • border-style：設置邊框的樣式。
    1

    border-style: solid dashed dotted double; /* 順序為上、右、下、左 */
  • border-color：設置邊框的顏色。
    1

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

4. 圓角（border-radius）

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

  • 語法：
    1

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

    .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% 時，可以將一個正方形的元素變成圓形：
    1
2
3
4
5
6

    .circle {
    width: 100px;
    height: 100px;
    border: 2px solid #333;
    border-radius: 50%; /* 正方形元素變成圓形 */
}
  • 也可以使用兩個值來設置橢圓形的圓角：
    1
2
3
4
5
6

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

6. 邊框圖片（border-image）

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

  • 語法：
    1

    border-image: url(border.png) 30 30 round;
  • 值的說明：
    • 第一個參數是圖片的路徑。
    • 接下來四個數字分別定義了圖片的四個部分（上、右、下、左）的切片位置。
    • 最後的 round 表示如何重複圖像（stretch、repeat、round）。
  • 範例：
    1
2
3
4

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

7. 小結

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

Software, CSS
CSS
本文章以 CC BY 4.0 授權