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

避免 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中文网其他相关文章！