CSS を使用して 2 つの境界線を持つ円を作成するには?-CSSチュートリアル-php.cn

CSS を使用して 2 つの境界線を持つ円を作成するには?

Mary-Kate Olsen

リリース： 2024-11-02 05:31:02

オリジナル

890 人が閲覧しました

How to Create a Circle with Two Borders Using CSS?

2 つの境界線を持つ円を作成する方法

レスポンシブに 2 つの境界線を持つ円に div をスタイル設定することは、CSS を使用して実行できます。提供されている元の Circle div CSS を変更して、目的の効果を作成できます。

div.circle {
  width: 90%;
  height: 0;
  padding-bottom: 90%;
  margin: auto;
  float: none;
  border-radius: 50%;
  background: pink;
  border: 1px solid green;
  box-shadow: 0 0 0 5px red; /* Adds a second red border */
}

ログイン後にコピー

ここでは、box-shadow プロパティを使用して、円の周囲に 2 番目の境界線を作成しています。値 0 0 0 5px は影のオフセット、ぼかし、広がりを定義し、赤は境界線の色を指定します。

質問で言及されている内部 div アプローチは、内部に追加の div を使用して実装できます。 Circle div:

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

ログイン後にコピー

内部 div は背景色でスタイル設定し、次を使用して垂直方向に配置できます。フレックスボックス:

<code class="css">div.circle {
  display: flex;
  align-items: center;
  justify-content: center;
}

div.inner {
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background: blue;
}</code>

ログイン後にコピー

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