CSS의 개요 스타일 정보

outline(윤곽선)은 요소 주위에 그려지는 선으로, 테두리 가장자리 외부에 위치하며 요소를 강조할 수 있습니다. 개요 속성은 요소 주위의 윤곽선을 설정합니다.

항상 outline-color 속성 앞에 outline-style 속성을 선언하세요. 요소는 윤곽선을 얻은 후에만 윤곽선의 색상을 변경할 수 있습니다.

가능한 값 설명:

없음 기본값. 개요를 정의하지 마십시오.
점선은 점의 윤곽을 정의합니다.
점선은 점선 윤곽선을 정의합니다.
솔리드는 솔리드 윤곽을 정의합니다.
double은 이중선 윤곽선을 정의합니다. 이중선의 너비는 outline-width 값과 같습니다.
홈은 3D 홈 프로파일을 정의합니다. 이 효과는 윤곽선 색상 값에 따라 달라집니다.
능선은 3D 홈 프로파일을 정의합니다. 이 효과는 윤곽선 색상 값에 따라 달라집니다.
삽입은 3D 오목 가장자리 윤곽을 정의합니다. 이 효과는 윤곽선 색상 값에 따라 달라집니다.
아웃셋은 3D 볼록 가장자리 윤곽선을 정의합니다. 이 효과는 윤곽선 색상 값에 따라 달라집니다.
상속은 윤곽선 스타일 설정이 상위 요소 에서 상속되어야 함을 지정합니다.

아웃라인 컨트롤은 정확히 무엇인가요?

a 태그에 초점을 맞추면 a 태그 영역 주위에 점선 상자가 표시됩니다. 이 상자는 너비를 차지하지 않는다는 점에서 테두리와 다릅니다. 초점을 취소하면 점선 상자가 자연스럽게 사라집니다. Aoyou, Firefox 또는 IE의 여러 버전을 통해 볼 수 있습니다. 단, 사파리, 오페라, 굴 브라우저는 이 효과를 지원하지 않으므로 볼 수 없습니다.

기본적으로 이것은 쓸모없는 효과입니다. 대부분의 경우 이 효과가 없기를 바라기 때문에 a 태그에 대한 outlook:none을 설정했지만 IE6, 7 및 Aoyou 브라우저에서만 사용할 수 있습니다. ff와 ie8은 outlook:none을 추가한 후 초점이 맞춰진 점선 프레임을 취소합니다.

이 점선 상자를 어떻게 취소하나요? 일반적으로 사용되는 세 가지 방법이 있습니다.

1: a 태그에 js 컨트롤을 추가합니다. a 태그에 포커스가 있으면 강제로 포커스가 취소됩니다. 이때 a 태그에는 자연스럽게 점선 프레임이 없습니다. .

<a href="#" onfocus="this.blur();">测试</a>

여기서는 초점이 설정되면 흐림()이 트리거되어 초점이 취소됩니다. 당연히 그것은 시도되었고 사실입니다.

2: a 태그 안에 span이나 var 등 다른 태그를 중첩시키고, 중첩된 태그에 콘텐츠를 넣습니다. 이때, 이 링크를 클릭하면 a의 하위 태그에 집중되고, 당연히 a 태그에는 집중되지 않으므로 이러한 문제를 피할 수 있습니다.

3: a 태그를 링크로 사용하는 대신 다른 태그를 사용하고 js를 사용하여 호버 효과를 만들고 CSS에 cursour:pointer를 추가하여 마우스가 위에 있을 때 손이 더 작아지도록 설정합니다. 사용자에게 링크라는 환상을 줍니다. 클릭 시 페이지 이동 등을 수행하려면 js를 사용하세요. 가장 큰 단점은 처음 두 개에 비해 사용자 친화적이지 않다는 것입니다.

위 내용은 CSS의 개요 스타일 정보의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!