CSS3의 새로운 기능 요약(인터뷰에 필수)

CSS는 끊임없이 발전하는 “언어”입니다. 우리가 일상생활에서 프론트엔드 작업을 위해 인터뷰할 때 꼭 필요한 지식 포인트입니다. 다음 글에서는 프론트엔드에 꼭 필요한 CSS3의 새로운 기능을 주로 소개합니다. 관련 정보는 기사 내 예제 코드를 통해 자세하게 소개되어 있으니 필요하신 분들은 참고해 보세요.

머리말

앞서 html5의 새로운 기능에 대해 소개한 바 있습니다. html5의 새로운 기능 외에도 CSS3의 새로운 기능에 대해서도 인터뷰에서 자주 질문을 받습니다. 아래에는 별로 할 말이 없지만, 필요한 친구들은 편집자를 따라가서 자세한 소개를 살펴볼 수 있습니다.

Selectors

이전에 JavaScript를 해결해야 했던 많은 레이아웃 문제를 해결하는 많은 새로운 선택기가 CSS3에 추가되었습니다.

1. element1~element2: element1 요소 앞에 오는 각 element2 요소를 선택합니다.

2. [attribute^=value]: 속성 속성이 value로 시작하는 요소를 선택합니다.

3. [attribute$=value]: 속성 속성이 value로 끝나는 요소를 선택합니다.

4. [attribute*=value]: 속성 속성에 값 문자열이 포함된 요소를 선택합니다.

5. E:first-of-type: 상위 요소의 첫 번째 E 요소인 각 E 요소를 선택합니다.

6. E:last-of-type: 상위 요소의 마지막 E 요소인 각 E 요소를 선택합니다.

7. E:only-of-type: 상위 요소의 유일한 E 요소인 각 E 요소를 선택합니다.

8. E:only-child: 상위 요소의 유일한 하위 요소인 각 E 요소를 선택합니다.

9. E:nth-child(n): 상위 요소의 n번째 하위 요소인 각 E 요소를 선택합니다.

10. E:nth-last-child(n): 상위 요소의 맨 아래에서 n번째 하위 요소인 각 E 요소를 선택합니다.

11. E:nth-of-type(n): 상위 요소의 n번째 E 요소에 속하는 각 E 요소를 선택합니다.

12. E:nth-last-of-type(n): 마지막 상위 요소에서 n번째 E 요소에 속하는 각 E 요소를 선택합니다.

13. E:last-child: 상위 요소의 마지막 하위 요소인 각 E 요소를 선택합니다.

14. :root: 문서의 루트 요소를 선택합니다.

15. E:empty: 하위 요소가 없는 모든 E 요소(텍스트 노드 포함)를 선택합니다.

16. E:target: 현재 활성화된 E 요소를 선택합니다.

17. E:enabled: 활성화된 각 E 요소를 선택합니다.

18. E:disabled: 비활성화된 각 E 요소를 선택합니다.

19. E:checked: 선택한 각 E 요소를 선택합니다.

20. E:not(selector): 선택자 요소가 아닌 각 요소를 선택합니다.

21. E::selection: 사용자가 선택한 요소의 일부를 선택합니다.

전환, 변형 및 애니메이션

이 세 가지 기능은 CSS3의 새로운 애니메이션 관련 기능입니다.

Transition

Transition은 Flash 애니메이션이나 JavaScript를 사용하지 않고 한 스타일에서 다른 스타일로 전환할 때 요소에 효과를 추가합니다.

Transition에는 다음 속성이 있습니다.

1. transition-property: 전환을 적용하는 CSS 속성의 이름을 지정합니다.

2. transition-duration: 전환 효과를 완료하는 데 걸리는 시간을 지정합니다.

3. transition-delay: 전환 효과가 시작되는 시기를 지정하며 기본값은 0입니다.

4. transition-timing-function: 전환 효과의 시간 곡선을 지정합니다. 기본값은 "ease"입니다. 선형,이지 인,이지 아웃,이지 아웃 및 큐빅과 같은 전환 유형도 있습니다. -베지에.

5. transition: 단축 속성으로, 하나의 속성에 4개의 전환 속성을 설정하는 데 사용됩니다.

다음과 같이 예제의 모든 전환 속성을 사용합니다.

p {
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 2s;
    /* Firefox 4 */
    -moz-transition-property:width;
    -moz-transition-duration:1s;
    -moz-transition-timing-function:linear;
    -moz-transition-delay:2s;
    /* Safari 和 Chrome */
    -webkit-transition-property:width;
    -webkit-transition-duration:1s;
    -webkit-transition-timing-function:linear;
    -webkit-transition-delay:2s;
    /* Opera */
    -o-transition-property:width;
    -o-transition-duration:1s;
    -o-transition-timing-function:linear;
    -o-transition-delay:2s;
}

