使用-webkit-box-shadow设计边框阴影效果效果图如下，下面将介绍如何实现这样的效果
工具/原料
文本编辑器
方法/步骤
1
文本编辑器或网页开发工具（如：DW），这里笔者使用EditPlus，新建一个网页文本（.html）
2Document
编辑简单得页面代码：添加一个文本框（input）给文本框border设置基础样式
3
未获取焦点时样式，border为默认黑色边框
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; }