CSS3 A simple example of drawing a rounded rectangle

With the development of the network, CSS is also constantly improving, fully absorbing the needs of the Web development for many years, put forward a lot of new CSS features, such as the very popular rounded rectangle Border-radius properties, but unfortunately, this property is not currently supported by any browser.

For some browsers, they have a private fillet property. such as FF's-moz-border-radius, Safari and Chrome's-webkit-border-radius. See the results:

Rounded corners of FF

Safari and Chrome fillet (Safari and chrome use the same kernel, which only has Chrome effect)

IE and Opera There is no private fillet properties, if any, the production of rounded corners should be much simpler, the respective private properties are all written, so that each browser "seat", to achieve the "compatibility" effect.

An example of a Baidu has ah css fillet scenario is given below:

Xml/html Code

2. < Div class="Box1">

3.     <span class="TL"></span><span class="TR"></span>  

5. &NBSP;&NBSP;&NBSP;&NBSP; <, div class = >

7. &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP; < p > </ >

9. </div >

10.     <span class="BL"></span><span class="BR"></span>  

12. </ Div >   

CSS Code:

JavaScript Code

2. . box1 {

4. Background:url (images/bg1.gif) repeat-x #1d6cb7;

6. Margin-top:1em;

8. position:relative;

10. Zoom:1;

12. width:778px;

14. }

16. . box1. TL,. box1. TR,. box1. BL,. Box1. br {

18. width:5px;

20. height:5px;

22. Position:absolute;

24. Background:url (images/bg3.gif) no-repeat;

26. Overflow:hidden;

28. }

30. . box1. cc {

32. height:40px;

34. padding:5px;

36. }

38. . box1. TL {

40. left:0;

42. top:0;

44. }

46. . box1. tr {

48. right:0;

50. top:0;

52. Background-position:0 -5px;

54. }

56. . box1. BL {

58. left:0;

60. bottom:0;

62. Background-position:0 -10px;

64. }

66. . box1. BR {

68. right:0;

70. bottom:0;

72. Background-position:0 -15px;

74. }

76. 
    

CSS3 A simple example of drawing a rounded rectangle