CSS技巧：四步实现会发光的输入框input

CSS 技巧：实现模糊发光输入框的四个步骤。这是因为默认的浏览器样式会导致问题。接下来，我们调整对焦方式。

需要4步才能达到以上效果。

1. 覆盖默认浏览器样式轮廓。
2. 设置边框样式、宽度和颜色。
3. 设置边框阴影。
4. 渐变过渡效果

覆盖默认浏览器样式轮廓

以Google Chrome为例，当焦点位于输入字段时，浏览器将设置轮廓outline: -webkit-focus-ring- color auto 5px ;，轮廓（outline）是围绕位于边框边缘之外的元素绘制的线条，可以起到突出显示元素的作用。 CSS 轮廓属性指定元素轮廓的样式、颜色和宽度。这就是为什么即使当输入具有焦点时，当我们什么都不做时，外边框也会发光，并覆盖默认的浏览器样式outline：0。

设置边框样式、宽度、颜色

就这么简单，border: 1pxsolid #f95d5d;

设置边框阴影

使用CSS3 box-shadow设置边框阴影，语法：box-shadow：h-shadow v-shadow模糊扩大颜色框； 。

属性	值
h-shadow	必填。水平阴影的位置。允许负值。
v-shadow	必填。垂直阴影的位置。允许负值。
模糊	可选。软距离。
传播	可选。阴影大小。
颜色	可选。阴影颜色。请参阅 CSS 颜色值。
插入	可选。将外部阴影（开始）更改为内部阴影。

设置边框阴影box-shadow: 0px 0px 10px 0px #f95d5d;
完整CSS代码:

input:focus{
    outline: 0;
    border: 1px solid #f95d5d;
    box-shadow: 0px 0px 10px 0px #f95d5d;
  }

渐变过渡效果

当我们想要输入焦点时，我们还想要边框渐变和阴影，我们使用CSS3的transition就可以实现，并且Internet Explorer 10、Firefox、Chrome和Opera都支持transition属性。 Safari 需要 -webkit- 前缀。

注意：Internet Explorer 9 及更早版本不支持过渡属性。
注意：Chrome 25 及更早版本需要 -webkit- 前缀。

转变有四个属性。

property	value
transition-property	指定设置过渡效果的 CSS 属性的名称。
transition-duration	指定过渡效果完成需要多少秒或毫秒。
transition-timing-function	指定力度效果的力度曲线。
transition-delay	指定过渡效果何时开始。

了解了盒子阴影后，添加过渡：边框进出0.15s，盒子阴影简化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;