円形要素に二重枠を作成するにはどうすればよいですか?

二重境界線のある円

この記事では、円形要素に二重境界線を追加するという課題の解決策を検討します。正方形と長方形は簡単に二重枠に適していますが、同じテクニックを円に適用するには、より創造的なアプローチが必要です。

問題文で提供されている CSS を考えてみましょう。これにより、緑色の枠が 1 つある円形の div が生成されます。

div.circle {
  width: 90%;
  height: 0;
  padding-bottom: 90%;
  margin: auto;
  float: none;
  border-radius: 50%;
  border: 1px solid green;
  background: pink;
}

私たちの目的は、この CSS を変更して二重枠を作成することです。以前は、アウトライン プロパティを試行しましたが、長方形のアウトラインが生成されたため、成功しませんでした。ネストされた div と背景色も、配置の問題により効果がないことが判明しました。

目的の効果を実現するには、CSS を次のように変更します。

div {
  width: 20em;
  height: 20em;
  border-radius: 50%;
  background-color: red;
  border: 4px solid #fff;
  box-shadow: 0 0 0 5px red;
}

この CSS は、白一色の div を作成します。境界線と赤い内側の影。 box-shadow プロパティは、div の端から色付きのインセットを投影することによって 2 番目の境界線をエミュレートします。

このソリューションと以前の試みの主な違いは、2 番目の境界線またはアウトラインの代わりにボックス シャドウを使用することにあります。ボックス シャドウを独創的に使用することで、円形を損なうことなく二重境界線の錯覚を実現します。

以上が円形要素に二重枠を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。