CSS - 輪廓：初學者指南
你好，未來的 CSS 巫師們！今天，我們將要深入 CSS 輪廓的神奇世界。別擔心如果你之前從未寫過一行代碼 - 我將會是你在這次冒險中的友好指導。在這個教學結束時，你將會像專業人士一樣為元素添加輪廓！
CSS 輪廓是什麼？
在我們開始之前，讓我們先了解輪廓是什麼。想像你正在為一本填色書中的圖案上色。那些定義你填色形狀的黑色線條？那就是 CSS 中的輪廓！它是一條圍繞元素的線，位於邊框外部。
現在，讓我們來動手寫一些代碼吧！
outline-width 屬性
outline-width 屬性決定了我們輪廓的粗細。這就像是在選擇使用細筆還是粗筆記號筆。
button {
outline-width: 3px;
}在這個例子中，我們給按鈕添加了一個 3 像素寬的輪廓。你可以使用不同的單位，如 px、em，甚至是關鍵字如 thin、medium 或 thick。
outline-style 屬性
接下來是 outline-style。這裡才是真正有趣的開始！我們可以選擇各種樣式來讓我們的輪廓變得獨特。
這裡是一張所有可能值的表格：
| 值 | 描述 |
|---|---|
| none | 沒有輪廓（默認） |
| dotted | 一系列點 |
| dashed | 一系列短線 |
| solid | 實線 |
| double | 兩條實線 |
| groove | 3D 槽效果 |
| ridge | 3D 岭效果 |
| inset | 3D 凹進效果 |
| outset | 3D 凸出效果 |
讓我們試試幾種：
.box1 {
outline-style: dotted;
}
.box2 {
outline-style: dashed;
}
.box3 {
outline-style: double;
}嘗試這些樣式 - 這就像給你的元素賦予不同的性格！
outline-color 屬性
現在，讓我們為我們的輪廓添加一些顏色。outline-color 是我們的顏料桶。
.warning {
outline-color: red;
}
.success {
outline-color: #00ff00; /* 使用十六進制代碼表示綠色 */
}
.info {
outline-color: rgb(0, 0, 255); /* 使用 RGB 值表示藍色 */
}你可以使用顏色名稱、十六進制代碼或 RGB 值。這就像擁有一個無限的彩色粉筆盒！
outline-offset 屬性
這裡是 CSS 輪廓變得格外特別的地方。outline-offset 屬性讓我們可以將輪廓從元素邊緣移開。這就像給你的元素一個小小的個人空間泡！
.spaced-out {
outline: 2px solid black;
outline-offset: 5px;
}這會在我們的元素外 5 像素處創造一個黑色輪廓。酷炫吧？
outline 屬性（縮寫）
現在，如果告訴你可以在一行中設定所有這些屬性，你會怎麼樣？這就是 outline 縮寫屬性！
button {
outline: 3px dashed blue;
}這等價於：
button {
outline-width: 3px;
outline-style: dashed;
outline-color: blue;
}這就像在一個鍋裡煮一頓三道菜的大餐 - 高效又美味！
輪廓 vs 邊框
"但是等等，" 我聽到你說，"這不是和邊框一樣嗎？" 好問題！雖然輪廓和邊框可能看起來相似，但它們有一些關鍵的區別：
- 輪廓不佔空間 - 它們不影響元素的佈局或大小。
- 在某些瀏覽器中，輪廓可以是非矩形的。
- 輪廓不允許你設定單個邊（像你可以對邊框那樣）。
- 輪廓通常用於無障礙性，例如顯示鍵盤焦點。
這裡有一個小演示：
.with-border {
border: 3px solid red;
padding: 5px;
}
.with-outline {
outline: 3px solid blue;
padding: 5px;
}帶有邊框的元素會因為邊框寬度而變得稍微大一點，而帶有輪廓的元素則保持其原始大小。
實際應用和小貼士
- 無障礙性：輪廓很適合用於指示交互元素的焦點，而不會改變佈局。
input:focus {
outline: 2px solid #4CAF50;
}- 調試：在開發過程中使用明亮的輪廓來視覺化你的佈局。
* {
outline: 1px solid red !important;
}- 創意設計：將輪廓和邊框結合起來，創造獨特的效果。
.fancy-button {
border: 2px solid black;
outline: 2px dashed gold;
outline-offset: 3px;
}記住，精通 CSS 的關鍵在於實踐和嘗試。不要害怕嘗試大胆的組合 - 你可能會偶然發現一些令人驚奇的事物！
總結來說，CSS 輪廓是你在網頁設計工具包中的一個強大工具。它們提供靈活性，不影響佈局，並且可以顯著提升你的網站用戶體驗。所以勇往直前，自信地使用輪廓吧！
祝你好運，未來的 CSS 大師們！?✨
Credits: Image by storyset