CSSで画像を円形の画像に設定する方法

CSS で円形の図を設定する方法: [border-radius:50%] などのコードで、border-radius 属性を使用して円形の図を設定できます。 border-radius プロパティを使用すると、要素に丸い境界線を追加できます。

#この記事の動作環境: Windows10 システム、css 3、thinkpad t480 コンピューター。

属性の紹介:

border-radius 属性を使用すると、要素に丸い境界線を追加できます。

構文:

border-radius: 1-4 length|% / 1-4 length|%;

注: 各半径の 4 つの値の順序は、左上隅、右上隅、右下隅、左下隅です。左下隅を省略した場合は、右上隅も同じになります。右下隅を省略した場合は、左上隅も同じになります。右上を省略した場合は左上と同じになります。

属性値:

• length は曲線の形状を定義します。

• % % を使用して角の形状を定義します。

具体的な実装コードは次のとおりです:

(学習ビデオ共有:

css ビデオ チュートリアル)

style{
    .circle{
        width:120px; 
        height:120px; 
        border-radius:50%; 
        overflow:hidden;
    }
    .circle > img{
        width: 100%;
        height: 100%;
    }
}
<div class="circle">
    <img src="你的图片" alt="正方形的原始图片" />
</div>

関連する推奨事項:

CSStutorial

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