CSSで円形効果を実現する方法

CSS は、Web 開発でよく使用されるスタイル シート言語で、角丸、グラデーション、アニメーションなど、多くの興味深いページ効果を実現できます。この記事では、CSS を使用して円形の効果を実現する方法を見ていきます。

CSS では、border-radius プロパティを使用して要素の丸い角を設定できます。このプロパティは、左上隅、右上隅、右下隅、左下隅の隅の半径をそれぞれ表す 1 つ以上の値を受け入れます。値が 1 つだけ設定されている場合は、4 つの角が等しいことを意味します。 2 つの値が設定されている場合、1 つ目は水平方向の半径を表し、2 つ目は垂直方向の半径を表します。 3 つの値が設定されている場合、1 つ目は左上隅と右下隅の半径を表し、2 つ目は左下隅と右上隅の半径を表し、3 つ目は垂直方向の半径を表します。たとえば、次のコードは div 要素を幅と高さ 100 ピクセルの円に設定します。

div{
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

このコードでは、border-radius の値は 50% です。これは、4 つの角が要素の幅と高さの半分の半径を持つように設定され、結果的に円になります。

border-radius 属性の使用に加えて、疑似要素 ::before および ::after を使用して円を実現することもできます。正方形の要素を同じ幅と高さに設定し、::before または ::after 疑似要素を使用して円に変換できます。たとえば、次のコードは、::before 疑似要素を使用して、div 要素を幅と高さ 100 ピクセルの円に設定します。

div{
  width: 100px;
  height: 100px;
  position: relative;
}
div::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: inherit;
  height: inherit;
  border-radius: 50%;
}

このコードでは、div 要素を相対配置に設定し、::before 疑似要素を使用して div 要素の左上隅を絶対的に配置します。疑似要素の幅と高さは div 要素から継承され、その角の半径は border-radius プロパティを使用して 50% に設定され、円になります。

あるいは、CSS3 のtransform プロパティを使用して正方形要素を 45 度回転し、overflow:hidden プロパティを使用して円に切り取ることもできます。たとえば、次のコードは div 要素を幅と高さ 100 ピクセルの円に設定します。

div{
  width: 100px;
  height: 100px;
  transform: rotate(45deg);
  overflow: hidden;
}
div::before{
  content: "";
  display: block;
  width: 200%;
  height: 200%;
  margin: -50%;
  background-color: #000;
  border-radius: 50%;
}

このコードでは、overflow:hidden 属性を使用して div 要素を 45 度回転し、その四隅をトリミングします。次に、::before 疑似要素を使用して要素全体を占める円を生成し、それを div 要素の中心点に移動すると、円になります。

つまり、CSS は、border-radius プロパティ、擬似要素、transform プロパティの使用など、円形の効果を実現するさまざまな方法を提供します。実際のプロジェクトでは、目的の効果を達成するために、特定のシナリオとニーズに応じて適切な方法を選択する必要があります。

以上がCSSで円形効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。