이 기사는 주로 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 요소로 가져가세요.
<
전환 효과를 보려면 마우스 포인터를 파란색 p 요소로 이동하세요.
!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>참고: 이 예는 Internet Explorer에서 작동하지 않습니다.