CSS 轮廓

轮廓outline处在边框边界的外面，它不像边框那样参与到文档流中，因此轮廓出现或消失时不会影响文档流，即不会导致文档的重新显示。

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

轮廓样式

　　与边框类似，轮廓最基本的方面是样式，如果一个轮廓没有样式，轮廓将根本不会存在。与边框不同的是，值少了一个hidden

outline-style

　　值: none | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit

　　初始值: none

　　应用于: 所有元素

　　继承性: 无

轮廓宽度

　　与边框类似，轮廓宽度不能为负数，也不能指定为百分比值

outline-width

　　值: thin | medium | thick | | inherit

　　初始值: medium

　　应用于: 所有元素

　　继承性: 无

　　[注意]如果轮廓的样式是none，则轮廓宽度计算值为0

轮廓颜色

　　与边框不同，轮廓颜色有关键字invert反色轮廓，代表对轮廓所在的像素完全反色转换，使轮廓在不同的背景颜色中都可见。但实际上invert关键字只有IE浏览器支持，其他浏览器的轮廓颜色是元素本身的前景色

outline-color

　　值: | invert | inherit

　　初始值: invert(IE)、前景色(其他浏览器)

　　应用于: 所有元素

　　继承性: 无

轮廓偏移

　　轮廓偏移用来定义轮廓的偏移位置的数值。当参数值为正数时，表示轮廓向外偏移；当参数值为负值时，表示轮廓向内偏移

　　[注意]IE浏览器不支持

outline-offset

　　值: length | inherit

　　初始值: 0

　　应用于: 所有元素

　　继承性: 无

轮廓简写

　　轮廓outline类似于边框样式的border属性，允许一次完成轮廓样式、宽度和颜色的设置。由于给定轮廓必须采用某种统一的样式、宽度和颜色，所以outline是关于轮廓的唯一简写属性。对于轮廓没有诸如outline-top或outline-right之类的属性

　　[注意]outline中并没有包括outline-offset，需要对outline-offset进行单独设置

outline

　　值: [ || || ] | inherit

　　初始值: 无

　　应用于: 所有元素

　　继承性: 无

实例：

      
  
点线轮廓
 
虚线轮廓
 
实线轮廓
 
双线轮廓
 
凹槽轮廓
 
垄状轮廓
 
嵌入轮廓
 
外凸轮廓