純粋な CSS を使用して円形画像を実装するにはどうすればよいですか?

CSS は Web ページで多くの効果を実現できますが、純粋な CSS を使用して円形の画像を実現するにはどうすればよいでしょうか?今回はCSSで円形画像を実現する方法を紹介しますので、具体的な内容を見ていきましょう。

基本的な HTML と CSS から始めます (空の HTML ドキュメントを作成し、それにスタイルシートをリンクできると仮定します)。

<div class="img-circular"></div>

クラス img-circular の基本スタイルを設定しましょう。

.img-circular{
 width: 200px;
 height: 200px;
 background-image: url('img/tupian.jpg');
 background-size: cover;
 display: block;
}

上記のコードの背景のサイズは CSS3 の新しいプロパティであり、背景のサイズを操作するために使用できます。正確なピクセル値やパーセンテージを入力して幅と高さを設定したり、ページ全体に合わせて背景カバーを作成したりできます。

画像を設定したら、CSS コードを変更して円形のフレームを作成しましょう。 border-radius プロパティを使用すると、要素の角の円弧を変更できます。画像を円形にするため、CSS ファイルは次のようになります:

.img-circular{
 width: 200px;
 height: 200px;
 background-image: url('img/tupian.jpg');
 background-size: cover;
 display: block;
 border-radius: 100px;
 -webkit-border-radius: 100px;
 -moz-border-radius: 100px;
}

結果は次のようになります: 画像が円形になります

This記事はすべてここにあります。さらにエキサイティングなコンテンツについては、PHP 中国語 Web サイトの CSS ビデオ チュートリアル 列に注目してください。 ！ ！

以上が純粋な CSS を使用して円形画像を実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。