CSS3 fillet and rounded border using method summary

Before the advent of the CSS3, the effect of the fillet can be achieved by the picture or by the margin property, the traditional fillet generation scheme requires multiple images as the background pattern. After the appearance of CSS3, there is no need to waste time to make more than one picture, greatly reducing the workload, improve the performance of the page, improve the speed of loading pages, and increase the visual reliability. Now that CSS3 has so many advantages, we'll summarize the use of CSS3 rounded corners and rounded corners.

You can learn the CSS3 fillet section of the Quick Play CSS3 Tutorial in the introductory chapter course

CSS3 rounded corners and rounded corners use related knowledge

1. introduction of CSS3 Fillet and application skills

adaptive ellipse and rounded corner construction, constructing a circle on a CSS simply set the Border-radius property value to half the length of the edge. Here we comprehensively introduce the properties of Border-radius, Border-radius is a shorthand property, its expansion is Border-top-left-radius, Border-top-right-radius, Border-bottom-right-radius, Border-bottom-left-radius. It also has a little-known feature: Border-radius can specify both horizontal and vertical radii, as long as the two values are separated by a slash (/) (the rounded fillet has equal horizontal and vertical radii and can be combined). In the light of these characteristics, the detailed expansion of border-radius:50% should be border-radius:50% 50% 50% 50%/50% 50% 50% 50%.

2. CSS3 fillet border and border picture effect instance sharing

The main points of study are as follows: rounded corners Border-radius; box Shadow Box-shadow; border picture border-image. The Border-radius property allows you to add rounded borders to elements! The Border-image property is used to set the border of a picture.

3. Share an example code for CSS3 fillet and gradient functions

Linear gradient: background:linear-gradient (Sets the gradient form, first color starting point, middle color point middle color position, end point color); Linear: The type of gradient (linear gradient), the form of a gradient: there are two ways to choose a parameter-1, set the rotation angle, 0 degrees from the left to the right, 90 degrees from the top to the bottom, starting from 0 degrees counter-clockwise transformation.

4. Use of CSS3 rounded border-ground tornado

Border-radius detailed

border-radius:50px; Upper right bottom left, both horizontal and vertical distances are 50px

border-radius:50%; The % number here is the base of the length and width of the CSS style element that has been applied

border-radius:50% 30%; up and down, horizontal vertical is about 50%, horizontal vertical is 30%

border-radius:50% 30% 10%; on, horizontal vertical is 50%, around, horizontal vertical is 30%, bottom, horizontal vertical is 10%

border-radius:10% 50% 30% 10%; , the horizontal vertical is 10%. Right, flat vertical is 50%. , the horizontal vertical is 30%. Left, horizontal vertical is 10% /Front is horizontal,/back is vertical

border-radius:50%/30%; Top left down right, level is 50%, vertical is 30%

border-radius:50%/30% 10%; on the right bottom left, the level is 50%, up and down vertical 30%, vertical 10%;

5. CSS3 fillet, shadow, transparent

There are two ways to implement a fillet CSS3.

The first is the background image, the traditional CSS each element can have only one background image, but CSS3 can allow one element to have more than one background image. This adds 4 1/4-circle background images to an element that can be rounded at 4 corners.

The second method is concise, directly with the CSS implementation, do not need to use the picture.

6. CSS3 Round Corner Frame making method

Firefox and Safari use private attributes to achieve rounded corners; This represents the bottom picture color within the bounding rectangle; border:1px solid #000; Indicates the width of the border, solid, color is black; border-top-left-radius:55px 25px; the border fillet effect in the upper-left corner can be identified by English: Top,left, The length of the modified fillet is achieved by controlling the pixel value, 55px indicates the horizontal length, 25px is the longitudinal length; Similarly, the border-bottom-right-radius:55px 25px, the corner effect of the lower right corner can be modified as long as the top is bottom; Use CSS3 to achieve the border fillet effect.

Related questions

1. CSS3 fillet Border-radius make sharp corners.

2. Browser CSS3 fillet problem

3. CSS3 Round Corner Rectangle problem

"Recommended"

1. PHP Chinese Web free video tutorial: CSS3 Latest Video tutorial

2. PHP Chinese Web Free Tutorial: CSS3 The latest basic tutorials in detail