【css】border边框影响布局解决方案

需求（border改变不影响布局）

最近在写项目的时候遇到这样一个问题，我给元素添加动态border的时候，随着border的生效，会影响border之外的布局

解决方案： 

border边框影响布局之问题的发生，到底需要如何解决？

下面我提供2种方案供大家参考：

1.用outline替代border

{
  // 原样式
  border: 1px solid #0081FF; 
  // 替换后
  outline: 1px solid #0081FF; 
}

这个方案有个缺点：

如果你给设置了border-radius属性，则outLine无法绘制圆角边界线。

2.用阴影样式替代(最佳方案)

//原样式
border: 5px solid #0081FF; 
// 替换后
box-shadow: inset 0px 0px 0px 5px #0081FF;