最近在支援其他项目的时候遇到了一个 css 问题，这里记录一下。
这个项目还是使用 jsp 开发的，问题出现在一个使用了 select2 的下拉框上，具体表现是失去焦点时部分边框消失，然后点击任意其他区域后轮廓出现，如下图：
非常的魔幻，一开始以为是样式修改导致 border 属性被覆盖了，但是检查了半天之后发现并没有修改，而且由于随便点一下就能让这个问题消失，所以检查起来非常麻烦。下面直接上解决方法。
在 .select2-container .select2-selection--single 类中添加如下属性即可：
outline: none;
问题溯源
在了解问题是怎么出现之前，我们先来了解一下什么是 轮廓线（outline），我们熟知的 css 盒子模型的结构是这样的，从内到外分别是 content > padding > border > margin：
但是实际上，在 border 和 margin 之间还有一层叫做 “轮廓线” 的区域，它可以凸显元素，一般用来表示某个元素获取了焦点。例如点击 tab 或选中某个表单控件时周围亮起的样式就是轮廓线。
那它为什么不显示在 dev tool 中呢？实际上，轮廓线只有可以用于交互的元素上才有，例如链接、刚才提到的表单控件等等。并且，由于轮廓线只有视觉效果，并不占有实际空间，所以轮廓线不会引发浏览器的重排。
轮廓线的属性和 border 的很像，outline、outline-width、outline-style、outline-color、outline-offset。其中 outline 就是 color | style | width 的简写，这里不再赘述。
而我们刚开始遇到的问题其实就是轮廓线导致的，可以看到元素获得焦点后问题出现，而失去焦点（点击其他区域）后问题就消失了。至于 outline 为什么会这样并没找到原因，我估摸着是这个老项目的其他位置有一个 !important 的 outline-color 导致样式被覆盖了，有点恶心，懒得找了。
网友评论