Shulou(Shulou.com)06/01 Report--

Most people do not understand the knowledge points of this article "which six categories of new features of css3", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "which six categories of new features of css3" article.

The new features of CSS3 fall into the following six categories

1.CSS3 selector

2.CSS3 frame and fillet

3.CSS3 background and gradient

4.CSS3 transition

5.CSS3 transform

6.CSS3 animation

Let's talk about the contents of the above six categories.

CSS3 selector

1. Basic selector

The basic selector is divided into

Subselector

Neighboring sibling selector

Universal brother selector

Group selector

two。 Attribute selector

1.element [attribute]

Set the style for elements with attribute attributes

2. Element [attribute = 'value']

Style elements of the attribute='value' attribute

3.element [attribute~='value']

Select the element whose attribute attribute value contains the word value and set the style

4. Element [attribute * = 'value']

Select the element whose attribute attribute value contains value to set the style

5. Element [attribute ^ = 'value']

Select an element whose attribute attribute value begins with value

6. Element [attribute $= 'value']

Select an element whose attribute attribute value ends in value

Pay attention to the difference between 3 and 4

3. Pseudo class selector

Dynamic pseudo class

Definition: these pseudo-classes do not exist in HTML and can only be reflected when users interact with the site.

1. Anchor pseudo class

: link

: visited

two。 Pseudo-class of user behavior

: hover

: active

: focus

3. Target pseudo class

: target

When we click the anchor link, the element corresponding to id is displayed in the viewport

4.checked status pseudo-class

Here we need to know that checkbox can only set width and height, not background and border. If we want to set it, we need to use appearance:none; to clear the default style of input.

CSS3 structure class: nth selector

: first-child/last-child

Syntax element:first-child

Select each element element that belongs to the first / last child element of the parent element, and note that element is the child element.

: nth-child (n)

Select the nth element element under an element (n is a simple expression and cannot be replaced by other letters). You can also pass the keywords odd and even in parentheses.

: nth-last-child (n)

Matches the nth element child element under an element, counting from the last child element

: nth-of-type (n)

Syntax element:nth-of-type (n)

Matches the nth child element of a specific type of parent element, and element is a child element of the specified type

: nth-last-of-type

Matches the nth child element of a specific type of parent element, counting from the last

: first-of-type/:last-of-type

Matches each element of the first / last child element of a specific type of its parent element

: only-child

Match each element that belongs to the only child of the parent element

: only-of-type

Matches each element that belongs to a unique child element of a specific type of its parent element

: empty

Match each element that has no child elements (including text nodes)

Negative selector: not

Definition: matches each element that is not an element or selector

Syntax: parent element: not (child element or selector)

Example: ul:not (span) {}

Pseudo elements (you can also use:)

Element::first-line

Definition: sets the first line of text of an element and can only be used for block-level elements

Element::first-letter

Definition: used to set a special style to the first letter of text and can only be used for block-level elements

Element::before

Definition: inserts new content before the content of an element, often used with content

Element::after

Definition: inserts new content after the content of an element, often used with content

Element::selection

Definition: used to set the background color and foreground color after selecting Chinese text in the browser

Picture description

The difference between pseudo elements and elements:

Cannot get its DOM through JS

Cannot be viewed directly through browser developer tools

Pseudo element defaults to inline

Considerations for using pseudo elements:

1. Content must be set to use pseudo element before,after

two。 Use the pseudo element before,after to display the background image, be sure to set it as a block element using display

3. Using pseudo-element before,after to set to display:inline-block, you need to set vertical-align:middle again

CSS3 frame and fillet

1.CSS3 fillet border-radius

Definition: you can add fillet borders to elements (block elements, inline block elements, inline elements)

Attributes:

Upper left corner of border-top-left-radius

Upper right corner of border-top-right-radius

Lower right corner of border-bottom-right-radius

Lower left corner of border-bottom-left-radius

Compound attribute: border-radius:

Attribute value

Four values: upper left corner, upper right corner, lower right corner, lower left corner

Three values: upper left corner, upper right corner and lower left corner

Two values: upper left and lower right

One value: all four corners are in effect

The attribute values in border-radius consist of two parameter values: value1 / value2, separated by /, value1 represents the horizontal radius of the fillet, and value2 represents the vertical radius of the fillet.

Picture description

Circles and ellipses:

Once the percentage is used, it refers to the height and width of the element itself.

When taking 50%, width equals height, circular width does not mean height is oval.

two。 Box Shadow box-shadow

Definition: a box that can control one or more drop-down shadows

