如何避免 CSS 中的双边框：轮廓与负边距？

Patricia Arquette

发布： 2024-11-03 05:46:03

原创

881 人浏览过

How to Avoid Double Borders in CSS: Outline vs. Negative Margins?

避免 CSS 中的重复边框

当带有边框的相邻元素彼此相邻放置时，会出现称为“双边框”的视觉伪像可能发生在边界交叉口。要消除这种不良效果，请考虑以下 CSS 方法：

选项 1：使用 Outline 属性

对于元素顺序不可预测的情况，使用 Outline 属性可以有效防止双边框：

<code class="css">.collection {
  /* Optional styling */
  margin-top: -1px;
  margin-left: -1px;
}

.collection .child {
  outline: 1px solid; /* Replaces border */
  margin-top: 1px;
  margin-left: 1px;
}</code>

登录后复制

请注意，旧版浏览器（IE7 及更早版本）不支持轮廓。

选项 2：带边框的负边距

如果首选使用边框，请使用负边距来抵消双边框：

<code class="css">.collection .child {
  margin-top: -1px;
  margin-left: -1px;
}</code>

登录后复制

以上是如何避免 CSS 中的双边框：轮廓与负边距？的详细内容。更多信息请关注PHP中文网其他相关文章！

来源：php.cn

上一篇：如何使用 Greasemonkey/Tampermonkey 覆盖“banner_url”类的 CSS 样式？下一篇：如何在没有 SVG 或 JavaScript 的情况下在 CSS3 中制作虚线边框动画？

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

作者最新文章