CSS 輪廓 · W3School HTML & CSS 教程

# CSS 輪廓 **輪廓（outline）是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用。** **CSS outline 屬性規定元素輪廓的樣式、顏色和寬度。** ## 輪廓（Outline）實例： [在元素周圍畫線](/tiy/t.asp?f=csse_outline) ``` <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> p { border:red solid thin; outline:#00ff00 dotted thick; } </style> </head> <body> <p><b>注釋：</b>只有在規定了 !DOCTYPE 時，Internet Explorer 8 （以及更高版本）才支持 outline 屬性。</p> </body> </html> ``` [設置輪廓的顏色](/tiy/t.asp?f=csse_outline-color) ``` <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> p { border:red solid thin; outline-style:dotted; outline-color:#00ff00; } </style> </head> <body> <p><b>注釋：</b>只有在規定了 !DOCTYPE 時，Internet Explorer 8 （以及更高版本）才支持 outline-color 屬性。</p> </body> </html> ``` [設置輪廓的樣式](/tiy/t.asp?f=csse_outline-style) ``` <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> p { border: red solid thin; } p.dotted {outline-style: dotted} p.dashed {outline-style: dashed} p.solid {outline-style: solid} p.double {outline-style: double} p.groove {outline-style: groove} p.ridge {outline-style: ridge} p.inset {outline-style: inset} p.outset {outline-style: outset} </style> </head> <body> <p class="dotted">A dotted outline</p> <p class="dashed">A dashed outline</p> <p class="solid">A solid outline</p> <p class="double">A double outline</p> <p class="groove">A groove outline</p> <p class="ridge">A ridge outline</p> <p class="inset">An inset outline</p> <p class="outset">An outset outline</p> <p><b>注釋：</b>只有在規定了 !DOCTYPE 時，Internet Explorer 8 （以及更高版本）才支持 outline-style 屬性。</p> </body> </html> ``` [設置輪廓的寬度](/tiy/t.asp?f=csse_outline-width) ``` <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> p.one { border:red solid thin; outline-style:solid; outline-width:thin; } p.two { border:red solid thin; outline-style:dotted; outline-width:3px; } </style> </head> <body> <p class="one">This is some text in a paragraph.</p> <p class="two">This is some text in a paragraph.</p> <p><b>注釋：</b>只有在規定了 !DOCTYPE 時，Internet Explorer 8 （以及更高版本）才支持 outline-width 屬性。</p> </body> </html> ``` ## CSS 邊框屬性 "CSS" 列中的數字指示哪個 CSS 版本定義了該屬性。 | 屬性 | 描述 | CSS | | --- | --- | --- | | [outline](/cssref/pr_outline.asp) | 在一個聲明中設置所有的輪廓屬性。 | 2 | | [outline-color](/cssref/pr_outline-color.asp) | 設置輪廓的顏色。 | 2 | | [outline-style](/cssref/pr_outline-style.asp) | 設置輪廓的樣式。 | 2 | | [outline-width](/cssref/pr_outline-width.asp) | 設置輪廓的寬度。 | 2 |