css outline

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

  要始终在 outline-color 属性之前声明 outline-style 属性。元素只有获得轮廓以后才能改变其轮廓的颜色。

  可能的值描述：

  none 默认。定义无轮廓。 
  dotted 定义点状的轮廓。 
  dashed 定义虚线轮廓。 
  solid 定义实线轮廓。 
  double 定义双线轮廓。双线的宽度等同于 outline-width 的值。 
  groove 定义 3D 凹槽轮廓。此效果取决于 outline-color 值。 
  ridge 定义 3D 凸槽轮廓。此效果取决于 outline-color 值。 
  inset 定义 3D 凹边轮廓。此效果取决于 outline-color 值。 
  outset 定义 3D 凸边轮廓。此效果取决于 outline-color 值。 
  inherit 规定应该从父元素继承轮廓样式的设置。

 

  outline控制的到底是什么呢？

    当聚焦a标签的时候，在a标签的区域周围会有一个虚线的框，这个框不同于border的是，它是不占有任何宽度的。当你取消焦点的时候，这个虚线框就会自然消失。你可以通过遨游、火狐或者ie的几个版本看到。而safari、opera、goole浏览器等本身就不支持这个效果，所以看不到。

    基本上这个是没有用的效果，大多数情况下我们会希望不要出现这种效果，于是给a标签设置outline:none;很遗憾的是，ie6、7和遨游浏览器里都不能实现，只有ff,ie8在加了outline:none后会取消聚焦的虚线框。

 

  怎么样才能取消这个虚线框呢？常用方法有三种：

  1：在a标签里加入js控制，当a标签被聚焦时，强制取消焦点，这时候a标签自然不会有虚线框。

<a href="#" onfocus="this.blur();">测试</a>

  这里设置聚焦时触发blur();强制取消焦点。自然是屡试不爽。

  2：在a标签里嵌套其他标签，比如span 或者var等等，把内容放在被嵌套的标签里。这时候点击这个链接，聚焦的是a的子标签，自然不会聚焦在a标签上，所以也能避免这个问题。

  3：不用a标签做链接，采用其他标签，使用js做出hover的效果，在css里加入cursour:pointer;设置鼠标以上时变小手。给用户是链接的错觉。使用js做点击时的页面跳转等。最大的缺点是对用户友好性比前两种差很多。