ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSを使用して円形のアバターフレームを実装する方法
この記事では、CSSを使用して円形のアバターフレームを実現する方法を主に紹介します。必要な友達に共有します。
<img class="circleImg" src="../img/photo/img.jpg" />
対応するCSSは
.circleImg{ border-radius: 30px; width:60px; height:60px; }です
boder-radiusは画像の幅の半分です
方法2
<p class="bgImg"></p>
対応 CSSは
.bgImg{ border-radius: 30px; width:60px; height:60px; background: url("../img/photo/img.jpg") no-repeat center; background-size:60px; }
ドラッグした画像が正方形でない場合は幅に比例して表示され、background-sizeは画像の幅に設定され、高さは自動になります。高さに比例して表示する必要がある場合は、background-size:auto 60px;
表示効果
以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。
関連する推奨事項:
CSS を使用してテキストの折り返しを実現する方法 CSS3 を使用してテキストの折り紙効果を実現する方法以上がCSSを使用して円形のアバターフレームを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。