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

Patricia Arquette
リリース: 2024-11-03 05:46:03
オリジナル
830 人が閲覧しました

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

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート