2 つの境界線を持つ応答性の高い円をスタイルするにはどうすればよいですか?

2 つの境界線を持つ円を応答的にスタイル設定する

コンテナのサイズに合わせて 2 つの境界線を持つ円をスタイル設定するには、次の方法を利用できます。

<div></div>

<code class="css">div {
  width: 20em;
  height: 20em;
  border-radius: 50%;
  background-color: red;
  border: 4px solid #fff;
  box-shadow: 0 0 0 5px red;
}</code>

この構造は、白い実線の境界線と、box-shadow プロパティで表される赤い内側の境界線を持つ円を作成します。ボックスシャドウは、円のエッジを超えて背景色を拡張することにより、2 番目の境界線の錯覚を効果的に作成します。このアプローチにより、サークルのスタイルの応答性が維持され、コンテナのサイズに基づいてその寸法と外観が調整されます。

以上が2 つの境界線を持つ応答性の高い円をスタイルするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。