CSS3 transition 以及 box-shadow实现，要注意的是outline:none;
代码：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { text-align: center; } input[type=‘text‘] { font-size: 14px; transition: box-shadow linear .2s, border-color linear .2s; margin-top: 100px; width: 200px; padding: 8px; border: 1px solid #aaaaaa; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } input[type=‘text‘]:focus,input[type=‘text‘]:hover { outline: none; box-shadow: 0 0 15px rgba(152,188,235,1.0); border-color: rgba(152,188,235,1.0) } </style> </head> <body> <input type="text" /> </body> </html>
Demo:
顺便地，把这个样式应用到了下面的评论框中，博客园可以自己提交css，这个特爽
原文：http://www.cnblogs.com/yedeying/p/3619136.html