전환 속성 약어를 다음과 같이 사용합니다.

p {
    transition: width 1s linear 2s;
    /* Firefox 4 */
    -moz-transition:width 1s linear 2s;
    /* Safari and Chrome */
    -webkit-transition:width 1s linear 2s;
    /* Opera */
    -o-transition:width 1s linear 2s;
}

Transform

Transform은 요소에 다양한 2D 및 3D 변형을 적용하는 데 사용됩니다. , 이 속성을 사용하면 요소를 회전, 크기 조정, 이동 또는 기울일 수 있습니다. 사용법은 다음과 같습니다.

p{
    transform:rotate(7deg);
    -ms-transform:rotate(7deg);     /* IE 9 */
    -moz-transform:rotate(7deg);    /* Firefox */
    -webkit-transform:rotate(7deg); /* Safari 和 Chrome */
    -o-transform:rotate(7deg);  /* Opera */
}

Transformation type

transform은 다양한 변환 유형, 즉 속성 값을 가질 수 있습니다.

1. none: 정의는 변환을 수행하지 않습니다.

2. matrix(n,n,n,n,n,n): 6개 값의 행렬을 사용하여 2D 변환을 정의합니다.

3. matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n): 16개 값의 4x4 행렬을 사용하여 3D 변환을 정의합니다. .

4. translate(x,y): 2D 변위 변환을 정의합니다.

5. translate3d(x,y,z): 3D 변위 변환을 정의합니다.

6. translateX(x): X축 값을 사용하여 변위 변환을 정의합니다.

7. translateY(y): Y축 값을 사용하여 변위 변환을 정의합니다.

8. translateZ(z): Z축 값만 사용하여 3D 변위 변환을 정의합니다.

9. scale(x,y): 2D 스케일링 변환을 정의합니다.

10. scale3d(x,y,z): 3D 스케일링 변환을 정의합니다.

11. scaleX(x): X축 값을 설정하여 크기 조정 변환을 정의합니다.

12. scaleY(y): Y축 값을 설정하여 크기 조정 변환을 정의합니다.

13. scaleZ(z): Z축 값을 설정하여 3D 스케일링 변환을 정의합니다.

14. rotate(angle): 2D 회전을 정의하고 매개변수에 각도를 지정합니다.

15. rotate3d(x,y,z,angle): 定义3D旋转。

16. rotateX(angle): 定义沿着X轴的3D旋转。

17. rotateY(angle): 定义沿着Y轴的3D旋转。

18. rotateZ(angle): 定义沿着Z轴的3D旋转。

19. skew(x-angle,y-angle): 定义沿着X和Y轴的2D倾斜转换。

20. skewX(angle): 定义沿着X轴的2D倾斜转换。

21. skewY(angle): 定义沿着Y轴的2D倾斜转换。

22. perspective(n): 为3D转换元素定义透视视图。

浏览器支持

Internet Explorer 10、Firefox、Opera 支持 transform 属性。

Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。

Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。

Opera 只支持 2D 转换。

Animation

Animation让CSS拥有了可以制作动画的功能。使用CSS3的Animation制作动画我们可以省去复杂的js代码。使用方法大概如下：

@-webkit-keyframes anim1 { 
   0% { 
        opacity: 0; 
        font-size: 12px; 
   } 
   100% { 
        opacity: 1; 
        font-size: 24px; 
   } 
} 
.anim1p { 
   -webkit-animation-name: anim1 ; 
   -webkit-animation-duration: 1.5s; 
   -webkit-animation-iteration-count: 4; 
   -webkit-animation-direction: alternate; 
   -webkit-animation-timing-function: ease-in-out; 
}

具体用法可以参考教程：CSS3 Animation。

边框

CSS3新增了三个边框属性，分别是border-radius、box-shadow和border-image。border-radius可以创建圆角边框，box-shadow可以为元素添加阴影，border-image可以使用图片来绘制边框。IE9+支持border-radius和box-shadow属性。Firefox、Chrome以及Safari支持所有新的边框属性。

背景

CSS3新增了几个关于背景的属性，分别是background-clip、background-origin、background-size和background-break。

background-clip

background-clip属性用于确定背景画区，有以下几种可能的属性：

1. background-clip: border-box; 背景从border开始显示

2. background-clip: padding-box; 背景从padding开始显示

3. background-clip: content-box; 背景显content区域开始显示

4. background-clip: no-clip; 默认属性，等同于border-box

通常情况，背景都是覆盖整个元素的，利用这个属性可以设定背景颜色或图片的覆盖范围。

background-origin

background-clip属性用于确定背景的位置，它通常与background-position联合使用，可以从 border、padding、content来计算background-position（就像background-clip）。

1. background-origin: border-box; 从border开始计算background-position

2. background-origin: padding-box; 从padding开始计算background-position

3. background-origin: content-box; 从content开始计算background-position

