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