The Border-radius of CSS3 property

First, the syntax:

The code is as follows:Border-radius:none | <length>{1,4} [/<length>{1,4}]?

Second, value:

<LENGTH>: The length value consisting of floating-point numbers and unit identifiers. cannot be negative.

Third, the description:

Border-radius is an abbreviated method. If the value before and after "/" is present, then the value in front of "/" is set to its horizontal radius, and the "/" after face value sets its vertical radius. If there is no "/", the horizontal and vertical radii are equal. In addition, the four values are set according to the order of Top-left, Top-right, Bottom-right, Bottom-left, which will appear mainly in the following situations:

1, Border-radius: [<length>{1,4}]; There is only one value, so top-left, Top-right, Bottom-right, bottom-left four values are equal

2, border-radius:[<length>{1,4}] [<length>{1,4}]; Here two values are set, then Top-left equals Bottom-right and takes the first value; Top-right equals Bottom-left and takes the second value

3, border-radius:[<length>{1,4}] [<length>{1,4}] [<length>{1,4}];//If there are three values, where the first value is set Top-left, and the second Values are top-right and bottom-left and they will be equal, and the third value is set Bottom-right

4, border-radius:[<length>{1,4}] [<length>{1,4}] [<length>{1,4}] [<length>{1,4}];//if there is The four values, where the first value is set Top-left, and the second value is Top-right, the third value bottom-right, and the fourth value is the setting Bottom-left

In front, we mainly look at the abbreviation format of Border-radius, in fact, Border-radius and border properties, but also can separate the various angles separately, that is, the following four kinds of writing, here I rule, they are the first Y axis in the x-axis, specifically see below:

Border-top-left-radius: <length> <length>//upper left corner
Border-top-right-radius: <length> <length>//upper right corner
Border-bottom-right-radius: <length> <length>//Lower right corner
Border-bottom-left-radius: <length> <length>//lower left corner

Here, the corners are split to take the value way:<length> <length> The first value is the fillet horizontal radius, the second value is the vertical radius, if the second value is omitted, then it is equal to the first value, then this angle is a one-fourth fillet, If either value is 0, then the corner is not rounded.

Border-radius is available only in the following versions of browsers: firefox4.0+, safari5.0+, Google Chrome 10.0+, Opera 10.5+, ie9+ support Border-radius standard syntax format, For older browsers, Border-radius needs to add different prefixes based on different browser kernels than the Mozilla kernel needs to be "-moz", and the WebKit kernel needs to be "-webkit" and so on, so I can be compatible with the older browsers of each major kernel, Let's look at the writing format of Border-radius under different kernel browsers:

1, Mozilla (Firefox, Flock and other browsers)

-moz-border-radius-topleft://upper left corner
-moz-border-radius-topright://upper right corner
-moz-border-radius-bottomright://Lower right corner
-moz-border-radius-bottomleft://Lower left corner

Equivalent to:
-moz-border-radius://Shorthand

2, WebKit (Safari, Chrome and other browsers)

-webkit-border-top-left-radius://upper left corner
-webkit-border-top-right-radius://upper right corner
-webkit-border-bottom-right-radius://Lower right corner
-webkit-border-bottom-left-radius://Lower left corner
Equivalent to:
-webkit-border-radius://Shorthand

3. Opera browser:

Border-top-left-radius://upper left corner
Border-top-right-radius://upper right corner
Border-bottom-right-radius://Lower right corner
Border-bottom-left-radius://Lower left corner

Equivalent to:

Border-radius://Shorthand

4, Trident (IE)

Ie<9 does not support BORDER-RADIUS;IE9 under the private format, are used Border-radius, its writing and opera is the same, here is not repeating.

In order to support the Border-radius property for various kernel browsers, whether it be the new version or the old one, we need to change our Border-radius format to the following application:

-moz-border-radius:none | <length>{1,4} [/<length>{1,4}]?
-webkit-border-radius:none | <length>{1,4} [/<length>{1,4}]?
Border-radius:none | <length>{1,4} [/<length>{1,4}]?

Its split format needs to add-moz and-webkit, the above code is actually equivalent to the following code:

-moz-border-radius-topleft: <length> <length>//upper left corner
-moz-border-radius-topright: <length> <length>//upper right corner
-moz-border-radius-bottomright: <length> <length>//lower right corner
-moz-border-radius-bottomleft: <length> <length>//lower left corner
-webkit-border-top-left-radius: <length> <length>//upper left corner
-webkit-border-top-right-radius: <length> <length>//upper right corner
-webkit-border-bottom-right-radius: <length> <length>//lower right corner
-webkit-border-bottom-left-radius: <length> <length>//lower left corner
Border-top-left-radius: <length> <length>//upper left corner
Border-top-right-radius: <length> <length>//upper right corner
Border-bottom-right-radius: <length> <length>//lower right corner
Border-bottom-left-radius: <length> <length>//lower left corner

In addition, it is important to note that Border-radius must be placed behind-moz-border-radius and-webkit-border-radius, (specifically: the examples described in this article are written in the standard syntax format, If your version is not a few of the above mentioned versions, if you want to display the effect, please update the browser version, or in front of the Border-radius with the appropriate kernel prefix, in the actual application is best to add a variety of version kernel browser prefix. ）

Let's take a preliminary look at an example:

HTML code:

<div class= "Demo" ></div>

To better see the effect, let's add a little style to the demo:

. demo {
width:150px;
height:80px;
border:2px solid #f36;
Background: #ccc;
}

. demo {
border-radius:10px 15px 20px 30px/20px 30px 10px 15px;
}

We mentioned earlier that the "/" refers to the horizontal radius of the fillet, while the "/" refers to the vertical radius of the fillet, both of which follow the order principle of TRBL. In order to make it clearer, let's replace the above code with the following:

. demo {
border-top-left-radius:10px 20px;
border-top-right-radius:15px 30px;
border-bottom-right-radius:20px 10px;
border-bottom-left-radius:30px 15px;
}

The Border-radius of CSS3 property