background-size

background-size属性常用来调整背景图片的大小，主要用于设定图片本身。有以下可能的属性：

1. background-size: contain; 缩小图片以适合元素（维持像素长宽比）

2. background-size: cover; 扩展元素以填补元素（维持像素长宽比）

3. background-size: 100px 100px; 缩小图片至指定的大小

4. background-size: 50% 100%; 缩小图片至指定的大小，百分比是相对包 含元素的尺寸

background-break

CSS3中，元素可以被分成几个独立的盒子（如使内联元素span跨越多行），background-break 属性用来控制背景怎样在这些不同的盒子中显示。

1. background-break: continuous; 默认值。忽略盒之间的距离（也就是像元素没有分成多个盒子，依然是一个整体一样）

2. background-break: bounding-box; 把盒之间的距离计算在内；

3. background-break: each-box; 为每个盒子单独重绘背景。

文字效果

word-wrap

CSS3中，word-wrap属性允许您允许文本强制文本进行换行，即这意味着会对单词进行拆分。所有主流浏览器都支持 word-wrap 属性。

p {
    word-wrap:break-word;
}

text-overflow

它与word-wrap是协同工作的，word-wrap设置或检索当当前行超过指定容器的边界时是否断开转行，而 text-overflow则设置或检索当当前行超过指定容器的边界时如何显示。对于“text-overflow”属性，有“clip”和“ellipsis”两种可供选择。

text-shadow

CSS3中，text-shadow可向文本应用阴影。能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色。

h1{
    text-shadow: 5px 5px 5px #FF0000;
}

text-decoration

CSS3里面开始支持对文字的更深层次的渲染，具体有三个属性可供设置：

1. text-fill-color: 设置文字内部填充颜色

2. text-stroke-color: 设置文字边界填充颜色

3. text-stroke-width: 设置文字边界宽度

渐变

CSS3新增了渐变效果，包括linear-gradient(线性渐变)和radial-gradient(径向渐变)。具体用法参考教程：CSS3 Gradient

@font-face特性

在CSS3之前，web设计师必须使用已在用户计算机上安装好的字体。通过CSS3，web设计师可以使用他们喜欢的任意字体。当您您找到或购买到希望使用的字体时，可将该字体文件存放到web服务器上，它会在需要时被自动下载到用户的计算机上。字体是在 CSS3 @font-face 规则中定义的。Firefox、Chrome、Safari以及Opera支持 .ttf(True Type Fonts)和 .otf(OpenType Fonts)类型的字体。IE9+ 支持新的@font-face规则，但是仅支持 .eot类型的字体(Embedded OpenType)。

在新的@font-face规则中，必须首先定义字体的名称（比如myFont），然后指向该字体文件。
 

如需为HTML元素使用字体，请通过font-family属性来引用字体的名称 (myFont)

@font-face {
    font-family: myFirstFont;
    src: url('Sansation_Light.ttf'),
         url('Sansation_Light.eot'); /* IE9+ */
}
p{
    font-family:myFirstFont;
}

多列布局

通过CSS3，能够创建多个列来对文本进行布局，IE10和Opera支持多列属性。Firefox 需要前缀-moz-，Chrome和Safari需要前缀-webkit-。主要有如下三个属性：

1. column-count: 规定元素应该被分隔的列数。

2. column-gap: 规定列之间的间隔。

3. column-rule: 设置列之间的宽度、样式和颜色规则

p{
    -moz-column-count:3;    /* Firefox */
    -webkit-column-count:3; /* Safari 和 Chrome */
    column-count:3;
    -moz-column-gap:40px;       /* Firefox */
    -webkit-column-gap:40px;    /* Safari 和 Chrome */
    column-gap:40px;
    -moz-column-rule:3px outset #ff0000;    /* Firefox */
    -webkit-column-rule:3px outset #ff0000; /* Safari and Chrome */
    column-rule:3px outset #ff0000;
}

用户界面

CSS3中，新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等。Firefox、Chrome以及Safari 支持resize属性。IE、Chrome、Safari以及Opera支持box-sizing属性。Firefox需要前缀-moz-。
所有主流浏览器都支持outline-offset属性，除了IE。

resize

resize 属性规定是否可由用户调整元素尺寸。如果希望此属性生效，需要设置元素的 overflow 属性，值可以是 auto、hidden 或 scroll。

p{
    resize:both; /* none|both|horizontal|vertical; */
    overflow:auto;
}

box-sizing

box-sizing属性可设置的值有content-box、border-box和inherit。

1. content-box: padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 (Element width = width + border + padding)，此属性表现为标准模式下的盒模型。

2. border-box: padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 (Element width = width)，此属性表现为怪异模式下的盒模型。

outline-offset

outline-offset属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。

위 내용은 CSS3의 새로운 기능 요약(인터뷰에 필수)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!