CSS3에 대한 약간의 지식
- 零到壹度원래의
- 2018-03-21 11:42:051107검색
이 기사는 주로 CSS3에 대한 약간의 지식에 대해 이야기합니다. 도움이 되기를 바랍니다. 아래 에디터와 함께 살펴보겠습니다.
-
box-shadow는 p 요소에 그림자를 추가합니다.
box-shadow: h-shadow v-shadow 흐림 확산 색상 삽입
h-shadow: 필수입니다. 수평 그림자의 위치입니다. 음수 허용
v-shadow: 필수. 수직 그림자의 위치입니다. 음수 값 허용
blur: 선택 사항. 퍼지 거리
확산: 선택 사항입니다. 그림자의 크기
color 는 선택사항입니다. 그림자의 색상입니다. CSS 색상 값
inset 선택 사항에서 색상 값의 전체 목록을 찾아보세요. 그림자를 외부 그림자에서 내부 그림자로 변경
2.transform: p 요소 회전
호환성 문제:
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform :rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari 및 Chrome */
-o-transform:rotate(7deg) /* Opera */
3.전환: 이동하세요. 전환 효과를 보려면 마우스 포인터를 파란색 p 요소로 가져가세요.
ad846d1ec8764448f5d4e08a5ccc7b3f전환 효과를 보려면 마우스 포인터를 파란색 p 요소로 이동하세요. 94b3e26ee717c64999d7867364b1b4a3!DOCTYPE html> <html> <head> <style> p { width:100px; height:100px; background:blue; transition:width 2s; -moz-transition:width 2s; /* Firefox 4 */ -webkit-transition:width 2s; /* Safari and Chrome */ -o-transition:width 2s; /* Opera */ } p:hover { width:300px; } </style> </head> <body> <p></p>e388a4556c0f65e1904146cc1a846beea4b561c25d9afb9ac8dc4d70affff419참고: 0d36329ec37a2cc24d42c7229b69747a이 예는 Internet Explorer에서 작동하지 않습니다. 94b3e26ee717c64999d7867364b1b4a3
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
위 내용은 CSS3에 대한 약간의 지식의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!