CSS を使用して HR 要素の色を効果的に変更するにはどうすればよいですか?

CSS を使用して hr 要素の色をカスタマイズする

hr タグの色を変更しようとすると、一般的に課題に直面しますこの要素に対するブラウザのデフォルトのスタイルが原因です。 color プロパティだけでは十分ではない場合があります。

hr タグによって生成される線の色を効果的に変更するには、代わりに border-color プロパティを利用することを検討してください。

hr {
  border-color: #123455;
}

ただし、調整は次の点に注意してください。線のサイズによって、境界線と線自体の間に意図しないギャップや位置ずれが発生する可能性があります。このような場合、希望の外観を実現するために、border-color と background-color の両方を指定することをお勧めします。

より包括的なアプローチとして、HTML5 ボイラープレート プロジェクトは、次のルールを含むデフォルトのスタイルシートを提供します。

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

さらに、SitePoint が公開した「12 Little-Known CSS Facts」というタイトルの記事によると、ボーダーカラー: 継承を hr に割り当てます。タグを使用すると、親要素の境界線の色を採用できるようになります。

以上がCSS を使用して HR 要素の色を効果的に変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。