CSS3의 새로운 기능 목록
- 高洛峰원래의
- 2017-02-23 10:33:551444검색
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中文网！