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

已于 2024-02-26 14:56:42 修改 · 2.1k 阅读 · 5
文章标签：

#border边框 #边框影响布局 #outline替代border #border改变不影响布局 #阴影替代border #css border

于 2023-05-16 09:51:40 首次发布
文章介绍了在CSS中，当border影响元素布局时，可以使用outline替代或用box-shadow的inset来解决此问题。outline不会影响布局，但无法绘制圆角；box-shadow的inset则能模拟内边框且不影响布局。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目录

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

解决方案： 

1.用outline替代border

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

需求（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;

 效果如下：

完美解决！ 大家有没有其他的解决方案，有的话请大家留言补充。

如果文章对你有所帮助，❤️关注+点赞❤️鼓励一下！

博主会持续更新。。。。

我的博客原文

往期回顾

 CSS多栏布局-两栏布局和三栏布局

css超出部分显示省略号

 css 设置字体渐变色和阴影

css 重置样式表（Normalize.css）

css实现元素居中的6种方法

border影响父元素的高度-解决方案
qq_45679015的博客
06-22 1244
现象：在为Menu组件添加样式时发现，当我点击某个tab时父元素的高度会撑开，原因是boder-bottom设置为2px，第一反应是将border-sizing设置为border-box，使得和属性包括内容，内边距和边框，但不包括外边距。但是无效，因为我没有为父元素设置宽高。 1655864862453 解决：换一种方法解决，在menu-item添加border-bottom的样式与点击时的样式一样，但颜色设置为transparent就行！ 1655865242469...
html中加border不影响高度,当1像素边框被添加到div，Div大小增加，不想这样做
weixin_33781129的博客
06-01 2012
边界css属性将增加所有元素的“外部”大小，除了表中的tds。 在html-> layout选项卡下，你可以看到Firebug是如何工作的。就像一个例子，宽度和高度为10px，边框为1px的div将有一个12px的外部宽度和高度。对于你的情况，为了让它看起来像边框在div的“内部”，在你select的CSS类中，你可以通过加倍你的边框尺寸来减小元素的宽度和高度，或者你也可以这样做元素填充。例...
【css】border边框影响布局解决方案，鬼话连篇版本
sinat_27171121的博客
03-11 4325
问题的关键究竟为何？ border边框影响布局之问题的发生，到底需要如何解决，这种事实对本人来说意义重大，相信对这个世界也是有一定意义的。 一般来说， 培根曾经提到过，深窥自己的心，而后发觉一切的奇迹在你自己。这不禁令我深思。 曾经看到过过一句富有哲理的话，有时候实践是一种巧妙地避开思考的方法。带着这句话，我们还要更加慎重的审视这个问题： 编程实践中，若border边框影响布局出现了，我们就不得不考虑它出现了的事实。 mark {background: yellow; } mark.current {
border边框影响布局解决方案
RealizeInnerSelf丶
09-13 813
目录边框不影响布局技巧剖析边框不影响布局技巧 需要解决的问题 默认不处理与两种处理方式的效果图 剖析 边框从一开始到覆盖都是存在的，所以不存在突然多出2*边框宽度px 的占位 我们可以通过以下两种方式解决(个人目前已知) 先设置边框，颜色透明，后续(比如鼠标覆盖显示边框)就不会发生挤动 亦或是使用怪异盒模型，让边框占用元素本身的宽度 加边框缩小宽度也可以，单个人觉得没必要...
border hove不影响布局动画
聪明的竹子的博客
02-18 428
.class { border: 1px solid transparent; transition: border-color 0.3s ease-in-out; &:hover { border: 1px solid #5170fe; } }
CSS边框样式border设置1px（小于或等于3px）之后，缩放浏览器窗口，导致布局出现问题
qq_54455551的博客
02-20 3917
项目场景： 在css里面对盒子加边框时，调整像素值为1px，运行到浏览，缩放页面，会造成页面排版出现问题 问题描述： 窗口大小是100% 窗口缩放 在这里我是对dl设置了一个1px的边框，按照我写的代码dt，dd都会向左浮动，盒模型是用的诡异盒模型，dt+2dd的宽度正好是dl的宽度，dd宽度为366px。窗口正常（100%）时，页面还是正常的，由于页面比较长，当我将页面缩放时，页面的排版就发生了诡异的变化 原因分析： 仔细观察页面变化，就会发现dd的排版出现了问题，本来是浮动..
DIV border边框显示不完全问题的解决方法
10-30
而边框（`border`）是CSS中一个重要的属性，它允许我们为元素添加清晰的边缘，以增加视觉效果和区分内容区域。然而，有时可能会遇到`div`的边框显示不完全或显示异常的问题，这通常是由于浏览器兼容性、浮动元素、...
reset.css引入以及1px边框问题的解决方法
09-22
本文将详细讨论`reset.css`的引入以及1px边框问题的解决方案。 一、关于`reset.css` `reset.css`的目的是消除HTML元素之间的样式差异，如字体大小、内边距、外边距等。由于不同的浏览器对这些元素有不同的默认样式...
web前端开发中常见的多列布局解决方案整理(一定要看)
11-29
本文主要探讨了三种常见的多列布局解决方案：两列定宽加一列自适应、多列不定宽加一列自适应以及多列等分布局。 首先，两列定宽加一列自适应布局常用于需要一边保持固定宽度，另一边根据内容自动扩展的情况。例如，...
CSS解决border影响元素宽高的问题（box-sizing属性）
热门推荐
TalonZhang的博客
12-10 1万+
问题 我们在用 CSS 进行页面布局时，经常会给元素指定宽高。在没有边框时（border为0）往往父元素的宽高是子元素宽高的和。但是在添加边框宽度后如果不调整元素宽度，会导致布局错乱。 例如我们想要下面这样的效果： 一个宽度为 600px 的父元素下有三个 200px 的子元素。 可以这样实现： <body> <div class="container"> ...
CSS动态渐变色边框围绕内容区域旋转的效果(实例代码)
12-14
效果图   在网上查阅相关资料后，发现目前的动态渐变色边框的实现方式大部分为使用伪元素比内容区域大一圈然后横向移动渐变色背景的方式实现，而没有渐变色边框围绕内容区域进行旋转的效果，于是我做了一个这样的demo供大家参考。 实现原理   首先将内容区域嵌套进一个DIV盒子中并设置overflow：hidden;。这个盒子的大小是内容区域的大小加上你希望实现的渐变边框的宽度，然后将内容区域居中，这样内容区域和父元素之间就有一个看似是边框的空白区域。   现在在这个空白区域加一个比父元素更大，背景为渐变色的盒子，将层级设置为最低z-index: -1;。再将这个渐变色背景的盒子加入旋转动画就完成了
css常见问题（2）之border-box对元素实际宽高的影响
qq_29039105的博客
07-15 1945
border-box对元素实际宽高的影响
border标签造成的不良后果
Just The Way You Are
08-22 1398
border属性会影响本标签内部内容定位以及该标签外部内容的定位，而outline不会，outline属性只会参与重新绘制边框样式不涉及标签的定位。 如下代码：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>border标签的不良影响</title> <style> #frm{
在HTML中width:100%了，在设置border,这时盒子的总宽度会大于父盒子，会溢出，这时该怎么办？
小董同学西北民族
10-16 1378
题目 width:100%了，在设置border,这时盒子的总宽度会大于父盒子，会溢出，这时该怎么办？ 分析 因为传统的代码： .box3{ width: 50%; height: 50%; background-color: aqua; border: 1px solid black; float: left; } 会导致溢出，所以这时我们加上代码：box-sizing: border-box; 原本代码变为： .box2{ width: 50%; height: 50%; background-colo
css实现动态边框
StevenYanghahha的博客
06-14 668
【代码】css实现动态边框。
对点击卡片，hover设置border，出现抖动和div走位问题，解决方法
Cu50moon的博客
02-19 999
2.padding，broder 对冲，设置和目标broder宽度一致的padding，之后当hover时重置。以上两种方法都没有办法解决，鼠标hover和选中元素的broder宽度不一的问题。1.透明broder，对元素本身设置与目标broder宽度一致的透明边框。将偏移设置为目标宽度一样即可。属性一致，radio也适用。表示元素的轮廓，语法与。支持的关键字和属性与。
css让padding、border不占据宽度
最新发布
于忠会的博客
05-29 1289
有时我们不希望 padding 影响到 div 的实际宽度。以前只能手动计算 width，从 CSS3 开始可以通过 box-sizing 来做到这一点。则包含 padding，div 的实际宽度为 120px。CSS3 新增了 box-sizing 属性。则 div 的实际宽度为 120px。以前，如果指定 div 的宽度为。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

富朝阳

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值