CSS 개요 사용법에 대한 자세한 설명

앞의 말

　윤곽선은 테두리와 마찬가지로 문서 흐름에 참여하지 않습니다. 따라서 윤곽선이 나타나거나 사라지더라도 문서 흐름에 영향을 주지 않습니다. 문서가 다시 표시되지 않도록 합니다. 윤곽선을 사용하면 브라우저는 부분 윤곽선을 병합하여 연속적이지만 직사각형이 아닌 모양을 만들 수 있습니다. 기본적으로 아웃라인은 요소가 포커스를 받거나 활성화될 때만 렌더링되는 동적 스타일입니다

　[참고] IE7 브라우저는

아웃라인 스타일

을 지원하지 않습니다. 테두리와 유사하며 가장 기본적인 측면입니다. 개요의 스타일은 스타일입니다. 개요에 스타일이 없으면 outline은 전혀 존재하지 않습니다. 테두리와는 다르게 숨겨진 값이 하나 더 있습니다

값: 없음 | 점선 | 이중 홈 | 시작 값: 없음 적용 대상: 모든 요소

상속: 없음

Outline-width

테두리와 유사하게, 개요 너비는 음수일 수 없으며 백분율 값으로 지정할 수도 없습니다.

값: 얇음 | 중간 | 두꺼운| 윤곽선 색상

테두리 색상과 달리 윤곽선 색상에는 반전이라는 키워드가 있습니다. 이는 윤곽선이 위치한 픽셀의 색상을 완전히 반전시켜 윤곽선이 다른 배경색으로 표시되도록 하는 것을 의미합니다. 하지만 실제로 invert 키워드는 IE 브라우저에서만 지원됩니다. 초기값: 반전(IE), 전경색(다른 브라우저)

[참고] IE 브라우저는

값: 길이 | 상속

적용 대상: 모든 요소

<p class="show">测试内容</p>

.show{
    margin: 50px;
    width: 100px;
    height: 100px;
    background-color: pink;
    border-radius : 1px;
    box-shadow: 0 0 0 30px lightblue;
}