CSS - 邊框

上一頁
下一頁

在設計和樣式的上下文中，邊框是指圍繞物件內容（例如文字框、影像或網頁上的任何其他 HTML 元素）的裝飾性或功能性元素。

**border** 屬性用於在元素（例如 div、影像或文字）周圍建立邊框。它允許您自定義邊框的外觀，包括其顏色、寬度和樣式。

邊框在網頁的整體美感和設計中起著至關重要的作用。

目錄


 

邊框的重要性

在 CSS 中使用邊框的重要性可以總結如下：

  • **視覺分離**: 邊框有助於網頁上不同元素的視覺分離，使使用者更容易理解佈局和導航。
  • **組織和結構**: 可以為網格、表格甚至盒子新增邊框，使內容看起來更整潔有序。
  • **強調和焦點**: 可以為元素新增邊框以強調和突出顯示它們。
  • **設計和美觀**: 邊框允許您向元素新增裝飾以增強視覺吸引力。這可以透過邊框的樣式、顏色和寬度來實現。

邊框屬性的型別

在 CSS 中，我們可以設定以下邊框屬性。

  • **border-style:** 指定邊框應該是實線、虛線、雙線還是其他可能的取值之一。
  • **border-width:** 指定邊框的寬度。
  • **border-color:** 指定邊框的顏色。

現在，我們將透過示例來了解如何使用這些屬性。

邊框樣式屬性

**border-style** 屬性用於指定元素的邊框型別。您可以將邊框樣式指定為實線、虛線或點線。檢視以下示例的輸出以瞭解所有型別的邊框樣式。

示例

我們使用內聯 CSS 來指定邊框樣式。

<html>
<head>

</head>

<body>
    <h1>Border Style Property</h1>
    <p style="border-style: none;"> No border. </p>
    <p style="border-style: hidden;"> Hidden border. </p>
    <p style="border-style: dotted;"> Dotted border. </p>
    <p style="border-style: dashed;"> Dashed border. </p>
    <p style="border-style: solid;"> Solid border. </p>
    <p style="border-style: double;"> Double border. </p>
    <p style="border-style: groove;"> Groove border. </p>
    <p style="border-style: ridge;"> Ridge border. </p>
    <p style="border-style: inset;"> Inset border. </p>
    <p style="border-style: outset;"> Outset border. </p>
</body>

<html>

各個邊的邊框樣式

**border-style** 屬性可以專門為每一側指定。可以為每一側傳遞相同的邊框樣式值。

示例

<html>

<head>
    <style>
        p {
            border-top-style: dotted; 
            border-right-style: solid; 
            border-bottom-style: dashed; 
            border-left-style: double;
            padding: 2em;
        }
    </style>
</head>

<body>
    <h2>Border Style Individual Side</h2>
    <p>Different border styles on all sides.</p>
</body>

<html>

邊框寬度屬性

**border-width** 屬性用於指定元素周圍邊框的厚度。它可以具有諸如 thin、medium、thick 或任何長度（以 px 或 em 為單位）的值。讓我們來看一個關於此的示例。

示例

<html>
<head>
    <style>
        p.thin {
            border-style: solid; 
            border-width: thin;
            padding: 10px;
        }
        p.medium {
            border-style: solid; 
            border-width: medium;
            padding: 10px;
        }
        p.thick {
            border-style: solid; 
            border-width: thick;
            padding: 10px;
        }
        p.length {
            border-style: solid; 
            border-width: 10px;
            padding: 10px;
        }
    </style>
</head>

<body>
    <p class="thin">Thin width.</p>
    <p class="medium">Medium width.</p>
    <p class="thick">Thick width.</p>
    <p class="length">Border Width: 10px.</p>
</body>

</html>
在宣告邊框寬度屬性之前，請先宣告邊框樣式屬性，否則將不會看到邊框效果。

各個邊的邊框寬度

**border-width** 屬性可以專門為每一側指定。也可以為每一側傳遞相同的值。

示例

<html>

<head>
    <style>
        p {
            border-style: solid;
            border-top-width: thin;
            border-right-width: thick;
            border-bottom-width: medium;
            border-left-width: 10px;
            padding: 2em;
        }
    </style>
</head>

<body>
    <h1>Border Width Individual Sides</h1>
    <p> Different border widths on all sides. </p>
</body>

</html>

邊框顏色屬性

**border-color** 屬性用於設定邊框的顏色。如果未為邊框指定顏色，則預設值為 currentColor，即前景色。

示例

<html>

<head>
    <style>
        .name {
                border-style: dashed; 
                border-color: red;
                padding: 10px;
            }
        .hex {
                border-style: solid; 
                border-color: #00ff00;
                padding: 10px;
            }
    </style>
</head>

<body>
    <p class="name">Border Color: red</p>
    <p class="hex">Border Color: #00ff00.</p>
</body>

</html>
在宣告邊框顏色屬性之前，請先宣告邊框樣式屬性，否則將不會看到邊框效果。

各個邊的邊框顏色

**border-color** 屬性可以專門為每一側指定。可以為每一側傳遞相同的 **border-color** 值。

示例

<html>
<head>
    <style>
        p {
            border: solid 7px;
            border-top-color: red;
            border-right-color: #0000ff;
            border-bottom-color: rgb(100,123,111);
            border-left-color: rgba(50,123,111,0.4);
            padding: 10px;
        }
    </style>
</head>

<body>
    <p>Check the border colors!!!</p>
</body>

</html>

邊框簡寫屬性

