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

앞의 말

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

　[참고] IE7 브라우저는

아웃라인 스타일

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

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

상속: 없음

Outline-width

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

outline-width

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

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

적용 대상: 모든 요소

상속: 없음

윤곽선 오프셋

윤곽선 오프셋은 윤곽선의 오프셋 위치를 정의하는 데 사용되는 값입니다. 매개변수 값이 양수이면 외곽선이 바깥쪽으로 오프셋된다는 의미이고, 매개변수 값이 음수이면 외곽선이 안쪽으로 오프셋된다는 의미입니다.

[참고] IE 브라우저는

outline-을 지원하지 않습니다. offset

값: 길이 | 상속

초기 값: 0

적용 대상: 모든 요소

상속: 없음

Outline

윤곽선은 테두리 스타일의 테두리 속성과 유사하며, 윤곽선 스타일을 허용합니다. 너비와 색상을 한 번에 설정합니다. 주어진 윤곽선은 일정한 스타일, 너비 및 색상을 채택해야 하기 때문에 윤곽선에 대한 유일한 단축 속성은 윤곽선입니다. 윤곽선에는outline-top,outline-right 속성이 없습니다

　[참고]outline-offset은 윤곽선에 포함되지 않으며,outline-offset을 별도로 설정해야 합니다

outline

　 값: [ || acquire

초기값: 없음

적용 대상: 없음

Apply

아닙니다. 요소의 상자 모델 크기에는 영향을 주지만

페이지 레이아웃

에는 영향을 주지 않으므로 윤곽선을 사용하여 테두리 효과를 모방할 수 있습니다. 하지만

둥근 테두리

라면 쉽지 않습니다.

　 Firefox 브라우저는 둥근 모서리 윤곽선을 설정하기 위해 -moz-outline-radius 개인 속성을 지원합니다. 이 속성에 해당하는 js 작성 방법은 MozOutlineRadius

입니다. 다른 브라우저의 경우 다른 속성을 사용하여 유사한 효과를 얻을 수 있습니다. box-shadow와 border-radius 속성은 동일한 원점을 가집니다. 즉, border-radius가 둥글면 box-shadow의 투영도 둥글게 됩니다

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

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

위 내용은 CSS 개요 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!