CSS（9）轮廓
在CSS中，outline属性用于设置元素的轮廓，轮廓是绘制于元素周围的一条线，位于边框（border）边缘的外围，可起到突出元素的作用。CSS outline 属性规定元素轮廓的样式（outline-style）、颜色（outline-color）和宽度（outline-width）。
一、outline-style
outline-style 属性用于设置元素的整个轮廓的样式。outline-style属性的取值包括none（无轮廓）、solid（实线轮廓）和dashed（虚线轮廓）等，样式不能是 none，否则轮廓不会出现。
注意：1.在设置 outline-color 属性之前声明 outline-style 属性，因为元素只有获得轮廓以后才能改变其轮廓的颜色；
2.轮廓线不会占据空间，也不一定是矩形。
3.默认情况下，除了IE浏览器，所有主流浏览器都支持 outline-style 属性；要想使IE浏览器支持元素的 outline-style 属性，给文档加上 !DOCTYPE文档声明即可。
/*设置段落的轮廓样式为点线轮廓*/ p { outline-style:dotted; }
二、outline-color
outline-color 属性设置一个元素整个轮廓中可见部分的颜色。outline-color属性的取值可以是颜色名称（比如red）、十六进制的颜色值（比如#ff000000）或rgb颜色值（如rgb(255,0,0)）。
注意：1.轮廓的样式（outline-style）不能是 none，否则轮廓不会显示。
2.和outline-style属性一样，只有在规定了 !DOCTYPE 时，IE浏览器才支持 outline-color 属性。
/*为段落设置绿色点线轮廓*/ p { border:red solid thin; outline-style:dotted; outline-color:#00ff00; }
三、outline-width
outline-width 属性设置元素整个轮廓的宽度，只有当轮廓样式不是 none 时，这个宽度才会起作用。如果样式为 none，宽度实际上会重置为 0。outline-width属性的取值可以是thin（细轮廓）、medium（默认，中等粗细的轮廓）、thick（粗轮廓）或length（自定义轮廓粗细的值）等。但是，不允许设置负长度值。
/*设置段落的轮廓为5px宽的点状轮廓*/ p { outline-style:dotted; outline-width:5px; }
四、outline
outline属性是前面三个属性（outline-style、outline-color和outline-width）的简写属性，该属性用于在一个声明中设置所有的轮廓属性。这三个属性的顺序也是任意的。
下面是一个采用简写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 /*设置段落边框*/ 8 border:red solid thin; 9 /*为段落设置轮廓（点线红色粗轮廓)*/ 10 outline:#00ff00 dotted thick; 11 } 12 </style> 13 </head> 14 15 <body> 16 <p><b>注释：</b>只有在规定了 !DOCTYPE 时，Internet Explorer 8 （以及更高版本） 才支持 outline 属性。</p> 17 </body> 18 </html>
示例效果如下图：
参考：http://www.w3school.com.cn/css/css_outline.asp
