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

作者：繁依Fanyi0 | 2024-02-23 10:16:34

踩

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

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

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


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

这个方案有个缺点：

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


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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/135632