CSS 轮廓

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

CSS outline 属性规定元素轮廓的样式、颜色和宽度。

轮廓（Outline） 实例：

在元素周围画线

本例演示使用outline属性在元素周围画一条线。 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3. <head>
  4. <style type="text/css">
  5. p 
  6. {
  7. border:red solid thin;
  8. outline:#00ff00 dotted thick;
  9. }
  10. </style>
  11. </head>
  13. <body>
  14. <p><b>注释：</b>只有在规定了 !DOCTYPE 时，Internet Explorer 8 （以及更高版本） 才支持 outline 属性。</p>
  15. </body>
  16. </html>

设置轮廓的颜色

本例演示如何设置轮廓的颜色。 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3. <head>
  4. <style type="text/css">
  5. p 
  6. {
  7. border:red solid thin;
  8. outline-style:dotted;
  9. outline-color:#00ff00;
  10. }
  11. </style>
  12. </head>
  14. <body>
  15. <p><b>注释：</b>只有在规定了 !DOCTYPE 时，Internet Explorer 8 （以及更高版本） 才支持 outline-color 属性。</p>
  16. </body>
  17. </html>

设置轮廓的样式

本例演示如何设置轮廓的样式。 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3. <head>
  4. <style type="text/css">
  5. p
  6. {
  7. border: red solid thin;
  8. }
  9. p.dotted {outline-style: dotted}
  10. p.dashed {outline-style: dashed}
  11. p.solid {outline-style: solid}
  12. p.double {outline-style: double}
  13. p.groove {outline-style: groove}
  14. p.ridge {outline-style: ridge}
  15. p.inset {outline-style: inset}
  16. p.outset {outline-style: outset}
  17. </style>
  18. </head>
  19. <body>
  21. <p class="dotted">A dotted outline</p>
  22. <p class="dashed">A dashed outline</p>
  23. <p class="solid">A solid outline</p>
  24. <p class="double">A double outline</p>
  25. <p class="groove">A groove outline</p>
  26. <p class="ridge">A ridge outline</p>
  27. <p class="inset">An inset outline</p>
  28. <p class="outset">An outset outline</p>
  30. <p><b>注释：</b>只有在规定了 !DOCTYPE 时，Internet Explorer 8 （以及更高版本） 才支持 outline-style 属性。</p>
  31. </body>
  32. </html>

设置轮廓的宽度

本例演示如何设置轮廓的宽度。 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3. <head>
  4. <style type="text/css">
  5. p.one
  6. {
  7. border:red solid thin;
  8. outline-style:solid;
  9. outline-width:thin;
  10. }
  11. p.two
  12. {
  13. border:red solid thin;
  14. outline-style:dotted;
  15. outline-width:3px;
  16. }
  17. </style>
  18. </head>
  19. <body>
  21. <p class="one">This is some text in a paragraph.</p>
  22. <p class="two">This is some text in a paragraph.</p>
  24. <p><b>注释：</b>只有在规定了 !DOCTYPE 时，Internet Explorer 8 （以及更高版本） 才支持 outline-width 属性。</p>
  25. </body>
  26. </html>

CSS 边框属性

"CSS" 列中的数字指示哪个 CSS 版本定义了该属性。

属性 描述 CSS
outline 在一个声明中设置所有的轮廓属性。 2
outline-color 设置轮廓的颜色。 2
outline-style 设置轮廓的样式。 2
outline-width 设置轮廓的宽度。 2