用JavaScript实现 "outline" 的圆角效果

在文本框中，当这个文本框获得焦点的时候，文本框的外围有一个蓝色的框，如图所示。

这个蓝色矩形外框是CSS的一个属性 outline

       但是如图中所示，当我们为文本框设置 borde-radius时（目的是为了让其更美观），outline依旧是一个矩形。

这使得文本框获得焦点时非常不美观，在Firefox浏览器中，有outline-radius属性可以设置其圆角，其用法和

border-radius基本类似，但是，在其他浏览器中如何实现呢？

 

我们可以使用box-shadow属性

        它的作用是为边框添加一个或多个阴影，通过调整属性值，可以把它设置成一个类似于outline的一个效果,使用

JavaScript为 这个文本框添加 onfocus，用函数为其添加box-shadow属性既可以产生类似于 outline的圆角效果。

不过在此之前，我们需要把原来的outline的属性值设置为none，这样原来的蓝色矩形框才会消失。

最终完成的效果如下图所示  ：   

                以及，我们需要在 onblur 时删除box-shadow属性。

转载于:https://www.cnblogs.com/muic/p/8931476.html