CSS3--Fillet (Border-radius)

1, CSS2, CSS3 round angle difference, advantages and disadvantages

In the CSS2 traditional fillet generation scheme, it is necessary to use multiple rounded images as the background to apply to each corner respectively; ( background image Merging-- two ways: one, add four empty tags to the element label that needs rounded corners , The 4 tabs with rounded backgrounds are then positioned to the appropriate position. Second, background cross-shop background vertical shop ).

CSS3 in the Border-radius, eliminating the time to make rounded pictures. 　

Reduce the amount of maintenance. Image file generation, updating, writing Web page code, these jobs are no longer needed.

Improve Web page performance. The loading speed of the Web page will be faster because there is no need to make additional HTTP requests.

Increased visual reliability. In some cases (network congestion, server error, slow speed, and so on), the background image will fail to download, resulting in poor visual performance. This is not the case with CSS3.

2, Border-radius syntax, value

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

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

3, Border-radius description

CSS3 Fillet properties: Border-radius (meaning "border radius"). Attribute-All valid CSS metrics can be used: EM, ex, PT, PX, percent, and so on.

Value Order (following the TRBL principle): Upper left Top-left, upper right top-right, lower right bottom-right, left lower Bottom-left.

Can be divided:
Border-top-left-radius:<length>  <length>//upper left corner Border-top-right-radius:<length>  <length>//Upper-right corner Border-bottom-right-radius:<length>  <length>//Bottom right corner Border-bottom-left-radius:<length>  <length>Lower left corner

4, Border-radius compatible

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 a different prefix to different browser kernels than the Mozilla (Firefox) kernel requires "-moz", while WebKit (Safari, Chrome) kernel needs to add "-webkit" and so on.

1, Mozilla (Firefox, Flock and other browsers)
-moz-border-radius://Shorthand
2, WebKit (Safari, Chrome and other browsers)
-webkit-border-radius://abbreviation 3, Opera browser:
Border-radius://Shorthand 4, Trident (IE)
IE<9does not support Border-radius;
　　There is no private format under IE9, all with Border-radius, the same way as opera, which is not repeated here.for the greatest degree of browser(plus various version kernel browser prefixes)can support the Border-radius attribute, according to the following wording:  　　 
-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}]?

　　Note:Border-radius must be placed behind-moz-border-radius and-webkit-border-radius. 

5. Border-radius Usage

Border-radius: Horizontal/Vertical ("/" refers to the horizontal radius of the fillet, and the "/" is the vertical radius of the fillet, both of which follow the TRBL order principle. "/" respectively in the TRBL order value. )

1, border-radius:10px 15px 20px 30px/20px 30px 10px 15px;
===
 　　 Border-top-left-radius: 10px 20px;   　　
Border-top-right-radius: 15px 30px;            
 Border-bottom-right-radius: 20px 10px;                  
 Border-bottom-left-radius: 30px 15px;      

2.Border-radius: 10px/ 20px;   
===
Border-top-left-radius: 10px 20px;    
Border-top-right-radius: 10px 20px;           
  Border-bottom-right-radius: 10px 20px;          
Border-bottom-left-radius: 10px 20px;          

3.Border-radius: 10px 20px/ 20px 10px; (Top-left and Bottom-right; Top-right and Bottom-left)
===
Border-top-left-radius: 10px 20px;   < span class= "rule" > 
 span class= "rule" >border-bottom-right-radius:  10px 20px;            < Span class= "rules" >  
  Border-top-right-radius: 20px 10px;          
Border-bottom-left-radius: 20px 10px;          

4.Border-radius: 10px 20px 30px/ 50px 60px;
===
Border-top-left-radius: 10px 50px;       
 border-top-right-radius: 20px  60px             < span class= "attribute" > 
 border-bottom-left-radius: 20px  60px; 
                 /em> < span class= "rule" >  Border-bottom-right-radius: 30px Span class= "number" >50px; 
 
                 /span>       

Note Several special cases:
1, for Border-radius there is a difference between the inner radius and the outer radius, it is mainly the element border value is large, the effect is very obvious, when we border-radius radius value is less than or equal to the thickness of border, we do not have a rounded edge inside the border.
　　2, Border-radius can be used in various elements, but in the IMG and table applications will be a little different.
　　　　= = = " application Border-radius on IMG Only firefox4.0+ browser is normal, and no other browser can cut the image."

{  border: 5px solid Green;   Border-radius: 15px;  }

The image on the left is in Safari5.0, Google Chrome 10.0, Opera11.1 under the effect, we can see that the picture does not have a rounded effect, the right is in the Firefox4.0 under the effect, lower than this version and left the same effect, if the need to achieve a consistent effect, we must give up the Border-radius and the use of CSS2 the old way of making rounded corners.

　　　　= = = when the style attribute of table border-collapse is collapse, Border-radius cannot display normally, only border-collapse:separate;

{  border-collapse: collapse;   Border: 2px solid red;   background: Green;   Border-radius: 15px;  }

tip: Not all browsers support setting the fillet radius to a percentage value. Therefore, the safest way to do this is to set the style and width of each rounded border to the same value, and avoid using percent values.

Finishing from: (W3cplus) CSS3 fillet border-radius

CSS3--Fillet (Border-radius)