为Input输入框添加圆角并去除阴影 去除获得焦点时方角样式

标签：png   内容   rom   firefox   .com   适配   需要   inpu   order   

目录

1、为Input输入框添加圆角并去除阴影

2、去除获得焦点时方角样式

内容

1、为Input输入框添加圆角并去除阴影

　　1.1 border-radius不同浏览器下兼容设置：

.boder-radius{
     -webkit-border-radius:6px;//适配以webkit为核心的浏览器(chrome、safari等)
     -moz-border-radius:6px;//适配firefox浏览器
     -ms-border-radius:6px;//适配IE浏览器
     -o-border-radius:6px;//适配opera浏览器
     border-radius:6px;//适配所有浏览器(需要放在最后面，类似于if..else if..else..)
}

　　1.2 去除阴影

　　在我们为input输入框设置圆角值时，一般情况下会出现向内部凹陷的阴影，这个时候我们只需要为input输入框设置一个border值即可

border: 1px solid #DBDBDB;

　　最后的结果如下所示：

2、去除获得焦点时方角样式

　　input设置圆角值之后，在聚焦的时候会出现外边框

　　只需要加上代码 outline:none;即可消除聚焦时的外边框

为Input输入框添加圆角并去除阴影 去除获得焦点时方角样式

标签：png   内容   rom   firefox   .com   适配   需要   inpu   order   

原文地址：http://www.cnblogs.com/leijing0607/p/7509317.html