逐风教你如何去掉谷歌浏览器下的外边框样式

编辑:逐风博客 2014-05-01 00:00:00 阅读热度:0

    相信很多接触前端样式编写的朋友,有遇到过类似这样的情况,在页面上编入input、button等HTML标签,在各大浏览器上浏览,特别是在谷歌浏览器下浏览时,会发现输入框或者按钮在点击的时候会莫名的多出个外边框的样式出来,例如下图:

经过一番研究,终于找到了解决的方法,在CSS中加入:

outline: 0;

就可以去除这多余的样式了;


以下是对outline属性的介绍:

outline 定义和用法

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


注释:轮廓线不会占据空间,也不一定是矩形。

      outline 简写属性在一个声明中设置所有的轮廓属性。


可以按顺序设置如下属性:

outline-color
outline-style
outline-width


以下是属性实践:

p {
border:red solid thin;
outline:#00ff00 dotted thick;
}

执行结果:

注释:只有在规定了 !DOCTYPE 时,Internet Explorer 8 (以及更高版本) 才支持 outline 属性。

CSS 单行溢出文本显示省略号...的方法(兼容IE FF)
IE6下的position:fixed定位兼容性写法分享(fixed:top,left,right,bottom)
逐风开发在线 逐风

懒惰:是这样一种品质,它使得你花大力气去避免消耗过多的精力。它敦促你写出节省体力的程序,同时别人也能利用它们。为此你会写出完善的文档,以免别人问你太多问题。