1、文本编辑器或网页开发工具（如：DW），这里笔者使用EditPlus，新建一个网页文本（.html）
2、编辑简单得页面代码：
添加一个文本框（input）
给文本框border设置基础样式
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
input:active{/*文本框获取激活时的样式*/
border:1px solid red;
}
input:focus{/*文本框获取焦点时的样式*/
border:1px solid red;
}
</style>
</head>
<body>
<input type="text" /><!--文本框-->
</body>
</html>
3、未获取焦点时样式，border为默认黑色边框
4、获取焦点（激活）时样式，border为刚刚在文件中自定义的样式即：
input:active{/*文本框获取激活时的样式*/
border:1px solid red;
}
input:focus{/*文本框获取焦点时的样式*/
border:1px solid red;
}
5、实现了上面的基本效果之后，会发现边框看着还不够炫，这时我们就需要使用-webkit-box-shadow设计边框阴影效果来实现文章前面提到的效果
实现方式如下：
对样式做改动
input:active{
border:1px solid red;
border-color:#58ACFA;
-webkit-transition:border linear .2s,-webkit-box-shadow linear .5s;
-webkit-box-shadow:0 0 3px #58ACFA;
-moz-box-shadow: 0 0 3px #58ACFA;
box-shadow:0 0 3px #58ACFA;
}
input:focus{
border:1px solid red;
border-color:#58ACFA;
-webkit-transition:border linear .2s,-webkit-box-shadow linear .5s;
-webkit-box-shadow:0 0 3px #58ACFA;
-moz-box-shadow: 0 0 3px #58ACFA;
box-shadow:0 0 3px #58ACFA;
}
