在文本框中，当这个文本框获得焦点的时候，文本框的外围有一个蓝色的框，如图所示。
这个蓝色矩形外框是CSS的一个属性 outline
但是如图中所示，当我们为文本框设置 borde-radius时（目的是为了让其更美观），outline依旧是一个矩形。
这使得文本框获得焦点时非常不美观，在Firefox浏览器中，有outline-radius属性可以设置其圆角，其用法和
border-radius基本类似，但是，在其他浏览器中如何实现呢？
我们可以使用box-shadow属性
它的作用是为边框添加一个或多个阴影，通过调整属性值，可以把它设置成一个类似于outline的一个效果,使用
JavaScript为 这个文本框添加 onfocus，用函数为其添加box-shadow属性既可以产生类似于 outline的圆角效果。
不过在此之前，我们需要把原来的outline的属性值设置为none，这样原来的蓝色矩形框才会消失。
扫描二维码关注公众号，回复：
58215 查看本文章
最终完成的效果如下图所示 ：
以及，我们需要在 onblur 时删除box-shadow属性。