使用-webkit-box-shadow设计边框阴影效果效果图如下，下面将介绍如何实现这样的效果
文本编辑器或网页开发工具（如：DW），这里笔者使用EditPlus，新建一个网页文本（.html）
编辑简单得页面代码：添加一个文本框（input）给文本框border设置基础样式!doctypehtmlhtmlheadmetacharset=UTF-8titleDocument/titlestyleinput:active{/*文本框获取激活时的样式*/border:1pxsolidred;}input:focus{/*文本框获取焦点时的样式*/border:1pxsolidred;}/style/headbodyinputtype=text/!--文本框--/body/html
未获取焦点时样式，border为默认黑色边框
获取焦点（激活）时样式，border为刚刚在文件中自定义的样式即：input:active{/*文本框获取激活时的样式*/border:1pxsolidred;}input:focus{/*文本框获取焦点时的样式*/border:1pxsolidred;}
实现了上面的基本效果之后，会发现边框看着还不够炫，这时我们就需要使用-webkit-box-shadow设计边框阴影效果来实现文章前面提到的效果实现方式如下：对样式做改动input:active{ border:1pxsolidred; border-color:#58ACFA; -webkit-transition:borderlinear.2s,-webkit-box-shadowlinear.5s; -webkit-box-shadow:px#58ACFA;-moz-box-shadow:px#58ACFA;box-shadow:px#58ACFA; } input:focus{ border:1pxsolidred; border-color:#58ACFA; -webkit-transition:borderlinear.2s,-webkit-box-shadowlinear.5s; -webkit-box-shadow:px#58ACFA; -moz-box-shadow:px#58ACFA; box-shadow:px#58ACFA; }
查看原文产品建议及投诉请联系：shoujibaidu
baidu.