Make fillet: "CSS3 Border-radius"

Today, let's take a look at the specific use of the attribute Border-radius for making fillets in CSS3. Now CSS3 in the Border-radius appeared, let us not so much trouble, the first to make a picture of the time is saved, and there are several advantages: one to reduce the maintenance of the site's workload, less on the image of the update production, replacement of code and so on; second, improve the performance of the site, Without the HTTP request to the image, the loading speed of the webpage will be faster, and its three increases the visual aesthetics. Since Border-radius has so many benefits, we'll look at how it's applied in terms of his syntax, attributes, and property values:

First, the syntax:

<<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:

<length> <length>   <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)

Shorthand

2, WebKit (Safari, Chrome and other browsers)

-webkit-border-radius://Shorthand

3. Opera browser:

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:

<<length>{1,4}]?  <<<<length>{1,4}]?      

It is also important to note that Border-radius must be placed behind-moz-border-radius and-webkit-border-radius