CSS3 fillet (Border-radius) detailed

In the Web page, often need to realize the fillet, the previous practice is transduction, now well, with the CSS3 Border-radius characteristics, the realization of the border fillet effect is very simple, and there are several advantages: one is to reduce the site maintenance workload, the second is to improve the site's performance, Without the HTTP request for the image, the page loading speed will be faster, and the third is to increase the visual aesthetics .

Border-radius is an abbreviated method. 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, there is only one value, then Top-left, Top-right, Bottom-right, bottom-left four values are equal.

2, there are two values, then Top-left equals Bottom-right, and takes the first value; Top-right equals Bottom-left and takes the second value

3, there are three values, where the first value is set Top-left, while the second value is top-right and bottom-left and they are equal, the third value is the set bottom-right.

4, there are four values, where the first value is set Top-left and the second value is top-right the third value bottom-right the fourth value is the set Bottom-left.

In fact, the Border-radius and Border properties, but also can be separated from each corner separately, that is, the following four kinds of writing, here I do a little, they are 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

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)

IE9 The following version does not support Border-radius, and IE9 does not have a private format, are used Border-radius, and its writing is the same as Opera, here is not duplicated.

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>//Bottom right corner-moz-border-radius-bottomleft: <length> <length>//Bottom left corner-webkit-border-top-left-radius:  <length> <length>// Upper left-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

General requirements are as follows:

{  width: 150px;   height: 80px;   Border: 2px solid #f36;   background: #ccc;}

But sometimes it needs to be split, as follows:

{  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 effect is as follows:

Supported Browsers:

If you want to see more detailed, the link address: http://www.cnblogs.com/lhb25/archive/2013/01/30/css3-border-radius.html

CSS3 fillet (Border-radius) detailed