CSS3 border-radius border fillet, css3border-radius

CSS3 border-radius border fillet, css3border-radius

In CSS3, you can set the border rounded corner ~ Set the four corners.

Directory

1. Introduction

2. Format and type of value

3. border-radius 1 ~ Four parameter descriptions

4. Online example

 

1. Introduction to 1.1 rounded corner attributes

CSS3 provides five attributes for rounded corners:

Border-radius: Set the rounded corner of the four borders at the same time.

Border-top-left-radius: Set the border rounded corner style in the upper left corner.

Border-top-right-radius: Set the border rounded corner style in the upper right corner.

Border-bottom-left-radius: Set the border rounded corner style in the lower left corner.

Border-bottom-right-radius: Set the border rounded corner style in the lower right corner.

Example:

 

1.2 browser support

Minimum Version supported: IE 9, Chrome 4

 

1.3 references

Specifications: Https://www.w3.org/TR/css3-background/#the-border-radius

Document: Https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-radius

 

2. Format and type of value

Border-*-radius attribute values can be set separatelyHorizontal radiusAndVertical radiusIf the vertical radius is omitted, the vertical radius uses the horizontal radius by default.

The supported units for each value are:Fixed LengthAndPercentage. If the percentage format is set, the percentage of the horizontal radius is the width of the border, and the percentage of the vertical radius is the height of the border.

The combination is as follows (taking border-radius as an example ):

1) border-radius: 20px; // indicates the rounded cornerHorizontal radiusAndVertical radiusThe length is 20px.

2) border-radius: 20px/40px; // indicates the rounded cornerHorizontal radiusThe length is 20px,Vertical radiusThe length is 20px.

3) border-radius: 20%; // indicates the rounded cornerHorizontal radiusAndVertical radiusThe value is 20% of the border length.

4) border-radius: 20%/30%; // indicates the rounded cornerHorizontal radius20% of the Border width,Vertical radius20% of the border height.

5) border-radius: 20px/30%; // indicates the rounded cornerHorizontal radiusLength: 20px,Vertical radius20% of the border height.

Example:

 

3. border-radius 1 ~ Four parameter descriptions

Border-radius can set the same value for the four corners at a time, or set the rounded corner style for the four corners respectively.

The secret is to set the number of border-radius parameters.

First, let's take a look at the description of the parameters of the CSS specification for border-radius:[<Length> | <percentage>] {} [/[<length> | <percentage>] {}]?

We can know that the number of border-radius parameters ranges from 1 ~ Four. Note that when using the horizontal radius and vertical radius respectively: Set the horizontal radius of the four corners in border-radius and the vertical radius of the four corners.

Parameters 1 ~ Meanings of the four parameters:

3.1 Number of parameters: 1

Description: This setting is used for the rounded corner of the four borders.

Example: Border-radius: 20px; // The four border rounded corners are all 20px

 

3.2 Number of parameters: 2

Description:

Parameter ①: Specifies the rounded corner of the border in the upper left corner and lower right corner.

Parameter ②: Specifies the rounded corner of the border in the upper-right corner and lower-left corner.

Example: Border-radius: 20px 40px; // upper left corner and lower right corner: 20px; upper right corner and lower left corner: 40px

 

3.3 Number of parameters: 3

Description:

Parameter ①: Specifies the rounded corner of the border in the upper left corner.

Parameter ②: Specifies the rounded corner of the border in the upper-right corner and lower-left corner.

③ Parameter: Specifies the rounded corner of the border in the lower right corner.

Example: Border-radius: 20px 40px 60px; // upper left: 20px; upper right and lower left: 40px; lower right: 60px

 

3.4 Number of parameters: 4

Description:

Parameter ①: Specifies the rounded corner of the border in the upper left corner.

Parameter ②: Specifies the rounded corner of the border in the upper-right corner.

③ Parameter: Specifies the rounded corner of the border in the lower right corner.

Parameter ④: Specifies the rounded corner of the border in the lower left corner.

Example: Border-radius: 20px 40px 60px 80px; // upper left: 20px; upper right: 40px; lower right: 60px; lower left: 80px

 

4. Online example 4.1

 

 

4.2 online address

Address: http://www.akmsg.com/WebDemo/CSS3-border-radius.html

 

====================================== Series of articles ==============================================

This article: 8.1 CSS3 border-radius border rounded corner

Web development path Series