CSS3 사용자 인터페이스
CSS3 사용자 인터페이스
CSS3에서, 요소 사이즈, 프레임 사이즈 및 외부 테두리를 조정하기위한 새로운 사용자 인터페이스 기능의 수를 증가시킨다.
이 장에서는 다음과 같은 사용자 인터페이스 특성을 배울 것입니다 :
- 크기 조정
- 상자 크기 조정
- - 개요 오프셋 (offset)
브라우저 지원
표의 수치 속성의 버전 번호를 먼저 지원 브라우저를 나타낸다.
즉시 디지털 -webkit- 이어 -ms- 또는 접두어 지원 전 -moz- 우선 브라우저 버전 번호 때문이다.
| 属性 | |||||
|---|---|---|---|---|---|
| resize | 4.0 | 不兼容 | 5.0 4.0 -moz- |
4.0 | 15.0 |
| box-sizing | 10.0 4.0 -webkit- |
8.0 | 29.0 2.0 -moz- |
5.1 3.1 -webkit- |
9.5 |
| outline-offset | 4.0 | 不兼容 | 5.0 4.0 -moz- |
4.0 | 9.5 |
CSS3 크기 조정 (축소)
CSS3에서, 속성 요소는 사용자가 크기를 조정할지 여부를 지정 크기 조정.
사용자가 크기를 조정할 DIV 요소. (파이어 폭스 4 +, 크롬, 사파리에서)
다음과 같이 CSS 코드는 다음과 같습니다
CSS3 크기 조정 상자 (상자 크기 조정)
상자 크기 조정 속성 것은 당신이 적응의 특정 영역의 정확한 내용을 정의 할 수 있습니다.
예
경계 블록 옆에 두 개의 측면의 규정 :
div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
float:left;
}
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
float:left;
}
»시도
CSS3은 (개요 오프셋) 형태를 수정
- 개요 오프셋 성 오프셋 윤곽과 경계의 가장자리를 넘어 프로파일을 그립니다.
두 개의 서로 다른 형상 및 프레임이 있습니다 :
- 윤곽은 공간을 차지하지 않습니다
- 이 사각형이 아닌 아웃 할 수있다
경계 (15)는 윤곽 픽셀이 밖에이 div에.
다음과 같이 CSS 코드는 다음과 같습니다
예
경계 (15)의 가장자리 형상의 화소 밖에 조항 :
div
{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}
{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}
»시도
새로운 사용자 인터페이스 기능
| 재산 | 설명 | CSS |
|---|---|---|
| 외관 | 그것은 표준 사용자 인터페이스 요소와 같은 요소의 모양을 만들 수 있도록 | 3 |
| 상자 크기 조정 | 그것은 당신이 지역에 적응하기 위해 어떤 방식으로 특정 요소를 정의 할 수 있습니다 | 3 |
| 아이콘 | 요소의 제작자는 동등한 용량을 아이콘으로 설정되어 있습니다. | 3 |
| 탐색 다운 | 아래로 이동하려면 화살표 키를 사용하는 경우 이동 위치를 지정합니다 | 3 |
| 탐색 색인 | 지정 순서 탭의 요소 | 3 |
| 탐색 왼쪽 | 이동 왼쪽 화살표 탐색 키를 사용하여 위치를 지정합니다 | 3 |
| 탐색 오른쪽 | 탐색 화살표 오른쪽 네비게이션 키를 사용하여 위치를 지정 | 3 |
| 탐색 업 | 최대 이동하려면 화살표 키를 사용하는 경우 이동 위치를 지정합니다 | 3 |
| - 개요 오프셋 (offset) | 외형을 수정하고 테두리의 모서리를 통해 그릴 | 3 |
| 크기 조정 | 요소는 사용자가 크기를 조정할지 여부를 지정합니다 | 3 |