1、文本编辑器或网页开发工具（如：DW），这里笔者使用EditPlus，新建一个网页文本（.html）
2、编辑简单得页面代码：添加一个文本框（input）给文本框border设置基础样式倦虺赳式<!doctype html><html><head> <meta c茑霁酌绡harset="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; }
