Summarize the new features of CSS3 (Interview Essentials)

CSS is a continuous development of the "language" in our daily interview front-end work is an essential point of knowledge, the following this article mainly to share about the front-end interview necessary CSS3 new characteristics of the relevant information, the text through the sample code introduced in very detailed, the need for friends can reference, Let's take a look below.

Objective

We've already introduced new features about HTML5, and in addition to the new features of HTML5, CSS3 's new features are often asked in interviews. The following words do not say much, the need for friends to follow the small series to see the detailed introduction it.

Selector Selector

A number of new selectors have been added to the CSS3 to address many of the layout problems that need to be solved before using JavaScript.

2. Element1~element2: Select each Element2 element that has the element1 element in front of it.

4. [Attribute^=value]: Select an element the attribute property begins with value.

6. [Attribute$=value]: Select an Element attribute property is terminated with value.

8. [Attribute*=value]: Select an Element attribute property contains the value string.

10. E:first-of-type: Selects each e element of the first E element that belongs to its parent element.

12. E:last-of-type: Selects each e element that belongs to the last e element of its parent element.

14. E:only-of-type: Selects each e element that belongs to the E element that is unique to its parent element.

16. E:only-child: Selects each e element that belongs to the unique child element of its parent element.

18. E:nth-child (n): Selects each e element that belongs to the nth child element of its parent element.

20. E:nth-last-child (n): Selects each e element that belongs to the reciprocal nth child element of its parent element.

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

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

26. E:last-child: Selects each e element that belongs to the last child element of its parent element.

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

30. E:empty: Select each e element that has no child elements (including text nodes).

32. E:target: Select the e element that is currently active.

34. e:enabled: Select each enabled e element.

36. e:disabled: Select each of the disabled e elements.

38. e:checked: Select each e element that is selected.

40. E:not (selector): Selects each element of a non-selector element.

42. E::selection: Select the part of the element that is selected by the user.

Transition,transform and animation

These three features are CSS3 new and animated-related features.

Transition

Transition can add effects to an element when an element is transformed from one style to another, instead of using Flash animations or JavaScript.

Transition has the following properties:

1. Transition-property: Specifies the name of the CSS property that the transition is applied to.

2. Transition-duration: Specifies how long it will take to complete the transition effect.

3. Transition-delay: Specifies when the transition effect starts and defaults to 0.

4. Transition-timing-function: A time curve that specifies the transition effect, which defaults to "ease", as well as transition types such as linear, ease-in, Ease-out, Ease-in-out, and Cubic-bezier.

5. Transition: Shorthand property for setting four transition properties in one property.

In one example, use all the transition properties 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 and 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 the Transition property shorthand 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 3D transformations to elements, which allow us to rotate, scale, move, or skew elements. Use the following methods:

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

Transformation type

Transform can have various types of transformations, that is, property values:

2. None: The definition does not convert.

4. Matrix (N,n,n,n,n,n): Defines a 2D conversion, using a six-value matrices.

6. Matrix3D (N,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n): Defines a 3D conversion, using a 4x4 matrix of 16 values.

8. Translate (x, y): Defines a 2D displacement transformation.

10. Translate3d (x, Y, Z): Defines a 3D displacement transformation.

12. TranslateX (x): Defines the displacement transformation, just with the value of the x-axis.

14. Translatey (Y): Defines the displacement transform, just the value of the y-axis.

16. Translatez (z): Defines the 3D displacement transformation, just using the z-axis value.

18. Scale (x, y): Defines a 2D scaling transformation.

20. Scale3d (x, Y, Z): Defines a 3D scaling transformation.

22. ScaleX (x): Defines the zoom transformation by setting the value of the x-axis.

24. ScaleY (Y): Defines the zoom transformation by setting the value of the y-axis.

26. Scalez (z): Defines the 3D scaling transformation by setting the value of the z-axis.

28. Rotate (angle): Defines the 2D rotation and specifies the angle in the parameter.

30. Rotate3d (X,y,z,angle): Defines 3D rotation.

32. Rotatex (angle): Defines the 3D rotation along the x-axis.

34. Rotatey (angle): Defines a 3D rotation along the y-axis.

36. Rotatez (angle): Defines a 3D rotation along the z-axis.

38. Skew (X-angle,y-angle): Defines a 2D tilt transition along the x and Y axes.

40. Skewx (angle): Defines a 2D tilt transition along the x-axis.

42. Skewy (angle): Defines a 2D tilt transition along the y-axis.

44. Perspective (N): Defines a Perspective view for 3D transformation elements.

Browser support

Internet Explorer 10, Firefox, and Opera support transform properties.

Internet Explorer 9 supports an alternative-ms-transform attribute (only for 2D conversions).

Safari and Chrome support alternative-webkit-transform attributes (2D conversion).

Opera only supports 2D conversions.

Animation

Animation lets CSS have the ability to animate. We can save complex JS code by making animations using CSS3 's animation. Here's how it works:

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

For specific usage, refer to Tutorial: CSS3 Animation.

Border

CSS3 has added three border properties, namely Border-radius, Box-shadow, and Border-image. Border-radius can create rounded borders, Box-shadow can add shadows to elements, Border-image can draw borders using pictures. Ie9+ supports Border-radius and Box-shadow properties. All new border properties are supported by Firefox, Chrome, and Safari.

Background

CSS3 has added several properties on the background, namely Background-clip, Background-origin, Background-size, and Background-break.

