ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS画像を丸くする方法
CSS画像を丸くする方法
- 青灯夜游オリジナル
- 2021-07-21 16:55:1610425ブラウズ
CSS では、border-radius 属性を使用して画像を丸くすることができ、img 要素に「border-radius: 50%;」スタイルを追加するだけです。 border-radius 属性は、要素に丸い境界線を設定できます。丸い角の半径は、幅/高さの半分を超えることはできません。
このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。
CSS では、border-radius 属性を使用して画像を丸くすることができます。
コード例を詳しく見てみましょう:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
img{
border-radius: 50%;
}
</style>
</head>
<body>
<img src="img/1.jpg" style="max-width:90%" style="max-width:90%"/ alt="CSS画像を丸くする方法" >
</body>
</html>レンダリング:
説明:
border-radius 属性は、要素の丸い境界線を設定するために使用されます。値 1 ～ 4 を指定すると、境界線に (1 ～ 4) 個の丸い角を作成できます。半径は丸い角は幅/高さの半分を超えることはできません。
構文:
border-radius: 1-4 length|%
値:
length 曲線の形状を定義します。
% % を使用して角の形状を定義します。
注: 各半径の 4 つの値の順序は、左上隅、右上隅、右下隅、左下隅です。左下隅を省略した場合は、右上隅も同じになります。右下隅を省略した場合は、左上隅も同じになります。右上を省略した場合は左上と同じになります。
-
4 つの値: 最初の値は左上隅、2 番目の値は右上隅、3 番目の値は右下隅、4 番目の値は左下隅です。コーナー。
border-radius: 15px 50px 30px 5px
- ##3 つの値: 最初 最初の値は左上隅、2 番目の値は右上隅と左下隅、3 番目の値は右下隅です。 #border-radius: 15px 50px 30px
2 つの値: 最初の値は左上隅と右下隅、2 番目の値は右上隅と下隅です。左隅 -
境界線半径: 15px 50px
1 つの値: 4 つの丸い角は同じ値です -
border-radius: 25px
（学習ビデオ共有:
以上がCSS画像を丸くする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。