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

This article mainly introduces how to achieve the fillet effect of CSS3, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor with you to understand.

CSS3 fillet

Using the CSS3 border-radius attribute, you can fillet any element.

CSS3 fillet maker

Browser support

The number in the table represents the version number of the first browser that supports the property.

The number before-webkit- or-moz- indicates that the first version of the prefix is supported.

Attribute border-radius9.05.04.0-webkit-4.03.0-moz-5.03.1-webkit-10.5

CSS3 border-radius attribute

Using the CSS3 border-radius attribute, you can fillet any element.

Here are three examples:

1. Specify the element fillet of the background color:

Round corners!

two。 Specify the element fillet of the border:

Round corners!

3. Specify the element fillet of the background picture:

Round corners!

The code is as follows:

Example

# rcorners1 {

Border-radius: 25px

Background: # 8AC007

Padding: 20px

Width: 200px

Height: 150px

}

# rcorners2 {

Border-radius: 25px

Border: 2px solid # 8AC007

Padding: 20px

Width: 200px

Height: 150px

}

# rcorners3 {

Border-radius: 25px

Background: url (paper.gif)

Background-position: left top

Background-repeat: repeat

Padding: 20px

Width: 200px

Height: 150px

}

CSS3 border-radius-specify each fillet

If you specify only one value in the border-radius property, four rounded corners will be generated.

However, if you want to specify each of the four corners, you can use the following rules:

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, and the third value is the lower right corner

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

One value: four fillets have the same value

Here are three examples:

1. Four values-border-radius: 15px 50px 30px 5px:

two。 Three values-border-radius: 15px 50px 30px:

3. Two values-border-radius: 15px 50px:

The following is the source code:

Example

# rcorners4 {

Border-radius: 15px 50px 30px 5px

Background: # 8AC007

Padding: 20px

Width: 200px

Height: 150px

}

# rcorners5 {

Border-radius: 15px 50px 30px

Background: # 8AC007

Padding: 20px

Width: 200px

Height: 150px

}

# rcorners6 {

Border-radius: 15px 50px

Background: # 8AC007

Padding: 20px

Width: 200px

Height: 150px

}

You can also create elliptical corners:

Example

# rcorners7 {

Border-radius: 50px/15px

Background: # 8AC007

Padding: 20px

Width: 200px

Height: 150px

}

# rcorners8 {

Border-radius: 15px/50px

Background: # 8AC007

Padding: 20px

Width: 200px

Height: 150px

}

# rcorners9 {

Border-radius: 50%

Background: # 8AC007

Padding: 20px

Width: 200px

Height: 150px

}

CSS3 fillet attribute

Attribute description border-radius all four corners border-*-*-radius abbreviations border-top-left-radius defines the radians of the upper left corner border-top-right-radius defines the radians of the upper right corner border-bottom-right-radius defines the radians of the lower right corner border-bottom-left-radius defines the radians of the lower left corner thank you for reading this article carefully I hope the article "how to achieve the fillet effect of CSS3" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.