CSS3를 너무 오래 접해왔거든요. 필요할 때마다 직접 사용하는데, 제대로 정리하지 못해서 여기서 정리하겠습니다.
CSS3 테두리:
둥근 테두리:
키: border-radius
<!DOCTYPE html> <html> <head> <style> div { text-align:center; border:2px solid #a1a1a1; padding:10px 40px; width:350px; border-radius:25px; -moz-border-radius:25px; -webkit-border-radius:25px; } </style> </head> <body> <div>圆角边框</div> </body> </html>
CSS3 border-shadow:
키: 상자 그림자
구문: 개체 선택기 {box-shadow:[투영 모드,] X축 오프셋, Y축 오프셋[, 그림자 흐림 반경][, 그림자 확장 반경][ ,그림자 색상]}
투영 방법: 이 매개변수는 선택 사항입니다. 값이 설정되지 않은 경우 기본 투영 방법은 외부 그림자입니다. 고유 값 "삽입"을 사용하면 투영은 내부 그림자입니다.
X-오프셋: 그림자 수평 오프셋, 해당 값은 양수이거나 부정적인 . 값이 양수이면 그림자는 개체의 오른쪽에 있습니다.
Y-오프셋: 그림자의 수직 오프셋입니다. 그 값은 양수일 수도 있고 음수일 수도 있습니다. 양수 값이면 그림자는 개체의 아래쪽에 있습니다.
그림자 흐림 반경: 이 매개변수는 선택 사항이지만, 값이 0이면 그림자에 흐림 효과가 없음을 의미합니다.
그림자 확장 반경: 선택 사항이며 해당 값은 양수 또는 음수일 수 있습니다. 값이 양수이면 전체 그림자가 확장되고, 값이 음수이면 축소됩니다.
그림자 색상: 선택 사항입니다. 색상을 설정하지 않으면 브라우저는 기본 색상을 사용하게 되지만, 각 브라우저의 기본 색상이 일치하지 않는 경우가 많습니다. 특히 webkit 커널 아래의 Safari 및 Chrome 브라우저에서는 투명색, Firefox/Opera 아래에서는 검정색( 검증됨) 이 매개변수는 생략하지 않는 것이 좋습니다.
CSS3 테두리 이미지:
키: -webkit-border-image
예:
p { border-image:url(border.png) 30 30 round; -moz-border-image:url(border.png) 30 30 round; /* Firefox */ -webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */ -o-border-image:url(border.png) 30 30 round; /* Opera */ }
CSS3 배경:
background-size 속성은 배경 이미지의 크기를 지정합니다
p { background:url(bg_flower.gif); -moz-background-size:63px 100px; /* 老版本的 Firefox */ background-size:63px 100px; background-repeat:no-repeat; }
background-origin 속성은 배경 이미지의 위치 지정 영역을 지정합니다
p { background:url(bg_flower.gif); background-repeat:no-repeat; background-size:100% 100%; -webkit-background-origin:content-box; /* Safari */ background-origin:content-box; }
CSS3 여러 배경 이미지
body { background-image:url(bg_flower.gif),url(bg_flower_2.gif); }
CSS3 텍스트 효과
CSS3 텍스트 섀도우
h1 { text-shadow: 5px 5px 5px #FF0000; }
CSS3 단어 줄 바꿈
p {word-wrap:break-word;}
새로운 @font-face 규칙에서는 먼저 글꼴 이름( myFirstFont와 같은) 글꼴 파일을 가리킵니다.
HTML 요소에 글꼴을 사용하려면 다음과 같이 글꼴 계열 속성을 통해 글꼴 이름(myFirstFont)을 참조하세요.
c9ccee2e6ea535a969eb3f532ad9fe89 @font-face{font-family: myFirstFont;src: url('Sansation_Light.ttf'), url('Sansation_Light.eot'); /* IE9+ */}p{font-family:myFirstFont;}531ac245ce3e4fe3d50054a55f265927
CSS3 2D 변환
번역: 번역
p { transform: translate(50px,100px); -ms-transform: translate(50px,100px); /* IE 9 */ -webkit-transform: translate(50px,100px); /* Safari and Chrome */ -o-transform: translate(50px,100px); /* Opera */ -moz-transform: translate(50px,100px); /* Firefox */ }
회전: 회전
p { transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Safari and Chrome */ -o-transform: rotate(30deg); /* Opera */ -moz-transform: rotate(30deg); /* Firefox */ }
Scale: scale
scale() 메소드를 통해 요소의 크기는 주어진 너비(X축)와 높이(Y-축)에 따라 증가하거나 감소합니다. axis) 매개변수:
p { transform: scale(2,4); -ms-transform: scale(2,4); /* IE 9 */ -webkit-transform: scale(2,4); /* Safari 和 Chrome */ -o-transform: scale(2,4); /* Opera */ -moz-transform: scale(2,4); /* Firefox */ }
Flip:skew
skew() 메소드를 통해 요소는 주어진 각도만큼 반전됩니다. 주어진 가로선(X축) 및 세로선(Y축) 매개변수:
p { transform: skew(30deg,20deg); -ms-transform: skew(30deg,20deg); /* IE 9 */ -webkit-transform: skew(30deg,20deg); /* Safari and Chrome */ -o-transform: skew(30deg,20deg); /* Opera */ -moz-transform: skew(30deg,20deg); /* Firefox */ }
CSS3 3d 변환
rotateX()
Flash 애니메이션이나 JavaScript를 사용하지 않고 요소가 한 스타일에서 다른 스타일로 변경될 때 요소에 효과(부드러운 전환) 추가를 따라 회전합니다.
너비, 높이 및 전환에 전환 효과 추가:
p { transition: width 2s, height 2s, transform 2s; -moz-transition: width 2s, height 2s, -moz-transform 2s; -webkit-transition: width 2s, height 2s, -webkit-transform 2s; -o-transition: width 2s, height 2s,-o-transform 2s; }
요약:
필수 시작 상태와 종료 상태가 주어지면
p에 전환을 추가합니다: 넓은 전환 시간, 높은 전환 시간, 전환 전환 시간
transition:[宽 过渡时间][,高 过渡时间][,转换 过渡时间]
CSS3 애니메이션
액션 @keyframes 설정
@keyframes myfirst { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} }
액션 클래스 설정
.myaction{ animation:myfirst 5s; }
p에 액션 클래스 추가
$("...").addClass('.myaction');
참고:
구문:
animation:name duration timing-function delay iteration-count direction
name: @keyframes의 이름
duration: 애니메이션을 완료하는 데 걸리는 시간을 초 또는 밀리초 단위로 지정합니다.
timing-function: 애니메이션의 속도 곡선을 지정합니다.
delay:动画开始之前的延迟,秒。
iteration-count:规定动画播放的次数:具体数值或infinite(无限次)。
direction:规定是否轮流反向播放动画。normal正常播放,alternate轮流反向播放。
CSS3多列:
创建多个列对文本进行布局
p { -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari 和 Chrome */ column-count:3; }
CSS3用户界面
p { border:2px solid; padding:10px 40px; width:300px; resize:both; overflow:auto; }
CSS3的新特性就梳理到这里啦。个人觉得转换和动画是重点,需要好好掌握。
更多CSS3新特性罗列 相关文章请关注PHP中文网!