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

时间:2017-06-13

    相信很多接触前端样式编写的朋友,有遇到过类似这样的情况,在页面上编入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 属性。

上一条:IE6下的position:fixed定位兼容性写法分享(fixed:top,left,righ 下一条:【Javascript】修改页面上单条或多条a标签同class名元素的href属

相关文章

最新文章