9.16 CSS3 Preview

CSS3

1. Rounded Corners

Border-radius: Fillet radius of the bounding rounded corner

Four values: The first value is the upper-left corner, the second value is the upper-right corner, the third value is the lower-right corner, and the fourth value is the lower-left corner.

Three values: The first value is the upper-left corner, the second value is the upper-right corner and the lower-left corner, the third value is the lower-right corner

Two values: The first value is the upper-left corner and the lower-right corner, the second value is the upper-right corner and the lower-left corner

One value: Four fillet values are the same

2. Picture

Border-image: With CSS3 's Border-image attribute, you can create a border with an image: The Border-image property allows you to specify a picture as a border! The original image used to create the border above:

Border-image-source: Used to specify the position of the picture to be used to draw the border;

Border-image-slice: Image boundary inward offset;

Border-image-width: The width of the boundary of the image;

Border-image-outset: Used to specify the amount of Border-image-area drawn outside the bounding rectangle;

Border-image-repeat: This example shows how to create a button for a Border-image property.

3. Shadows

Box-shadow: Border Shadow. For example box-shadow:50px 50px 5px #888888 The first 50px refers to the left and right distance of the shadow distance border, the value can also be negative, positive, and negative to the left. The second 50px refers to the upper and lower distance of the shadow edge distance border, the value can also be negative, positive downward, negative upward. 5PX is the distance from the previous <div>, the farther away, the larger the shadow area, the more blurred. #888888是指阴影的颜色.

4. Background

Background-image add a background image. Different background images and images are separated by commas, and all of the images appear at the top of the list as the first.

BACKGROUND-SIZE Specifies the size of the background image. You can specify a background picture in CSS3, and you can specify the size of the background picture in a different environment. You can specify the pixel or percent size. The specified size is relative to the width and height of the parent element as a percentage of the size.

The Background-origin property specifies the location area of the background image. Background images can be placed in the Content-box, Padding-box, and Border-box areas.

Background-clip Background Clipping property is drawn from the specified position

5. Gradients

A gradient (gradients) allows you to show a smooth transition between two or more specified colors.

Linear gradient: (Linear gradients)-down/up/left/right/diagonal

For example:

Background:-webkit-linear-gradient (red, blue);
Background:-o-linear-gradient (red, blue);
Background:-moz-linear-gradient (red, blue);
Background:linear-gradient (red, blue);

The above code represents a linear gradient starting at the top. The starting point is red and slowly transitions to blue:

If you want to do more control in the direction of the gradient, you can define an angle instead of the predefined direction (to bottom, to top, to right, to left, to bottom right, and so on). The angle is the angle between the horizontal and the gradient lines, which is calculated in the counterclockwise direction. In other words, 0deg will create a gradient from bottom to top, and 90deg will create a gradient from left to right.

CSS3 gradients also support transparency (transparency), which can be used to create effects that weaken the fade.

To add transparency, we use the RGBA () function to define the color nodes. The last parameter in the RGBA () function can be a value from 0 to 1, which defines the transparency of the color: 0 is fully transparent, and 1 is completely opaque.

Radial gradients: (Radial gradients)-defined by their centers

To create a radial gradient, you must also define at least two color nodes. The color node is the color in which you want to render a smooth transition. You can also specify the center of the gradient, the shape (prototype or ellipse), and the size. By default, the centre of the gradient is center (represented by the center point), the shape of the gradient is ellipse (the ellipse is represented), and the gradient is Farthest-corner (indicated to the farthest corner).

Shape: The parameters define the shapes. It can be a value of circle or ellipse. where circle represents a circle and ellipse represents an ellipse. The default value is ellipse.

The size parameter defines the scale of the gradient. It can be the following four values:

Closest-side

Farthest-side

Closest-corner

Farthest-corner

6. Text effects

Text-shadow: Text Shadow. text-shadow:5px 5px 5px #FF0000 and Border shadow effect same

Box-shadow: Box Shadow box-shadow:10px 10px; Grey

9.16 CSS3 Preview