How to write CSS rounded corners! What are the several ways CSS implements rounded corners?

Method 1

In Firefox and Safari 3, you can see the rounded corners effect.

Method 2: CSS2 first make a background image with four rounded corners, and then define a class with four corners, such as:tl .tr .bl .br。The four corners use absolute positioning, positioned at the top left, top right, bottom left, and bottom right positions of the layer.

It's still css3 Okay, one command, that's it!

If you have a computer, I'll write it to you, I can't write it to you on a mobile phone! Three divs are needed! Take advantage of the feeling of misalignment to create rounded corners.

There are four ways to achieve rounded corners.

Clause. 3. Directly make the whole rounded rectangular background.

Clause. 4. Define 12 background colors: 4 in the upper left corner, 4 in the upper right corner, 4 in the lower right corner, and 4 in the lower left corner.

Hello: There are three ways to implement CSS fillet corners.

Clause. 1. Write css**:border-radius, for example: border-radius:10px;

Clause. 2. Four fillet maps; Make a ** with four rounded corners, and then define the first with CSS.

3. Directly make the whole rectangular background.

All in all, the first way is the easiest, with only one line **.

The specific steps are as follows:

1. First of all, open the Sublime Text software, create a new HTML file, and enter the basic HTML structure

2. Then set a div, and set the class attribute of the div, set the style in the style above, set the background color, height and width, and set the border border and the rounded corner attribute of the border, and save it when you are done:

3. Finally, you can see the effect when you open the browser:

You also have this at present, only can be realized.,At present, the mainstream is still Yes, many browsers do not support it, so the landlord can learn, but in practical application or can not be used compatibility problems, you know,The specific above figure。

Rounded corners can be achieved using the border-radius property of CSS3;

For example, a div is 300 wide and 200 high, with a red background and a circle angle of 10px

The specific steps are as follows:

1. First of all, open the Sublime Text software, create a new HTML file, and enter the basic HTML structure

2. Then set a div, and set the class attribute of the div, set the style in the style above, set the background color, height and width, and set the border border and the rounded corner attribute of the border, and save it when you are done:

3. Finally, you can see the effect when you open the browser:

Effect Style:

border-radius:5px 15px 20px 25px;

Up, right, bottom, and left are supported.

Due to CSS3 compatibility.

moz (e.g. -moz-border-radius) is used for Firefox

webkit (e.g. -webkit-border-radius) is used for safari and chrome.

Instance rounded border:

#round

You can use border-radius to set, but at present, many browsers do not support it, IE9 and below are not good, if you must use rounded corners, you can use js to achieve it, there are many on the Internet, or make rounded corners into a ** form in the spelling together.

border-radius: (upper-left value) (upper-right value) (lower-left value) (lower-right value);

Resources.

Use CSS** to set the rounded corner style of the button, which can only be achieved in CSS3, and this effect is achieved by using border-radius, but there are browser compatibility problems, -moz (e.g. -moz-border-radius) is used in Firefox; webkit (e.g. -webkit-border-radius) is used for safari and chrome. border-radius:5px 15px 20px 25px;It means 5px on the top, 15px on the right, 20px on the bottom, and 25px on the left

#round

vue practice - CSS style position display float attribute comparison use.

Add border-radius to the style: 5px; background:#eb2744;Pay attention to the width and height of the limited button!

As my style says.

hotline24

Submit

This one is the thirsty CSS button.

1.Use the border-radius attribute to draw half-rounded corners.

This property is now supported in almost all browsers. See the figure below for details

2.Border-radius is flexible enough to achieve more than just half-rounded corners. It can also achieve semi-circular, round, etc.

Example: The above output is:

CSS3, you can use border-radius to do this. But CSS3 is now only supported by non-IE. With CSS2, it is recommended that you don't try to achieve rounded corners and get into trouble.

It can be simulated with **, but it is not flexible.

Help the landlord find a no-picture CSS to achieve rounded corners**.