CSS3 튜토리얼 - 사용자 인터페이스

안녕하세요! 프론트엔드 개발 친구 여러분, 항상 저와 함께해주셔서 감사합니다. 오늘의 CSS3 튜토리얼-사용자 인터페이스는 CSS3 튜토리얼의 마지막 기사입니다.

CSS3는 웹사이트 인터페이스에 대한 고유한 렌더링 속성을 다시 제공합니다. 이 기사에서는 이에 대해 자세히 소개합니다.

CSS3 사용자 인터페이스:

CSS3의 새로운 사용자 인터페이스 기능에는 요소 크기 조정, 상자 크기 및 윤곽선이 포함됩니다.

이 장에서는 다음과 같은 사용자 인터페이스 속성을 배웁니다.

2. 개요 -오프셋.

브라우저 지원:

Firefox, Chrome 및 Safari는 크기 조정 속성을 지원합니다.

Internet Explorer, Chrome, Safari 및 Opera는 상자 크기 속성을 지원합니다. Firefox에는 접두사 -moz-가 필요합니다.

Internet Explorer를 제외한 모든 주요 브라우저는 개요 오프셋 속성을 지원합니다.

CSS3 크기 조정:

CSS3에서 resize 속성은 사용자가 요소의 크기를 조정할 수 있는지 여부를 지정합니다.

CSS 코드는 다음과 같습니다.

예:

p 요소의 크기를 사용자가 조정할 수 있도록 지정합니다.

CSS3 상자 크기:

상자 크기 조정 속성을 사용하면 콘텐츠가 특정 영역에 어떻게 들어가는지 정확하게 정의할 수 있습니다.

p
{
resize:both;
overflow:auto;
}

예:

두 개의 병렬 테두리 상자 지정:

CSS3 외곽선 오프셋:

outline-offset 속성은 외곽선 오프셋을 설정하고 테두리 가장자리 너머로 외곽선을 그립니다.

p
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}

윤곽선과 테두리에는 두 가지 차이점이 있습니다.

1. 윤곽선은 공간을 차지하지 않습니다.

2.

CSS 코드는 다음과 같습니다.

예:

테두리 가장자리 외부의 15픽셀 외곽선을 지정합니다.

새 사용자 인터페이스 속성:

다음 표에는 모든 변환 속성이 ​​나열되어 있습니다.

p
{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}

이것이 CSS3 튜토리얼 - 사용자입니다. 인터페이스, 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트(www.php.cn)를 주목하세요!