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 |