CSS で二重枠を回避する方法: アウトラインと負のマージン?

CSS で枠線の重複を避ける

枠線を持つ隣接する要素が隣り合って配置されると、「二重枠線」として知られる視覚的なアーティファクトが発生します。国境交差点で発生する可能性があります。この望ましくない影響を排除するには、次の CSS アプローチを検討してください。

オプション 1: アウトライン プロパティを使用する

要素の順序が予測できない状況では、アウトライン プロパティを使用すると、二重枠線を効果的に防止します:

<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 中国語 Web サイトの他の関連記事を参照してください。