CSS 사진을 둥글게 만드는 방법-CSS 튜토리얼-php.cn

CSS 사진을 둥글게 만드는 방법

青灯夜游

풀어 주다： 2023-01-07 11:44:49

원래의

10421명이 탐색했습니다.

CSS에서는 border-radius 속성을 사용하여 이미지를 둥글게 만들 수 있습니다. img 요소에 "border-radius: 50%;" 스타일을 추가하면 됩니다. border-radius 속성은 둥근 테두리를 요소에 설정할 수 있습니다. 둥근 모서리의 반경은 너비/높이의 절반을 초과할 수 없습니다.

CSS 사진을 둥글게 만드는 방법

이 튜토리얼의 운영 환경: Windows7 시스템, 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>

로그인 후 복사

Rendering:

CSS 사진을 둥글게 만드는 방법

Description:

border-radius 속성은 요소에 둥근 테두리를 설정하는 데 사용되며 다음을 지정할 수 있습니다. 1-4의 값. 테두리에 둥근 모서리를 생성합니다(1~4). 둥근 모서리의 반경은 너비/높이의 절반을 초과할 수 없습니다.

구문:

border-radius: 1-4 length|%

로그인 후 복사

값:

length 곡선의 모양을 정의합니다.
% %를 사용하여 모서리의 모양을 정의합니다.

참고: 각 반경의 4개 값 순서는 왼쪽 위 모서리, 오른쪽 위 모서리, 오른쪽 아래 모서리, 왼쪽 아래 모서리입니다. 왼쪽 아래 모서리를 생략하면 오른쪽 위 모서리도 동일합니다. 오른쪽 아래 모서리를 생략하면 왼쪽 위 모서리도 동일합니다. 오른쪽 상단 모서리를 생략하면 왼쪽 상단 모서리도 동일합니다.

4개 값: 첫 번째 값은 왼쪽 위 모서리, 두 번째 값은 오른쪽 위 모서리, 세 번째 값은 오른쪽 아래 모서리, 네 번째 값은 왼쪽 아래 모서리입니다.

테두리 반경: 15px 50px 30px 5pxborder-radius: 15px 50px 30px 5px
三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角

border-radius: 15px 50px 30px
两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角

border-radius: 15px 50px
一个值：四个圆角值相同

border-radius: 25px