Summarize the new features of CSS3 (essential for interviews)

CSS is a "language" that is constantly developing. It is an essential knowledge point when we interview for front-end work in our daily life. The following article mainly introduces to you the new CSS3 essential for front-end interviews. The relevant information about the characteristics is introduced in great detail through sample code. Friends in need can refer to it. Let’s take a look together.

Preface

We have introduced to you the new features of html5 before. In addition to the new features of html5, the new features of CSS3 are also interview is often asked. Not much to say below, friends who need it can follow the editor to take a look at the detailed introduction.

Selectors

Many new selectors have been added to CSS3, which solves many layout problems that previously needed to be solved with JavaScript.

1. element1~element2: Select each element2 element preceded by an element1 element.

2. [attribute^=value]: Select an element whose attribute attribute starts with value.

3. [attribute$=value]: Select an element whose attribute attribute ends with value.

4. [attribute*=value]: Select an element whose attribute attribute contains the value string.

5. E:first-of-type: Selects each E element that is the first E element of its parent element.

6. E:last-of-type: Selects each E element that is the last E element of its parent element.

7. E:only-of-type: Selects each E element that is the only E element of its parent element.

8. E:only-child: Selects each E element that is the only child element of its parent element.

9. E:nth-child(n): Selects each E element that is the nth child element of its parent element.

10. E:nth-last-child(n): Selects each E element that is the nth child element from the bottom of its parent element.

11. E:nth-of-type(n): Selects each E element that belongs to the nth E element of its parent element.

12. E:nth-last-of-type(n): Select each E element that belongs to the nth E element from the last of its parent element.

13. E:last-child: Selects each E element that is the last child element of its parent element.

14. :root: Select the root element of the document.

15. E:empty: Selects every E element (including text nodes) that has no child elements.

16. E:target: Select the currently active E element.

17. E:enabled: Selects each enabled E element.

18. E:disabled: Selects each disabled E element.

19. E:checked: Select each selected E element.

20. E:not(selector): Select each element that is not a selector element.

21. E::selection: Select the part of the element selected by the user.

Transition, Transform and Animation

These three features are new animation-related features of CSS3.

Transition

Transition adds effects to elements when they transition from one style to another without using Flash animations or JavaScript.

Transition has the following properties:

1. transition-property: specifies the name of the CSS property that applies the transition.

2. transition-duration: Specifies how long it takes to complete the transition effect.

3. transition-delay: Specifies when the transition effect starts. The default is 0.

4. transition-timing-function: Specifies the time curve of the transition effect, the default is "ease", there are also linear, ease-in, ease-out, ease-in-out and cubic -bezier and other transition types.

5. transition: shorthand attribute, used to set four transition attributes in one attribute.

Use all transition attributes in an example as follows:

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;
}

Use transition attribute abbreviation as follows:

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 is used to apply various 2D and 3D transformations to elements. This property allows us to rotate, scale, move or tilt the element Wait for operations. The usage is as follows:

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 can have various transformation types, that is, attribute values:

1. none: The definition is not converted.

2. matrix(n,n,n,n,n,n): Defines a 2D transformation using a matrix of six values.

3. matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n): Define 3D transformation , using a 4x4 matrix of 16 values.

4. translate(x,y): Define 2D displacement transformation.

5. translate3d(x,y,z): Define 3D displacement transformation.

6. translateX(x): Define the displacement transformation, just using the value of the X axis.

7. translateY(y): Define the displacement transformation, just using the value of the Y axis.

8. translateZ(z): Define 3D displacement transformation, just using the value of the Z axis.

9. scale(x,y): Define 2D scaling transformation.

10. scale3d(x,y,z): Define 3D scaling transformation.

11. scaleX(x): Define the scaling transformation by setting the value of the X axis.

12. scaleY(y): Define the scaling transformation by setting the value of the Y axis.

13. scaleZ(z): Define the 3D scaling transformation by setting the value of the Z axis.

14. rotate(angle): Define 2D rotation and specify the angle in the parameters.

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属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。

The above is the detailed content of Summarize the new features of CSS3 (essential for interviews). For more information, please follow other related articles on the PHP Chinese website!