如何防止 CSS 中的双边框：轮廓与负边距？

避免 CSS 中的“双”边框

当两个带有边框的相邻元素并排放置时，可能看起来好像它们有它们相遇的交界处有双重边界。为了防止这种视觉伪影，请考虑以下 CSS 技术：

使用轮廓而不是边框​​

对于可能以任何顺序出现的元素，轮廓属性提供了可靠的解决方案：

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

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

负边距

或者，在子元素上使用负边距将有效地“擦除”双边框：

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

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

旧版浏览器注意事项

旧版浏览器（例如 IE7 及更早版本）不支持 Outline 属性。在这些情况下，建议采用负保证金方法。

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