如何使用CSS去掉超链接的虚线边框

这篇文章主要介绍“如何使用CSS去掉超链接的虚线边框”，在日常操作中，相信很多人在如何使用CSS去掉超链接的虚线边框问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”如何使用CSS去掉超链接的虚线边框”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

为文县等地区用户提供了全套网页设计制作服务，及文县网站建设行业解决方案。主营业务为成都网站建设、做网站、文县网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

在前端制作的过程中会发现，一些文字/图片链接，或者一些input控件，在点击时会在周围出现虚线边框，一般会在火狐和IE浏览器下出现虚线框，谷歌下不会有。

这些虚线边框是作为对视觉设计的一种辅助，在不使用鼠标，而用键盘Tab键进行页面浏览时，会标示出当前所在的链接或控件的位置，便于浏览。这对那些视觉有障碍的人士来说更是必不可少的。

但是有些时候我们却不想使用它们，因为浏览器对虚线框的解析有差异，并且不规则，所以在视觉设计上反而成为了某种缺陷。所以这种时候，我们想要禁用这些虚线边框，使浏览者的视觉享受能够完美无瑕。

纯CSS去掉超链接或按钮点击时出现的虚线边框

CSS Code复制内容到剪贴板

1.   

2. a,input,button{ outline:none; }   

3. ::-moz-focus-inner{border:0px;}   

4.   

5.   

6.     

7.   

8. admin10000.com   

9.   

10. admin10000.com   

11.   

从以上代码可以看出，可以通过设置CSS属性outline解决。

FF存在bug，其中input，button标签通过私有属性::-moz-focus-inner特别处理

以上方法在IE6、IE7下无效。可使用 onfocus 属性解决，如下：

CSS Code复制内容到剪贴板

1. admin10000.com  

使用jquery方法只需一句，非常简单，支持所有浏览器

JavaScript Code复制内容到剪贴板

1. $("a,input,button").focus(function(){this.blur()});  

到此，关于“如何使用CSS去掉超链接的虚线边框”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！