CSS3 기본 지식 및 세부...로그인

CSS3 기본 지식 및 세부 사항

CSS3이란

CSS3은 CSS2의 업그레이드 버전입니다. 3은 CSS2.1을 기반으로 하는 강력한 새 기능을 많이 추가한 것입니다. 현재 주류 브라우저인 Chrome, Safari, Firefox, Opera 및 심지어 360도 이미 CSS3의 대부분의 기능을 지원하고 있으며, IE10도 CSS3를 완벽하게 지원하기 시작할 것입니다.

CSS3 스타일을 작성할 때 브라우저마다 다른 접두사가 필요할 수 있습니다. 이는 CSS 속성 또는 규칙이 아직 W3C 표준의 일부가 되지 않았으며 브라우저의 개인 속성이라는 것을 의미합니다. 현재 최신 버전의 브라우저에는 접두사가 필요하지 않지만 더 나은 호환성을 위해서는 여전히 접두사가 필수입니다.

참고: 이 강좌는 IE9 이하 버전을 지원하지 않습니다. 이 강좌를 학습하려면 최신 버전의 Chrome, Safari, Firefox 및 Opera 브라우저를 사용하는 것이 좋습니다.

CSS3는 무엇을 할 수 있나요?

CSS3는 어떤 이점을 제공하나요? 간단히 말해서, CSS3는 이전에 단 몇 줄의 코드만으로 이미지와 스크립트를 사용해야 했던 많은 효과는 물론 애니메이션 효과까지 얻을 수 있습니다. 예를 들어 둥근 모서리, 그림 테두리, 텍스트 그림자 및 상자 그림자, 전환, 애니메이션 등이 있습니다.

CSS3는 프런트엔드 개발자의 디자인 프로세스를 단순화하고 페이지 로딩 속도를 높입니다.


은 CSS3과 완전히 하위 호환되므로 기존 디자인을 변경할 필요가 없습니다. 브라우저는 항상 CSS2를 지원합니다.

CSS3 모듈

CSS3은 "모듈"로 나뉩니다. 이전 사양이 작은 조각으로 나뉘고 새로운 사양이 추가되었습니다.

가장 중요한 CSS3 모듈 중 일부는 다음과 같습니다:

선택기

상자 모델

배경 및 테두리

텍스트 효과

2D/3D 변환

애니메이션

다열 레이아웃

사용자 인터페이스

CSS3 권장사항

W3C의 CSS3 사양은 아직 개발 중입니다.

그러나 최신 브라우저에서는 많은 새로운 CSS3 속성을 사용할 수 있습니다.


다음 섹션
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网</title> <style> div { width:100px; height:75px; background-color:pink; border:1px solid black; } div#div2 { transform:rotate(30deg); -ms-transform:rotate(30deg); /* IE 9 */ -webkit-transform:rotate(30deg); /* Safari and Chrome */ } </style> </head> <body> <div>这是一个 DIV 元素。</div> <div id="div2">这是一个 DIV 元素。</div> </body> </html>
코스웨어