Background-clip

The Background-clip property is used to determine the background painting area, and there are several possible properties:

1. Background-clip:border-box; The background is displayed starting from border

2. Background-clip:padding-box; The background is displayed starting from padding

3. Background-clip:content-box; Background content area starts to show

4. Background-clip:no-clip; Default property, equivalent to Border-box

In general, the background covers the entire element, and this property allows you to set the background color or the coverage of the image.

Background-origin

The Background-clip property is used to determine the position of the background, which is commonly used in conjunction with background-position and can be border, padding, Content to calculate background-position (just like Background-clip).

1. Background-origin:border-box; Calculate background-position starting from border

2. Background-origin:padding-box; Calculate background-position starting from padding

3. Background-origin:content-box; Start computing background-position from content

Background-size

The Background-size property is commonly used to adjust the size of the background image, mainly for setting the image itself. There are the following possible properties:

1. Background-size:contain; Shrink the image to fit the element (maintain pixel aspect ratio)

2. Background-size:cover; Extend elements to fill elements (maintain pixel aspect ratio)

3. background-size:100px 100px; Shrink the image to the specified size

4. background-size:50% 100%; Shrinks the image to the specified size, and the percentage is relative to the size of the containing element

Background-break

In CSS3, elements can be split into separate boxes (such as spanning multiple lines of inline element spans), and the Background-break property is used to control how the background is displayed in these different boxes.

1. background-break:continuous; The default value. Ignoring the distance between boxes (that is, the element is not broken into multiple boxes, it is still a whole)

2. Background-break:bounding-box; The distance between the boxes is counted;

3. Background-break:each-box; Redraw the background individually for each box.

Text effects

Word-wrap

CSS3, the Word-wrap property allows you to allow text to force text to wrap, meaning that the word is split. All major browsers support the Word-wrap property.

p {    Word-wrap:break-word;}

Text-overflow

It works in conjunction with Word-wrap, Word-wrap Sets or retrieves whether a career change is broken when the current row exceeds the bounds of the specified container, and Text-overflow Sets or retrieves how the current row is displayed if it exceeds the bounds of the specified container. For the "Text-overflow" attribute, there are two options for "clip" and "ellipsis".

Text-shadow

In CSS3, Text-shadow can apply a shadow to text. Ability to specify the horizontal shadow, vertical Shadow, blur distance, and the color of the shadow.

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

Text-decoration

The CSS3 inside begins to support a deeper rendering of the text, with three properties to set:

1. Text-fill-color: Set text interior fill color

2. Text-stroke-color: Set text boundary fill color

3. Text-stroke-width: Set Text boundary width

Gradient

CSS3 has new gradient effects, including linear-gradient (linear gradient) and radial-gradient (radial gradient). Specific usage Reference Tutorial: CSS3 Gradient

@font-face Characteristics

Before CSS3, the web designer must use fonts that have been installed on the user's computer. Css3,web designers can use any font they like. When you find or buy the font you want to use, you can store the font file on the Web server, which is automatically downloaded to the user's computer when needed. The font is defined in the CSS3 @font-face rule. Firefox, Chrome, Safari, and opera support. TTF (True type Fonts) and. OTF (OpenType Fonts) types of fonts. Ie9+ supports the new @font-face rule, but only the. EoT type of font (Embedded OpenType) is supported.

In the new @font-face rule, you must first define the name of the font (such as MyFont), and then point to the font file.

To use fonts for HTML elements, refer to the name of the font (MyFont) through the Font-family property

@font-face {    font-family:myfirstfont;    Src:url (' Sansation_light.ttf '),         url (' Sansation_light.eot ');/* ie9+ */}p{    Font-family:myfirstfont;}

Multi-column Layouts

With CSS3, you can create multiple columns to lay out your text, and IE10 and opera support multi-column properties. Firefox needs a prefix-moz-,chrome and safari requires a prefix of-webkit-. There are three main attributes:

1. Column-count: Specifies the number of columns that the element should be delimited.

2. Column-gap: Specifies the interval between columns.

3. Column-rule: Set the width, style, and color rules between columns

p{    -moz-column-count:3;    /* Firefox *    /-webkit-column-count:3;/* Safari and Chrome */    column-count:3;    -moz-column-gap:40px;       /* Firefox */    -webkit-column-gap:40px;    /* Safari and 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;}

User interface

In CSS3, new user interface features include resetting element dimensions, box sizes, outlines, and more. Firefox, Chrome, and safari support the Resize property. IE, Chrome, Safari, and opera support box-sizing properties. Firefox needs a prefix-moz-.
All major browsers support the Outline-offset property, except IE.

Resize

The Resize property specifies whether the element size can be adjusted by the user. If you want this property to take effect, you need to set the element's overflow property, which can be auto, hidden, or scroll.

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

Box-sizing

The Box-sizing property can be set with values Content-box, Border-box, and inherit.

1. Content-box:padding and border are not included within the defined width and height. The actual width of the object is equal to the width value of the setting and the sum of border, padding, i.e. (Element width = width + border + padding), which behaves as a box model in standard mode.

2. Border-box:padding and border are included within the defined width and height. The actual width of the object is equal to the width value of the setting, even if border and padding are defined, the actual width of the object is not changed, i.e. (Element width = width), which is represented as a box model in the odd mode.

Outline-offset

The Outline-offset property offsets the outline and draws the outline at a position beyond the edge of the border.