去掉前端页面点击按钮时产生的矩形虚线框

             

原谅我图截得太丑，但是相信大家还是会发现当我们点击页面的按钮时，会出现一个矩形的虚线框。很多时候我们不需要这个鸡肋又丑的虚线框。

的解决的方法肯定不是最合理的，但是简单粗暴。

我们在百度这个问题的时候，很容易查出，控制这个效果的属性是 outline。  去掉虚线框的CSS也就是outline ： none；但问题是我们得确定这个按钮是哪个标签的啊

所以我们需要谷歌浏览器（其实其他浏览器，应该也有对应的工具）

第一步：把页面在 Google Chrome（谷歌浏览器）中打开，然后打开 选项-->更多工具-->开发者工具 （其实正常人一般都知道，按F12就可以了，或许还有文艺一点的老哥不喜欢简单粗暴的，会喜欢使用  Ctrl+Shift+I）。

第二步：确定产生虚线框的html元素。

这个图的左上角的小图标，点它！！

然后就可以把鼠标悬浮在你想去掉的虚线框的元素上，估计你就会找到你要改的标签了，如图

第三步：在你想去掉虚线框的标签的样式上加上一句 style=" outline ： none；"  或者直接用类选择器，酱紫写<style> span {outline:none }
</style>   但是不推荐这样写 。如果成功的去掉了难看的框框，就不需要往下看了。如果这两个方法都不好使，看第四步。

第四步：如果通过第三步的操作，还是去不掉这该死的框框，我们还是有办法的，不成功的原因估计是因为其他样式的优先级高于你写的样式。如果是这样，我们就可以使用  !important  来提高优先级。style=" outline ： none!importan；" 或者<style> span {outline:none !importan ｝</style>

就酱了，如果还不好使，对不起我耽误你时间了