ホームページ  >  記事  >  ウェブフロントエンド  >  2 つの境界線を持つ応答性の高い円をスタイルするにはどうすればよいですか?

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

Patricia Arquette
Patricia Arquetteオリジナル
2024-11-03 03:23:031002ブラウズ

How to Style a Responsive Circle with Two Borders?

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。