CSS3의 새로운 속성(재인쇄)

앞에 적음:

CSS5 표준이 아직 완전히 확정되지 않았기 때문에 다양한 코어의 브라우저에는 고유한 표준이 있습니다. 속성을 혼동하지 않기 위해 각 브라우저는 해당 표준에 접두어를 추가합니다.

예: -moz- 주로 firefox

-webikt-주로 크롬 구글,

-o- 주로 Mac 브라우저에서 사용

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. border 여러 색상)
사용:
테두리: 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+
셋. 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) <색상> 및 < ;Blur Radius>는 선택 사항입니다. 를 지정하지 않으면 텍스트 색상이 사용됩니다. 반경 값은 0입니다.
(2) 그림자는 쉼표일 수 있습니다. -구분된 목록, 예:
text-shadow: 2px 2px 2px #ccc, 3px 3px 3px #ddd;
(3) 그림자 효과는 그림자 목록에 지정된 순서대로 요소에 적용됩니다.
(4) 이러한 그림자 효과는 서로 겹칠 수 있지만 텍스트 자체는 겹칠 수 없습니다.
(5) 그림자는 컨테이너 경계 외부로 실행될 수 있지만 컨테이너 크기에는 영향을 미치지 않습니다. 지원:
FF 3.5, Opera 10, Safari 4, Chrome 3

5. 텍스트 오버플로(텍스트 잘림)
사용: 텍스트 오버플로: 상속 | clip ;
-o-text -overflow: 상속 | 줄임표 | 클립;
설명:
(1) 줄임표-단어 속성도 있지만 모든 브라우저가 이를 지원하지 않습니다.
지원 :
IE6+, Safari4, Chrome3, Opera10

6. word-wrap(자동 줄 바꿈)
사용: word-wrap: Normal | >지원:
IE6+, FF 3.5, Safari 4, Chrome 3

7. border-radius(둥근 테두리)

사용: -moz-border-radius: 5px ;-webkit-border-radius : 5px;
지원:
FF 3+, Safari 4, Chrome 3



8. >
사용:
불투명도: 0.5; filter: alpha(opacity=50) /* IE6, 7 */ -ms-filter(opacity=50) /* IE8 */
지원:
all

9.box-sizing(컨트롤 박스 모델 구성 모드)

사용:
box-sizing: content-box | box; // 오페라용 -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, 크롬 3