CSS を使用して 2 つの異なる境界線を持つ円をレスポンシブに作成する方法

二重境界線を使用して円をレスポンシブにスタイリングする

提供されている動作する CSS が示すように、CSS 円の作成は簡単です。ただし、2 つの異なる境界線を持つ円を実現するには、追加の CSS テクニックを使用する必要があります。

提供された HTML 構造を使用します。要素は円を表します:

<code class="html"><div></div></code>

次のように CSS を変更して、2 つの境界線を持つ円を作成できます:

<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>

この CSS は、box-shadow プロパティを使用して 2 番目の境界線を追加します。これにより、円の周囲に幅 5 ピクセルの赤い影が作成され、2 番目の境界線の錯覚が効果的に作成されます。 2 番目の境界線の色は、box-shadow プロパティの red 値によって決まります。

提供された CSS は、コンテナーのサイズの変化に流動的に応答する 2 つの異なる境界線を持つ円を作成することで、目的の効果を実現します。

以上がCSS を使用して 2 つの異なる境界線を持つ円をレスポンシブに作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。