CSS画像を丸くする方法-CSSチュートリアル-php.cn

CSS画像を丸くする方法

青灯夜游

リリース： 2023-01-07 11:44:49

オリジナル

10392 人が閲覧しました

CSS では、border-radius 属性を使用して画像を丸くすることができ、img 要素に「border-radius: 50%;」スタイルを追加するだけです。 border-radius 属性は、要素に丸い境界線を設定できます。丸い角の半径は、幅/高さの半分を超えることはできません。

CSS画像を丸くする方法

このチュートリアルの動作環境: 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>

ログイン後にコピー

レンダリング:

CSS画像を丸くする方法

説明:

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
境界線半径: 15px 50px
border-radius: 25px