输入框蓝光特效
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>CSS3 input输入框蓝光特效 - 代码笔记 www.198zone.com</title> <style type="text/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; width: 200px; border:#35a5e5 1px solid; border-radius:3px; 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); } </style> </head> <body> <div style=" margin:100px 700px;"> <input type="text" placeholder="用户名或邮件地址" style="height:25px"/> <br> <br> <input type="password" placeholder="请输入密码" style="height:25px"/> </div> </body> </html>