이 블로그에서는 다음에 대해 논의합니다.
외곽선 반경이란 무엇입니까?
“ 개요 ” 속성은 요소의 외곽선을 형성하는 데 사용되지만 직접 구현할 수는 없습니다. 따라서 외곽선에 반경 효과를 적용하는 다른 방법은 ' 경계 반경 ” CSS 속성. 외곽선의 둥근 모서리를 지정합니다.
HTML 요소에 외곽선 반경 효과를 적용하는 방법은 무엇입니까?
외곽선 반경 속성을 사용하려면 주어진 지침을 따르십시오.
1단계: 제목 포함
처음에는 '의 제목 태그를 활용하여 제목을 삽입합니다. ' 에게 ' '. 예를 들어 ' ' 그리고 ' ” 태그는 HTML 문서에 두 개의 서로 다른 제목을 삽입하기 위한 것입니다.
2단계: 첫 번째 div 컨테이너 추가
그런 다음 '를 사용하여 컨테이너를 추가하십시오. <사업부> ” 태그. 또한 '를 삽입합니다. 수업 ” 속성을 선택하고 선택에 따라 클래스 이름을 지정합니다.
3단계: 두 번째 div 컨테이너 만들기
다른 ' 사업부 동일한 절차에 따라 ” 컨테이너:
< h1 스타일 = '색상:rgb(48, 10, 218)' > Linuxhint LTD 영국 < / h1 >
< h2 >
외곽선 원형의 모서리를 만드는 border-radius의 다른 예입니다.
< / h2 >
< 사업부 수업 = 'box1-div' >
Linuxhint는 사용자에게 가장 우수하고 고유한 콘텐츠를 제공합니다.
< / 사업부 >
< 사업부 수업 = 'box2-div' >
여러 카테고리에서 작동합니다.
< / 사업부 >
위 코드의 출력은 다음과 같습니다.
4단계: 첫 번째 컨테이너의 외곽선 설정
'를 활용하여 첫 번째 컨테이너에 액세스합니다. .box1-div ' 클래스 ' . ”는 클래스에 액세스하기 위한 선택기입니다.
.box1-div {개요 : 단단한 ;
너비 : 300픽셀 ;
심 : 15픽셀 ;
여유 : 25픽셀 ;
}
그런 다음 아래 나열된 CSS 속성을 적용합니다.
- “ 개요 ” 속성은 요소 주위에 윤곽선을 추가하는 데 사용됩니다. 예를 들어, 그 값은 ' 단단한 '.
- “ 너비 ”는 요소의 가로 크기를 지정합니다.
- “ 심 ”는 요소의 콘텐츠 주위에 공간을 할당하는 데 활용됩니다.
- “ 여유 ” 요소 테두리의 바깥쪽에 공간을 지정하십시오.
5단계: 두 번째 컨테이너의 아웃라인 설정
이제 각 클래스 '의 도움으로 두 번째 요소에 액세스합니다. .box2-div ”:
.box2-div {개요 : 단단한 ;
경계 반경 : 20픽셀 ;
너비 : 300픽셀 ;
심 : 15픽셀 ;
여유 : 25픽셀 ;
}
CSS 속성 적용 ' 경계 반경 ” 요소의 반지름을 정의합니다. 이 속성을 사용하면 요소 주위에 둥근 모서리를 추가할 수 있습니다.
HTML 요소에 외곽선 반경 효과를 성공적으로 추가했음을 알 수 있습니다.
결론
“ 외곽선 반경 ' 더 이상 사용할 수 없습니다. 사용자는 CSS 'outline' 및 'border-radius' 속성을 사용하여 윤곽 반경 속성을 적용할 수 있습니다. “ 개요 ”는 요소 주위에 윤곽선을 추가하고 “ 경계 반경 ”는 윤곽선의 스타일을 지정하는 데 특히 사용됩니다. 이 게시물은 HTML의 요소 주위에 외곽선 반경 효과를 추가하는 방법을 설명했습니다.