vis 和黄色边框斗智斗勇

原文链接: vis 和黄色边框斗智斗勇

上一篇: 汇编 习题3

下一篇: js 数组 map，filter，reduce

基本情况是这样的，用vis做了个简单小应用，就想这样，点击不同的按钮，会聚焦到不同的node上

点1的话就会将节点1放在中间

问题来了，他瞄的，pc端使用完全没有问题，但在手机上会莫名其妙有个框！为了突出效果，加了点padding

#vis {
  width: 300px;
  height: 300px;
  padding: 20px;
  border: 1px black solid;
}

经过查看dom结构，发现在vis这个div下面还有一个vis-network,在这个div下面才是canvas

中间辛苦也就不说了，通过设置各个div的border发现 这个不是border的问题

.vis-network{
  border: 10px greenyellow solid;
}
.vis-network:focus{
  border: 10px deepskyblue solid;
}

黄色边框依然存在。。。

然后各种找问题，终于找到几个属性

outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

注释：轮廓线不会占据空间，也不一定是矩形。

outline 简写属性在一个声明中设置所有的轮廓属性。

可以按顺序设置如下属性：

• outline-color
• outline-style
• outline-width

如果不设置其中的某个值，也不会出问题，比如 outline:solid #ff0000; 也是允许的。

通过设置outline属性，完美解决，也可以取消这个边框，使用border显示边界