在 CSS 中，我們可以使用 **border** 屬性來指定邊框的樣式、寬度和顏色。

語法

h2 {
    border: 4px dotted green;
}

以上程式碼將在 h2 元素的四面新增 4px 厚的綠色點線邊框。

讓我們來看一個示例

示例

<html>

<head>
    <style>
        p {
            border: solid 4px grey;
            padding: 10px;
        }
        div{
            /* You can specify in any order */
            border: darkred solid 5px;
            padding: 10px;
        }
    </style>
</head>

<body>
    <p> Check the borders of paragraph !!!</p>
    <div> Check the borders of div !!!</div>
</body>
</html>

邊框各個邊的簡寫屬性

如果您想應用所有邊框屬性（例如樣式、寬度和顏色）到元素的一側，您可以使用各個邊的邊框簡寫。

語法

h2 {
    border-top: 4px solid red;
}

以上程式碼將 4px 厚的紅色實線邊框應用於 h2 元素的頂部。

讓我們來看一個示例

示例

<html>

<head>
    <style>
        p {
            border-top: red dashed thick;
            border-right: solid #0000ff medium;
            border-bottom: thin double rgb(100,123,111);
            border-left: rgba(50,123,111,0.4) 15px solid;
            padding: 5px;
        }
    </style>
</head>

<body>
    <p> Check out borders of paragraph !!!</p>
</body>

</html>

覆蓋邊框簡寫屬性

您可以使用任何單獨的屬性來覆蓋 **border** 簡寫屬性。請檢視以下示例程式碼以闡明這一點。

語法

div {
    border: 5px solid gray;
    border-bottom-width: 15px;
}

以上程式碼將具有 5px 厚的灰色實線邊框，但底部寬度為 15px。

讓我們來看一個示例

示例

<html>

<head>
    <style>
        div {
            padding: 10px;
            border: 5px solid gray;
            border-bottom-width: 15px;
        }
    </style>
</head>

<body>
    <div> Check the borders!!! </div>
</body>
</html>

內聯元素的邊框

可以以相同的方式為任何內聯元素新增邊框。邊框的厚度不會影響元素的行高。如果在內聯元素中指定了左右邊框，它將使文字圍繞邊框顯示。

讓我們來看一個示例

示例

<html>

<head>
    <style>
        span {
            border: 5px solid black;
            background-color: silver;
        }
    </style>
</head>

<body>
    <p> 
        Check the <span>inline elements</span> with 
        borders and rest has no border.
    </p>
</body>

</html>

CSS 圖片作為邊框

CSS 還允許使用 **border-image** 屬性將影像設定為其他元素（如 div、span、body、段落等）的邊框。在提供影像源之前，請先宣告 **border-style** ，否則將不會顯示影像作為邊框。

示例

<html>

<head>
    <style>
        div{
            background-color: #f0f0f0;
            border: 20px solid transparent;
            border-image: url(/css/images/border.png) 40;
            padding: 20px;
        }
    </style>
</head>

<body>
    <div>
        <p>
            This is an example of setting a 
            border image using CSS
        </p>
    </div>
</body>
</html>

邊框半徑屬性

CSS **border-radius** 屬性用於指定邊框邊緣的圓度。此屬性的值可以是長度（px、em）或百分比。邊框半徑 50% 表示一個完整的圓。

示例

<html>

<head>
    <style>
         div{
            background-color: #00f9f9;
            height: 150px;
            width: 150px;
            text-align: center;
        }
        .round{
            border-radius: 20px;
        }
        .fullRound{
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <div class="round">
        Round edged div
    </div>

    <div class="fullRound">
        Circular Div
    </div>
</body>

</html>

CSS 邊框所有屬性

所有與 **border** 相關的屬性都列在下表中。

屬性 描述 示例
border 一個簡寫屬性，用於在一個宣告中設定所有邊框屬性。
border-color 一個簡寫屬性，用於設定元素的邊框顏色。
border-style 一個簡寫屬性，用於設定元素邊框的樣式（實線/虛線）。
border-width 一個簡寫屬性，用於設定元素的邊框寬度。
border-bottom 一個簡寫屬性，用於設定元素的底部邊框。
border-bottom-color 設定元素底部邊框的顏色。
border-bottom-width 設定元素下邊框的寬度。
border-bottom-style 設定元素下邊框的樣式。
border-left 一個簡寫屬性，用於設定元素的左邊框。
border-left-color 設定元素左邊框的顏色。
border-left-width 設定元素左邊框的寬度。
border-left-style 設定元素左邊框的樣式。
border-right 一個簡寫屬性，用於設定元素的右邊框。
border-right-color 設定元素右邊框的顏色。
border-right-width 設定元素右邊框的寬度。
border-right-style 設定元素右邊框的樣式。
border-top 一個簡寫屬性，用於設定元素的上邊框。
border-top-color 設定元素上邊框的顏色。
border-top-width 設定元素上邊框的寬度。
border-top-style 設定元素上邊框的樣式。
border-image 一個簡寫屬性，用於設定邊框影像。
border-image-outset 設定影像外邊距，即邊框影像區域超出邊框框多少。
border-image-repeat 此屬性確定是否應重複、圓角、間隔或拉伸邊框影像。
border-image-source 設定作為元素邊框的影像的源/路徑。
border-image-slice 此屬性顯示如何在邊框中切片影像。
border-image-width 設定要設定為邊框的影像的寬度。
列印頁面
上一頁
下一頁
廣告