CSS3的块阴影发光效果

我们在访问国外一些网站的时候经常可以看到它们的输入框在选中后会有发光的效果，如上图所示。

很多朋友一看就会明白，这里是给input加了一个box-shadow，然后又运用了过渡属性transition。

但除此之外还有需要注意点几点：

1、有些浏览器的input框默认就要发光效果，比如Safari和Chrome，所以这里要让他们的outline不显示。

2、其次，颜色要采用RBGA值才能达到透明的效果。

由此，我们可以总结出代码：

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 {
border:#35a5e5 1px solid;
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);
}

保存后用现代浏览器看看效果吧，IE8以下的版本就不要试了。