CSS技巧：四步实现会发光的输入框input
通过input标签创建一个输入框后，当用鼠标点击输入框会发现输入框外围边框会变色且会变得模糊，这是因为浏览器的默认样式在捣蛋，接下来我们自定义focus样式。
实现上述效果需要4个步骤
- 取消浏览器默认样式outline。
- 设置边框样式、宽度、颜色。
- 设置边框阴影。
- 渐变过渡效果
取消浏览器默认样式outline
以谷歌浏览器为例，当focus input输入框时浏览器会设置outline: -webkit-focus-ring-color auto 5px;，轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。CSS outline 属性规定元素轮廓的样式、颜色和宽度。这就是为什么当我们什么都没做的时候input focus时外围边框也会发光，取消浏览器默认样式outline:0。
设置边框样式、宽度、颜色
这个so easy了，border: 1px solid #f95d5d;
设置边框阴影
设置边框阴影使用CSS3 box-shadow，语法：box-shadow: h-shadow v-shadow blur spread color inset;。
| 属性 | 值 |
|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值。 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 |
| blur | 可选。模糊距离。 |
| spread | 可选。阴影的尺寸。 |
| color | 可选。阴影的颜色。请参阅 CSS 颜色值。 |
| inset | 可选。将外部阴影 (outset) 改为内部阴影。 |
设置边框阴影box-shadow: 0px 0px 10px 0px #f95d5d;
完整CSS代码：
input:focus{
outline: 0;
border: 1px solid #f95d5d;
box-shadow: 0px 0px 10px 0px #f95d5d;
}渐变过渡效果
当input focus时我们还想要边框和阴影渐变，用CSS3 transition可以实现，Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。Safari 需要前缀 -webkit-。
注释：Internet Explorer 9 以及更早的版本，不支持 transition 属性。
注释：Chrome 25 以及更早的版本，需要前缀 -webkit-。
transition有四个属性。
| 属性 | 值 |
|---|---|
| transition-property | 规定设置过渡效果的 CSS 属性的名称。 |
| transition-duration | 规定完成过渡效果需要多少秒或毫秒。 |
| transition-timing-function | 规定速度效果的速度曲线。 |
| transition-delay | 定义过渡效果何时开始。 |
了解了box-shadow后在input中添加transition: border ease-in-out 0.15s,box-shadow ease-in-out 0.15s;即可实现想要的效果了。为了兼容Safari和老版本firefox，加上两行兼容性代码
-moz-transition:border ease-in-out 0.15s,box-shadow ease-in-out 0.15s;
-webkit-transition:border ease-in-out 0.15s,box-shadow ease-in-out 0.15s;
