1. 컨셉
윤곽선은 요소를 강조하기 위해 테두리 가장자리 외부에 있는 요소 주위에 그려진 선입니다.
예를 들어, 일반적으로 브라우저에서 콘텐츠를 읽을 때 태그 링크나 입력 라디오 버튼에 초점을 맞추기 위해 마우스를 클릭하면 해당 요소는 점선 윤곽선 상자로 둘러싸이게 됩니다. 이 윤곽선 점선 상자가 윤곽선입니다.
기본적으로 a 태그를 클릭하거나 마우스 클릭 이벤트를 입력하거나 추가하면 브라우저에 윤곽선 프레임(크롬 아래 파란색)이 남습니다. 그러나 이러한 기본 개요 프레임은 때때로 외관에 영향을 미치고 프런트 엔드 페이지의 전반적인 효과를 파괴합니다. 그렇다면 브라우저의 기본 윤곽선 프레임을 제거하거나 기본 윤곽선 프레임 효과를 변경하는 방법은 무엇입니까?
CSS 개요 속성은 요소 개요의 스타일, 색상 및 너비를 지정합니다.
윤곽선과 테두리는 매우 유사해 보이지만 차이점이 있습니다. 예를 들면 다음과 같습니다.
(1) 요소의 네 방향 테두리의 스타일, 너비, 색상은 독립적으로 설정할 수 있지만, 요소의 네 방향 외곽선의 너비, 스타일, 색상은 동일하므로 설정할 수 없습니다. 개별적으로;
(2) 테두리의 너비는 요소의 크기에 직접적인 영향을 미치며, 윤곽선은 페이지 공간을 차지하지 않고 페이지 레이아웃에 영향을 미치지 않지만 윤곽선은 페이지의 다른 요소와 겹칩니다.
(3) 주변 요소의 소리가 겹쳐지는 것 외에도 윤곽선은 주변 요소에 영향을 주지 않습니다.
(4) 테두리는 요소 크기의 일부이지만 윤곽선은 그렇지 않습니다. 즉, 윤곽선의 너비에 관계없이 요소의 크기는 변경되지 않습니다.
(5) 외곽선은 직사각형이 아닐 수 있지만 원형 외곽선을 직접 만들 수는 없습니다.
2. 속성
다음 속성을 사용하여 요소의 윤곽선을 설정할 수 있습니다.
(1) 개요: 하나의 명령문에 모든 개요 속성을 설정합니다. 개요 속성을 사용하면 위의 세 가지 개요 속성을 동시에 설정할 수 있습니다.
외곽선-색상개요-스타일개요-너비상속
●개요 값은 순서에 관계없이 나열될 수 있으며 이러한 값은 무시할 수 있습니다.
●자바스크립트 구문
object.style.outline=#0000FF점박이
(2) 외곽선 색상: 외곽선의 색상을 설정합니다.
색상 이름 16진수-번호RGB-번호반전상속
●참고: 항상 외곽선 색상 속성보다 먼저 외곽선 스타일 속성을 선언하십시오. 요소의 윤곽선 색상은 윤곽선을 얻은 후에만 변경할 수 있습니다.
●윤곽선 색상 속성은 요소 전체 외곽선 중 보이는 부분의 색상을 설정합니다.
●자바스크립트 구문
object.style.outlineColor=#0000FF
(3) 개요 스타일: 개요 스타일을 설정합니다.
점선 없음점선고체이중홈능선삽입시작inherit
● 개요 스타일 속성은 요소의 전체 개요 스타일을 지정하는 데 사용됩니다. 스타일은 없음일 수 없습니다. 그렇지 않으면 윤곽선이 나타나지 않습니다.
●참고: 항상 외곽선 색상 속성보다 먼저 외곽선 스타일 속성을 선언하십시오. 요소의 윤곽선 색상은 윤곽선을 얻은 후에만 변경할 수 있습니다.
●등고선은 공간을 차지하지 않으며 반드시 직사각형일 필요는 없습니다.
●자바스크립트 구문
object.style.outlineStyle=점선
(4) 외곽선 너비: 외곽선의 너비를 설정합니다.
얇은보통두꺼운길이상속
●참고: 항상 개요 스타일 속성을 개요 너비 속성보다 먼저 선언하십시오. 요소의 윤곽선 색상은 윤곽선을 얻은 후에만 변경할 수 있습니다.
●너비는 음수일 수 없습니다.
●자바스크립트 구문
object.style.outlineWidth=얇음
(5) 외곽선-오프셋: 외곽선과 테두리 사이의 거리를 설정합니다.
예:
<!DOCTYPEhtml><html><head><styletype=text/css>p{text-align:center;border:redsolidthin;outline:#00ff00dottedthick;}</style></head><body><p>Dotcpp 누구나 프로그래밍을 배울 수 있습니다.</p></body></html>실행 결과:
