純粋な CSS を使用して円形の画像を実現するにはどうすればよいですか? (コード例)

PS を使用せずにあらゆる種類の円形画像を作成する方法を考えたことはありますか? この記事では、CSS を使用して円形画像を実現する方法を紹介します。早速、具体的な内容を見ていきましょう。 。

基本コード

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

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

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

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

効果は次のとおりです:

説明: 上記のコードのbackground -sizeは、次のサイズを使用して操作できる新しいCSS3プロパティです。背景。正確なピクセル値やパーセンテージを入力して幅と高さを設定したり、背景カバーを作成したり、コンテナ全体に合わせたりすることができます。詳細については、背景サイズのドキュメントを必ず参照してください。 (関連する推奨事項: css3 学習マニュアル )

次に、円形画像の CSS 実装について詳しく説明します

これで、弊社の角型コンテナにぴったりのイメージです。 CSSコードを変更して円形の枠を作ってみましょう。 border-radius 属性を使用します。これにより、適用される要素の角を曲がる機会が得られます。円形の画像を実現するには、画像の半分のサイズの値を画像に与える必要があります。 CSS コードは次のようになります:

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

円形の画像を実現するための CSS の効果は次のとおりです:

説明:が完成しました cssを使って円形画像を実現！新しい CSS プロパティにより、Photoshop を使用して時間を節約する効果を作成できるようになります。

拡張機能

border-radiusプロパティをよく見ると、画像の角を非対称に操作できます。詳細については、次の CSS コード

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

を参照してください。効果は次のとおりです。

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