HTML_HTML/Xhtml_Web 페이지 제작 시 여러 특수 속성 태그 사용 소개

다음 속성은 브라우저와 잘 호환되지 않습니다.

1.transform:rotate(45deg)
2.border-top-left-radius 이 속성을 사용하면 요소에 둥근 테두리를 추가할 수 있습니다.
3.border-radius 이 속성을 사용하면 요소에 둥근 테두리를 추가할 수 있습니다.
4.box-shadow 속성은 상자에 하나 이상의 그림자를 추가합니다
5.text-shadow 속성은 텍스트에 그림자를 설정합니다.
6.전환

다양한 브라우저와 더 잘 호환되도록 하려면
-o- /*Opera 브라우저*/
-webkit- /*Webkit을 추가해야 합니다. 커널 브라우저 Safari 및 chrome*/
-ms- /*IE 9*/
-moz- /*Firefox*/

1.transform:rotate(45deg)
변형 속성을 통해 객체를 회전합니다. 여기서 (45deg)는 회전 각도입니다.

transform:rotate(45deg)
-ms-transform:rotate(45deg) /*IE 9 */
-o-transform:rotate(45deg); /*Opera 브라우저*/
-webkit-transform:rotate(45deg) /*Webkit 커널 브라우저 Safari 및 chrome*/
-moz- 변환: 회전(45deg); /*Firefox 브라우저*/

2.border-top-left-radius border-radius 이 속성을 사용하면 요소에 둥근 테두리를 추가할 수 있습니다
이전 둥근 테두리를 추가할 위치를 선택할 수 있습니다
border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius
border -top-left -radius 이 속성을 사용하면 요소에 둥근 테두리를 추가할 수 있습니다. border-radius와 동일하지만 둥근 테두리를 추가해야 하는 위치를 제어할 수 있습니다. 3. box-shadow 속성은 하나 이상의 그림자를 추가하고, text-shadow 속성은 그림자를 텍스트로 설정합니다.

box-shadow: h-shadow || v-shadow || 삽입; 속성: 수평 그림자 위치|| 그림자 크기|| 그림자 색상|| 외부 그림자(초기값)를 내부 그림자로 변경: 1px 3px #292929 ;
텍스트-그림자 || v-그림자 || 색상
텍스트-그림자: 0px -1px 0px #000; .transition

속성 || 기간 || 타이밍 기능 || 전환 효과를 설정하는 CSS 속성의 이름을 지정합니다.|| 전환 효과를 완료하는 데 걸리는 시간을 지정합니다. || 속도 효과의 속도 곡선을 지정합니다.|| 전환 효과를 정의합니다. 시작 시기

현재 모든 브라우저는 전환 속성을 지원하지 않습니다.
기본을 완화하세요. 애니메이션은 느린 속도로 시작했다가 속도가 빨라지고 끝나기 전에 느려집니다.
ease-in 애니메이션은 느린 속도로 시작하고 끝납니다. ease-out 애니메이션은 느린 속도로 끝납니다ease- 인아웃 애니메이션이 느린 속도로 시작하고 끝남

전환:배경 5초 용이성

ONE EG:





코드 복사

파란색 div 요소에 마우스 포인터를 대면 전환 효과를 볼 수 있습니다.

참고: 이 예는 Internet Explorer에서 작동하지 않습니다.