CSS - 輪廓

CSS 輪廓用於在元素邊框的外部建立線條，而不會影響其大小或佈局。這意味著新增輪廓不會影響元素的大小或相鄰元素的位置。

輪廓的關鍵特徵

以下是輪廓的關鍵特徵

輪廓不佔用空間，這意味著如果邊距不足，輪廓可能會與相鄰元素重疊。
輪廓在所有側面始終相同。您不能為元素的不同側面指定不同的輪廓值。
輪廓不必是矩形，因為它們遵循應用於它們的元素的形狀。
輪廓通常用於在元素獲得焦點（透過按 Tab 鍵或單擊）時突出顯示元素，這對於可訪問性至關重要。

輪廓屬性的型別

在 CSS 中，我們可以設定以下輪廓屬性的樣式。

outline-style: 指定輪廓應該是實線、虛線、雙線還是其他可能的值
outline-width: 指定輪廓的寬度
outline-color: 指定輪廓的顏色
outline-offset: 指定輪廓和元素邊框邊緣之間的間距。

Outline-Style 屬性

outline-style 屬性指定圍繞元素的線條（實線、點線或虛線）的樣式。

以下示例顯示了所有輪廓樣式。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        p{
            padding: 5px;
        }
    </style>
</head>

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

</html>

Outline-Width 屬性

outline-width 屬性指定要新增到元素的輪廓的寬度。其值應為 thin、medium、thick 或長度（以畫素、em 等為單位），就像 border-width 屬性一樣。

示例

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

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

</html>

Outline-Color 屬性

outline-color 用於設定輪廓的顏色。如果未為輪廓指定顏色，則將設定預設值黑色。

示例

<!DOCTYPE html>
<html>

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

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

</html>

Outline Offset 屬性

outline-offset 屬性用於設定元素與其輪廓之間的間距。這對於在元素與其輪廓之間建立更多視覺分離很有用。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        div {
            margin: 20px;
            border: 2px dotted #000;
            background-color: #08ff90;
            outline: 4px solid #666;
            outline-offset: 10px;
        }
    </style>
</head>

<body>
    <h2>Outline-offset property</h2>
    <div> The outline-offset is 10px </div>
</body>

</html>

Outline 簡寫屬性

在 CSS 中，我們可以使用outline 屬性來指定輪廓的樣式、寬度和顏色。outline-offset 屬性不能在簡寫屬性中傳遞。它需要單獨傳遞。

語法

h2 {
    outline: 4px dotted green;
    outline-offset: 5px;
}

以上程式碼將在 h2 元素的所有側新增一個綠色、點狀、4px 厚的輪廓，並帶有 5px 的偏移量。

讓我們看一個例子

示例

<!DOCTYPE html>
<html>

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

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

聚焦時的輪廓

outline 屬性可用於在元素獲得焦點（透過單擊或 Tab 鍵）時突出顯示元素。這樣，我們可以增強可訪問性和使用者互動。讓我們來看一個關於此的示例。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        input {
            padding: 10px;
            border: 2px solid #ccc;
            border-radius: 4px;
            outline: none; /* Remove default outline */
        }
        input:focus {
            outline: 3px solid blue;
            outline-offset: 4px; 
        }
    </style>
</head>

<body>
    <input type="text" 
          placeholder="Focus me to see the outline!" />
</body>

</html>

輪廓與邊框

下表說明了輪廓和邊框之間的區別

輪廓	邊框
輪廓是一種圍繞元素的非矩形形狀，通常使用純色。	邊框是一種繪製在元素內容周圍的矩形形狀，可以是實線、虛線或點線，並且可以具有不同的顏色和大小。
它不佔用佈局中的任何空間，也不會影響元素的大小或位置。	它會影響元素的大小和位置，因為它會增加元素的寬度。
它通常用於突出顯示或強調元素，例如當元素獲得焦點或啟用時。	它可以用於各種目的，例如分隔元素、建立框和新增視覺強調。
它可以使用 CSS 中的 outline 屬性建立。	它可以使用 CSS 中的 border 屬性建立。

示例

<!DOCTYPE html>
<html>
<head>
   <style>
        p {
            outline: thick solid red;
            outline-offset: 5px; 
            padding: 10px; 
            border: #009900 inset 10px;
        }
   </style>
</head>

<body>
    <p>
        See the difference of outline and border around the p 
        element. The outline is red in color and the border 
        is green.
    </p>
</body>

</html>

CSS 輪廓屬性列表

這裡我們列出了與 CSS 輪廓相關的所有屬性。

屬性	描述	示例
outline	此示例顯示了傳遞給 outline 作為簡寫的所有各種值。	嘗試一下
outline-color	此示例顯示了傳遞給 outline-color 的所有各種值。	嘗試一下
outline-style	此示例顯示了傳遞給 outline-style 的所有各種值。	嘗試一下
outline-width	此示例顯示了傳遞給 outline-width 的所有各種值。	嘗試一下
outline-offset	此示例顯示了傳遞給 outline-offset 的所有各種值。	嘗試一下

列印頁面