为什么有些人边框不用border属性
<h1 data-id="heading-0">🧑💻 写在开头</h1><p>点赞 + 收藏 === 学会🤣🤣🤣</p>
<h2 data-id="heading-0">1) border 会改变布局（占据空间）</h2>
<p><code>border</code> 会参与盒模型，增加元素尺寸。</p>
<p>例如，一个宽度 200px 的元素加上 <code>border: 1px solid #000</code>，实际宽度会变成：</p>
<blockquote>
<p>200 + 1px(left) + 1px(right) = 202px</p>
</blockquote>
<div>
<div>
<p>如果不想影响布局，就很麻烦。</p>
<p>使用 <code>box-shadow: 0 0 0 1px #000</code>不会改变大小，看起来像 border，但不占空间。</p>
<hr>
<h2 data-id="heading-1">2) border 在高 DPI 设备上容易出现“模糊/不齐”</h2>
<p>特别是 0.5px border（发丝线），在某些浏览器上有锯齿、断线。</p>
<p><code>transform: scale(0.5)</code> 或伪元素能做更稳定的发丝线。</p>
<hr>
<h2 data-id="heading-2">3) border 圆角 + 发丝线 常出现不规则效果</h2>
<p>border + border-radius 在不同浏览器的渲染不一致，容易出现不均匀、颜色不一致的问题。</p>
<p>用 <code>outline</code> / <code>box-shadow</code> 圆角更稳定。</p>
<hr>
<h2 data-id="heading-3">4) border 不适合做阴影/多层边框</h2>
<p>如果你需要两层边框：</p>
</div>
</div>
<blockquote>
<p>双层边框用 border 很难做</p>
</blockquote>
<p>而用：</p>
<blockquote>
<p>box-shadow: 0 0 0 1px #333, 0 0 0 2px #999;</p>
</blockquote>
<div>
<div>
<p>非常简单。</p>
<hr>
<h2 data-id="heading-4">5) border 和背景裁剪一起用时容易出 bug</h2>
<p>比如 <code>background-clip</code>、<code>overflow: hidden</code> 配合 border 会出现背景被挤压、不应该被裁剪却裁剪等问题。</p>
<hr>
<h2 data-id="heading-5">6) hover/active 等状态切换时会“跳动”</h2>
<p>因为 border 会改变元素大小。</p>
<p>例子：</p>
</div>
</div>
<blockquote>
<div>
<p>.btn { border: 0; }<br>.btn:hover { border: 1px solid #000; </p>
</div>
</blockquote>
<div>
<p>鼠标移上去会抖动，因为尺寸变大了。</p>
<p>用 <code>box-shadow</code> 的话就不会跳。</p>
</div>
<div>
<div>
<p>除了动态外有时候 overflow 也会导致原本刚刚好的布局不会删除滚动条，由于有了 border 1px 导致刚好出现滚动条但其实根本滚不了。</p>
<h2 data-id="heading-6">总结</h2>
<p>边框可以分别使用border、outline、box-shadow三种方式去实现，其中outline、box-shadow不会像border一样占据空间。而box-shadow可以用来解决两个元素相邻时边框变宽的问题。不使用border并不是因为它不好，而是因为outline和box-shadow的兼容性和灵活性在某些场景中相对border会更方便一点。</p>
</div>
<div>
<h3 id="tid-D8HBxE">如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。</h3>
</div>
<p><em><img src="https://img2024.cnblogs.com/blog/2149129/202501/2149129-20250122165814748-630765389.png" alt="" loading="lazy"></em></p>
</div><br><br>
来源：https://www.cnblogs.com/smileZAZ/p/19697635
頁:
[1]