CSS3의 새로운 기능 목록-CSS 튜토리얼-php.cn

CSS3의 새로운 기능 목록

高洛峰

풀어 주다： 2017-02-23 10:33:55

원래의

1439명이 탐색했습니다.

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 속성은 배경 이미지의 위치 지정 영역을 지정합니다

CSS3新特性罗列

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)을 참조하세요.

<style> @font-face{font-family: myFirstFont;src: url(&#39;Sansation_Light.ttf&#39;),
     url(&#39;Sansation_Light.eot&#39;); /* IE9+ */}p{font-family:myFirstFont;}</style>

로그인 후 복사

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(&#39;.myaction&#39;);

로그인 후 복사

참고:

구문:

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中文网！