HTML5의 새로운 속성

1. box-shadow (그림자 효과)

용도:
box-shadow: 20px 10px 0 #000
-moz-box-shadow: 20px 10px 0 # 000;
-webkit-box-shadow: 20px 10px 0 #000;
지원:
FF3.5, Safari 4, Chrome 3
2. )
사용:
테두리: 10px 단색 #000
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc
-moz; -테두리 상단 색상: #555 #666 #777 #888 #999 #aaa #bbb #ccc
-moz-테두리 왼쪽 색상: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc
설명:
색상 값의 개수는 고정되어 있지 않습니다. , FF 전용입니다. 작성 방법은 약어를 지원하지 않습니다: -moz-border-colors: #333 #444 #555
지원:
FF3+
3. boder-image(그림 테두리)
사용:
-moz -border-image: url(exam.png) 20 20 20 20 반복
-webkit-border-image: url(exam.png) 20 20 20 20 반복; >설명:
(1) . 20 20 20 20 ---> 테두리의 너비는 각각 위쪽, 오른쪽, 아래쪽 및 왼쪽 테두리에 해당합니다.
(2 ). 테두리 그림 효과(현재는 두 가지 유형만 구현됨) :
반복 --- 테두리 이미지가 배경 반복과 유사하게 타일링됩니다.
늘이기 --- 테두리 이미지가 늘어납니다. 전체 테두리
(3) 요소는 다음과 같아야 합니다. 테두리 두께는 0이 아닌 자동 값으로 설정됩니다.
지원:
FF 3.5, Safari 4, Chrome 3
4. text-shadow (텍스트 그림자)
사용:
text-shadow : [
] || []; 설명:
(1)
및 은 선택 사항입니다. 을 지정하지 않으면 텍스트 색상이 사용됩니다. 을 지정하지 않으면 반경 값은 0입니다. (2) Shadow는 다음과 같이 쉼표로 구분된 목록일 수 있습니다.
text-shadow: 2px 2px 2px #ccc, 3px 3px 3px #ddd
(3) 그림자 효과는 요소에 적용됩니다.
(4) 이러한 그림자 효과는 서로 겹칠 수 있지만 텍스트 자체를 오버레이하지는 않습니다.
(5) 그림자는 컨테이너 경계 외부로 실행될 수 있습니다. 컨테이너 크기에 영향을 주지 않습니다.
지원:
FF 3.5, Opera 10, Safari 4, Chrome 3
5. text-overflow(텍스트 잘림)
사용:
text-overflow : 상속 | 줄임표 | 클립;
상속 | 줄임표 | 클립
설명:
(1) ellipsis-word 속성도 지원하지 않습니다. .
지원:
IE6+, Safari4, Chrome3, Opera10
6. word-wrap(자동 줄 바꿈)
사용:
word-wrap: 일반 | 지원:
IE6+, FF 3.5, Safari 4, Chrome 3
7. border-radius(둥근 테두리) )
사용:
-moz-border-radius:
-webkit -border-radius: 5px;
지원:
FF 3+, Safari 4, Chrome 3


8. 불투명도(불투명도)
사용:
불투명도: 0.5 ;
필터: alpha(opacity=50); /* IE6, 7 */
-ms -filter(opacity=50) /* IE8 */
지원:
모두
9. box-sizing (컨트롤 박스 모델 구성 모드)
사용:
box-sizing : content-box | border-box // for Opera
-moz-box-sizing: content- box | border-box;
-webkit-box-sizing: content-box | border-box; 설명:
1. content-box:
이 값을 사용하면 상자 모델은 요소 너비 = 콘텐츠 + 패딩 + 테두리
2. border-box:
사용 이 값에서 상자 모델의 구성 모드는 요소 너비 = 콘텐츠입니다. 설정되어 있으면
요소의 너비는 변경되지 않습니다.
지원:
FF3+, Opera 10, Safari 4, Chrome 3