Syntax: box-shadow: offset in horizontal direction, offset in vertical direction, degree of blurring, degree of extension, whether color has inner shadow

Introduction to property values:

Offset:

Look for water by using the upper left corner of the element (0pc0) as the reference point

Offset in horizontal and vertical direction

Horizontal: positive-right, negative-left

Vertical: positive value-lower, negative value-upper

Degree of blur:

The boundary is blurred, but the boundary line is not moved

How many pixels are blurred outward from the boundary line

Degree of expansion:

How many pixels does the box shadow expand up and down, left and right?

Whether there is an inner shadow:

Inset (no by default, that is, outer shadow by default)

With inset, the shadow of the box is the inner shadow.

The degree of expansion can be negative, but the degree of blur cannot

CSS3 background and gradient

1.CSS3 background

Background-image

Syntax:

Backgroundimage:url ('1.jpg), url (' 2.jpg')

Separate the pictures with commas

Note: multiple background pictures are introduced into the element, and the previous picture will cover the following picture.

Background-cilp

Definition: specify the drawing area of the background (crop)

Syntax:

Background-cilp:border-box / padding-box / content-box

Property description:

Border-box: the background is cropped to the border box (the background picture is drawn from the border)-default

Padding-box: the background is cropped to the inner margin box (the background picture is drawn from the inside margin)

Content-box: the background is clipped to the content box

Background-origin

Definition: sets the original starting position of the background image

Syntax:

Background-origin:border-box / padding-box / content-box (the coordinate origin of the background image is related to these three)

An introduction to the attributes:

Border-box: positioning relative to the border

Padding-box: positioning relative to the inside margin

Content-box: positioning relative to the content box

There's another one you need to know.

Background-position: defines the position of the background image, the offset above the horizontal and vertical directions (reference point)

Background-repeat

Definition: sets whether and how to repeat the background image, which is repeated horizontally and vertically by default.

Attribute value:

Repeat defaults. The background image is repeated vertically and horizontally.

The repeat-x background image repeats horizontally.

The repeat-y background image is repeated vertically.

The no-repeat background image will be displayed only once.

Inherit specifies that the background-repeat attribute setting should be inherited from the parent element

Background-size

Definition: specify the size of the background image

Syntax:

Background-size:number /% / cover / contain

Property description:

Number: width and height (if only one value is written, the second value defaults to auto)

Percentage: any value between 0% and 100%, where the percentage refers to the size of the element div

Cover: scale the background image proportionally to fill the entire container (the farthest side). If the height reaches a certain proportion of 100%, the width will overflow. However, the specific part of the overflow depends on the location.

Contain: scale the background image to one side close to the edge of the container (the nearest edge). If the height of the image is relatively small, a blank area will appear.

Compound attribute background

Definition: all background properties can be set in one declaration

Syntax:

Background:color position size repeat origin clip attachment image; background: # abc center 50% no-repeat content-box content-box fixed url ('1.jpg'), url (' 2.jpg')..

2.CSS3 gradient

Definition: a transition that can display translation between two or more specified colors

Linear gradient

Definition: change the color along an axis and change sequentially from the beginning to the end (pull from one side to the other)

Syntax: background:linear-gradient (direction, start color, end color)

Direction introduction:

1. Direction from top to bottom (default)

Background: linear-gradient (red,blue)

two。 Direction from left to right

Background: linear-gradient (to right,red,blue)

3. Diagonal

Background: linear-gradient (to right bottom,red,blue)

4. Angle (in deg)

Background: linear-gradient (angle, red,blue)

Angle description: 0deg will create a gradient from bottom to top, and 90deg will create a gradient from left to right

Color nodes: each color is evenly distributed by default

Background: linear-gradient (red 10% dazzle blue 20% dint green 30% mai yellow 40%)

From 0% to 10%, from red to blue, from 20% to 30%, from blue to green, from 30% to 40%, from green to yellow, from 40% to 100%.

Background: linear-gradient (red 10% jade blue)

From 0% to 10%, red, from 10% to 100% red to blue

Finally, if you do not write a specific value, the default is 100%.

Background: linear-gradient (red,blue 30%)

From 0% to 30%, a gradient from red to blue

If the first one is not written, the default value is 0%

Background:lineargradient (rgba (255j0re0), rgba (255p0re0ref 1))

Change from transparent to opaque

Repeat gradient

Example: background: repeating-linear-gradient (90degdegred 0% Magazine 20%); or background: repeating-linear-gradient (90degdegred 0% Maxim blue 10% Magazine 20%)

Note: think of the overall width of the element as 100%

Radial gradient

Definition: from the beginning to the end, the color changes in a circular gradient from the inside out.

Syntax: background:radial-gradient (shape size, start color, end color)

Shape classification:

Circle-Circle

Ellipse-Oval

Note: when the height and width of the element are the same, the parameter is circular no matter which one is set.

Size:

Closest-side nearest edge

Background: radial-gradient (closest-side circle,red, blue)

The farthest side of farthest-side

Background: radial-gradient (farthest-side circle,red, blue)

Closest-corner nearest angle

Background: radial-gradient (closest-corner circle,red, blue)

The farthest angle of farthest-corner

Background: radial-gradient (farthest-corner circle,red, blue)

Color node:

Example:

Background:radial-gradient (circle,red 50%, blue 70%)

Note: the percentage at this time refers to the distance from the center of the circle to the farthest end of the element (angle)

Repeat the gradient:

Example: background: repeating-radial-gradient (red 0% dint blue 20%)

Background: repeating-radial-gradient (red 0% dazzle blue 10% dint red 20%)

CSS3 transition

Definition: allows css attribute values to transition smoothly over a certain period of time, triggered by mouse clicks, mouse slides, or any changes to elements, and gracefully changes css attribute values in animated form.

Attributes:

1.transition-property attribute

Definition: set the properties in the object that participate in the transition

Syntax: transition-property:none | all | property

Parameter description:

None: no attribute changes

All: default value, all attributes are changed

Property: the attribute name of the element, width,color, etc.

2.transition-duration attribute

Definition: sets the duration of an object transition

Syntax: transition-duration:time

Parameter description:

Specifies how long it will take to complete the transition effect, in seconds or milliseconds, with a default value of 0

3.transition-timing-function attribute

Definition: sets the type of animation for transitions in an object

Syntax: only one attribute value can be used

Parameter description:

Ease: smooth transition (0 color-slow-fast-slow), default value

Cubic-bezier (0.25pr 0.1pr 0.25pr 1)

Linear: linear transition (uniform speed) cubic-bezier (0memo 0min1jue 1)

Ease-in: slow-fast cubic-bezier (0.42, zero, one, one)

Ease-out: fast-slow cubic-bezier (0pm 0pm 0.58 cubic-bezier 1)

Ease-in-out: slow-fast-slow

Cubic-bezier (0.42, 0.58, 0.58, 1)

Bezier curves: http://cubic-bezier.com/#.17,...

4.transition-delay attribute

Definition: sets the transition time for object delay

Syntax: transition-delay:time

Parameter description:

Specify the number of seconds or milliseconds to delay the start of the animation. The default is 0.

5.transition compound attribute

Syntax:

Transition: property duration timing-function delay

Parameter description: the order of transition time and delay time should not be disordered.

CSS3 transform

Definition: deforms an element in a coordinate system. This attribute contains a series of deformation functions that can move, rotate, and scale elements.

Syntax: transform:none | default is none

2D transformation

1.rotate () rotation

Definition: specify a 2D rotation for the element by specifying an angle parameter

Syntax: transform:rotate (angle) unit deg

Parameter description: angle refers to rotation angle, positive number indicates clockwise rotation, negative number indicates counterclockwise rotation

2.translate () translation

Definition: moves the current element position according to the position of the X and Y axes

Classification:

TranslateX () moves horizontally only

Syntax: transform:translateX () unit px

TranslateY () moves vertically only

Syntax: transform:translateY () unit px

Translate (XBI y) moves horizontally and vertically at the same time

Syntax: transform:translate (X, Y) unit px

Note: if you write only one parameter, the second default is 0, that is, only the horizontal displacement is set.

3.scale () Zoom

Definition: sets the zoom degree of an element

Classification:

ScaleX () scale horizontally only

Syntax: transform:scaleX () has no units

ScaleY () scale vertically only

Subtopic syntax: transform:scaleY () has no units

Scale makes elements scale horizontally and vertically at the same time

Syntax: transform:scale (XQuery y) has no units

4.skew () Twist / Tilt

Definition: sets the tilt state of an element

Classification:

SkewX () only makes the element twist the positive value of the deformation unit deg in the horizontal direction-counterclockwise

SkewY () only causes the element to twist vertically the positive value of the deformation unit deg-clockwise

Skew () causes the element to twist the deformation unit deg horizontally and vertically

Note: 0deg has the same effect as 180deg

5. Transform base point

Definition: base point of element transformation

Syntax: transform-origin: horizontal and vertical

Parameter description:

Upper left corner of left top-all four corners are fine

25% top

50px 50px

Default value:

Rotate geometric center point

Skew geometric center point

Scale geometric center point

The location of translate itself

3D transformation

1. Enable 3D space transform-style: preserve-3d; is generally enabled for parent elements

two。 Child elements set 3D transformation effect

Rotate

RotateX ()

Definition: refers to the rotation angle of the object on the X axis (transform base point: 50% 0)

RotateY ()

Definition: refers to the rotation angle of the object on the Y axis (transform base point: 50% 0)

RotateZ ()

Definition: refers to the rotation angle of the object on the Z axis (transform base point: 50% 0)

Translate

TranslateZ ()

Definition: refers to the translation of the object above the Z axis (transform base point: 50% 0)

Scale

ScaleZ ()

Definition: specify the Z-axis scaling of the object (transform base point: 50% 50%) (it doesn't make much sense, open 3D space)

3. Set depth of field: to achieve near size, far away from small

All child elements of the parent element can be set

Parent element: perspective: 300px

Child elements:

Transform:perspective (300px) translateZ (- 200px)

Note: depth of field: optional values: greater than or equal to 0, the greater the depth of field, the larger the element looks

Default value: 0-No depth of field (cannot be negative)

4. Transform base point

Default value: 50% 0

Transform-origin: represented by the top; keyword (50000)

Note: stereoscopic 3D box Z: can only use specific length, not percentage and keywords.

5. Depth of field central point: change the observer's point of view

Perspective-origin: top

Perspective-origin: top right

6. Is the back of the element visible or invisible

Backface-visibility:visible; (default: visible)

Backface-visibility: hidden; is not visible

CSS3 animation

Definition: the effect of gradually changing an element from one style to another

@ keyframes

Definition: keyframes Keyframe, which is used to determine the key position of animation changes

Note: keyframes controls key locations, not all locations

Syntax: @ keyframes animationname {

Keyframes-selector {

CssStyles

Animationname: required, defining the name of the animation

Keyframes-selector: required, the percentage of animation duration is between 0% and 100%, or can be set using the form and to keywords. Form stands for 0% Personal100%.

Example:

@ keyframes abc {

From {transform: rotate (0)}

50% {transform:rotate (90deg)}

To {transform: rotate (360deg)}

Animation attribute

1.animation-name attribute

Sets the name of the animation applied to the object

Syntax:

Animation-name:keyframename | none

Parameter description:

Keyframename: specifies the animation name of the Keyframe to bind to the selector

2.animation-duration attribute

Definition: the duration of animating an object

Syntax: animation-duration:time

Parameter description: specify the time it takes for the object to complete playback. The default value is 0.

3.animation-timing-function attribute

Define: animate the transition type of an object

Parameter description: same as the parameter of the transition-timing-function attribute

4.animation-delay attribute

Definition: delay time for animating

Syntax: animation-delay:time

Parameter description: optional value that defines the time to wait before the animation starts. It is counted in seconds or milliseconds. The default value is 0.

5.animation-iteration-count attribute

Definition: set the number of cycles to animate an object

Syntax: animation-iteration-count: infinite | number

Parameter description:

Number is a number, and its default value is 1

Infinite: unlimited number of cycles

6.animation-direction attribute

Define whether to animate an object in reverse motion

Syntax:

Animation-direction:normal, reverse, alternate, alternate-reverse

Parameter description:

Normal: normal direction

Reverse: inverse kinematics

Alternate: first normal motion in reverse motion, and continuous alternating operation, which needs to be used with cycle attribute.

Alternate-reverse: first reverse motion in normal motion, and continuous alternating operation, need to be used in conjunction with the loop attribute

7.animation-play-state attribute

Definition: specifies whether the object is running or paused

Syntax: animation-play-state:paused | running

Parameter description:

Paused: specify to pause animation

Running: default value, making the animation that is running

Example: mouse over box to pause animation

# box:hover {

Animation-play-state: paused

8.animation-fill-mode

Set the state after the end of the animation

None: default value. Do not set the state other than animated objects, and DOM has no pre-animated state.

Forwards: sets the state of the object to the state at the end of the animation, 100% or to, and displays as the first frame of keyframes when the animation ends when animation-direcdtion is set to reverse

Backwards: sets the state of the object to the state at the beginning of the animation, (the test shows that the DOM is not animated)

Both: sets the state of the object to the end or start of the animation, and the state takes precedence at the end

9.animation compound attribute (deprecated)

Syntax:

Animation: name duration timing-function delay interation-count direction play-state

Note: in css3, when setting fillet, shadow, transformation and other attributes for an element, although the shape position changes, the size and position of the element itself remain the same.

The above is about the content of this article on "which six categories are the new features of css3"? I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.