CSS 中的 outline-style 屬性用於設置元素輪廓的外觀。元素的輪廓和邊框相似，但又不相同。輪廓不占用空間，並且繪製在元素的邊界之外。此外，默認情況下，輪廓圍繞元素的所有四個邊繪製，無法更改。
用法:
outline-style:auto|none|dotted|dashed|solid|double|groove|ridge| inset|outset|initial|inherit;
屬性值：
- auto:它通過瀏覽器設置元素的輪廓。
用法:
outline-style:auto;
例：
<!DOCTYPE html> <html> <head> <title> CSS outline-style property </title> <!-- Internal CSS Style Sheet --> <style> h1 { color:green; text-align:center; /* CSS Property for outline-style */ outline-style:auto; } </style> </head> <body> <!-- outline-style:auto;--> <h1>GeeksForGeeks</h1> </body> </html>輸出：
- none:這是默認值，它將輪廓寬度設置為零。因此，它是不可見的。
用法:
outline-style:none;
例：
<!DOCTYPE html> <html> <head> <title> CSS outline-style property </title> <!-- Internal CSS Style Sheet --> <style> h1 { color:green; text-align:center; /* CSS Property for outline-style */ outline-style:none; } </style> </head> <body> <!-- outline-style:none;--> <h1>GeeksForGeeks</h1> </body> </html>輸出：
- dotted:它用於將元素周圍的一係列點設置為輪廓。
用法:
outline-style:dotted;
例：
<!DOCTYPE html> <html> <head> <title> CSS outline-style property </title> <!-- Internal CSS Style Sheet --> <style> h1 { color:green; text-align:center; /* CSS Property for outline-style */ outline-style:dotted; } </style> </head> <body> <!-- outline-style:dotted;--> <h1>GeeksForGeeks</h1> </body> </html>輸出：
- dashed:它用於將元素周圍的一係列虛線段設置為輪廓。
用法:
outline-style:dashed;
例：
<!DOCTYPE html> <html> <head> <title> CSS outline-style property </title> <!-- Internal CSS Style Sheet --> <style> h1 { color:green; text-align:center; /* CSS Property for outline-style */ outline-style:dashed; } </style> </head> <body> <!-- outline-style:dashed;--> <h1>GeeksForGeeks</h1> </body> </html>輸出：
- solid:它用於將元素周圍的實線段設置為輪廓。
用法:
outline-style:solid;
例：
<!DOCTYPE html> <html> <head> <title>CSS outline-style property</title> <!-- Internal CSS Style Sheet --> <style> h1{ color:green; text-align:center; /* CSS Property for outline-style */ outline-style:solid; } </style> </head> <body> <!-- outline-style:solid;--> <h1>GeeksForGeeks</h1> </body> </html>輸出：
- double:它將元素周圍的雙線段設置為輪廓。輪廓的寬度等於各個線段的寬度和它們之間的間距之和。
用法:
outline-style:double;
例：
<!DOCTYPE html> <html> <head> <title>CSS outline-style property</title> <!-- Internal CSS Style Sheet --> <style> h1{ color:green; text-align:center; /* CSS Property for outline-style */ outline-style:double; } </style> </head> <body> <!-- outline-style:double;--> <h1>GeeksForGeeks</h1> </body> </html>輸出：
- groove:它將元素周圍的凹槽線段設置為輪廓，這使得它感覺它是雕刻的。
用法:
outline-style:groove;
例：
<!DOCTYPE html> <html> <head> <title> CSS outline-style property </title> <!-- Internal CSS Style Sheet --> <style> h1 { color:green; text-align:center; outline-width:8px; /* CSS Property for outline-style */ outline-style:groove; } </style> </head> <body> <!-- outline-style:groove;--> <h1>GeeksForGeeks</h1> </body> </html>輸出：
- ridge:它將元素周圍的脊線段設置為輪廓，這讓人感覺它正在擠壓。它與凹槽相反。
用法:
outline-style:ridge;
例：
<!DOCTYPE html> <html> <head> <title> CSS outline-style property </title> <!-- Internal CSS Style Sheet --> <style> h1 { color:green; text-align:center; outline-width:8px; /* CSS Property for outline-style */ outline-style:ridge; } </style> </head> <body> <!-- outline-style:ridge;--> <h1>GeeksForGeeks</h1> </body> </html>輸出：
- inset:它將元素周圍嵌入的線段設置為輪廓，這讓我們感覺它是固定在顯示中的。
用法:
outline-style:inset;
例：
<!DOCTYPE html> <html> <head> <title> CSS outline-style property </title> <!-- Internal CSS Style Sheet --> <style> h1 { color:green; text-align:center; outline-width:8px; /* CSS Property for outline-style */ outline-style:inset; } </style> </head> <body> <!-- outline-style:inset;--> <h1>GeeksForGeeks</h1> </body> </html>輸出：
- outset:它圍繞看起來要出來的元素設置線段，作為輪廓。它與插圖相反。
用法:
outline-style:outset;
例：
<!DOCTYPE html> <html> <head> <title> CSS outline-style property </title> <!-- Internal CSS Style Sheet --> <style> h1 { color:green; text-align:center; outline-width:8px; /* CSS Property for outline-style */ outline-style:outset; } </style> </head> <body> <!-- outline-style:outset;--> <h1>GeeksForGeeks</h1> </body> </html>輸出：
- initial:它用於將 outline-style 屬性設置為其默認值。它將輪廓的寬度設置為零。因此，輪廓不可見。
用法:
outline-style:initial;
例：
<!DOCTYPE html> <html> <head> <title> CSS outline-style property </title> <!-- Internal CSS Style Sheet --> <style> h1 { color:green; text-align:center; outline-width:5px; outline-color:black; /* CSS Property for outline-style */ outline-style:initial; } </style> </head> <body> <!-- outline-style:initial;--> <h1>GeeksForGeeks</h1> </body> </html>輸出：
- inherit:它使 outline-style 屬性從其父元素繼承。
用法:
outline-style:inherit;
例：
<!DOCTYPE html> <html> <head> <title> CSS outline-style property </title> <!-- Internal CSS Style Sheet --> <style> * { padding:1px; } body { outline-style:dashed; } h1 { color:green; text-align:center; outline-width:5px; outline-color:black; /* CSS Property for outline-style */ outline-style:inherit; } </style> </head> <body> <!-- outline-style:inherit;--> <h1>GeeksForGeeks</h1> </body> </html>輸出：
支持的瀏覽器： outline-style 屬性支持的瀏覽器如下：
- 穀歌瀏覽器 1.o
- 互聯網瀏覽器 8
- Firefox 1.5
- Opera 7.0
- 野生動物園 1.2
相關用法
- HTML Style outlineStyle用法及代碼示例
- CSS transition-property用法及代碼示例
- CSS table-layout用法及代碼示例
- CSS text-align用法及代碼示例
- CSS border-top-width用法及代碼示例
- CSS isolation屬性用法及代碼示例
- CSS border-inline-start-style屬性用法及代碼示例
- CSS column-rule-width用法及代碼示例
- CSS word-spacing用法及代碼示例
- CSS animation-delay用法及代碼示例
- CSS margin-top用法及代碼示例
- CSS grid屬性用法及代碼示例
- CSS font-size-adjust用法及代碼示例
- CSS visibility屬性用法及代碼示例
- CSS Display屬性用法及代碼示例
- CSS grid-template-columns用法及代碼示例
注：本文由純淨天空篩選整理自Husban大神的英文原創作品 CSS | outline-style Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。