本文目录

效果

输入框选中前: 输入框选中后:

代码

[cc lang=”css”] input { transition: all 0.30s ease-in-out; -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; border: #35a5e5 1px solid; border-radius: 4px; outline: none; } input:focus { box-shadow: 0 0 5px rgba(81, 203, 238, 1); -webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 1); -moz-box-shadow: 0 0 5px rgba(81, 203, 238, 1); } [/cc]

这里通过运用transition属性来展现input框的变化。 同时,这里需要用outline属性来使safari和chrome的默认高亮无效。 这里在使用box-shadow属性时,为了使其不像是阴影效果而达到发光的效果,因而采用了明亮的蓝色。 同时也可以用RGBA,这样就可以控制颜色的透明度了。 同时可以用border-radius属性来做圆角效果。 转载自:http://blog.csdn.net/huang100qi/article/details/7885455