CSS rounded corner progressive enhancement method 1

At present, except for ie678 browsers, other browsers support CSS 3 rounded corners. I have to admit that many front-end engineers have spent a lot of effort on corner creation, the border-radius attribute of css3 is much more convenient (a lot). Although there are many ways to allow ie678 to support simple attributes such as rounded corners in css3, I personally think it will increase the load burden on browsers, in addition, it is in the development stage. After some additional attributes are added, it can be used normally. Recently, we have seen a lot of discussions on "progressive enhancement" in the front-end industry. As a result, the rounded corners are gradually enhanced recently (we can't wait until HTML5, and css3 is popular, so we can use it now)

To achieve auto-increment rounded corners, make sure that the rounded corner image is longer.

My rounded corners: (500px * 12px) the height is twice the width of the rounded corner.

 My CSS styles:

/* Rounded corner */
. Radius_top_ie,. radius_bot_ie {Height: 6px;
Padding-left: 10px; position: relative;
Overflow: hidden; Z-index: 3}
. Radius_top_ie,. radius_top_ie_in {Background: URL (.../../images/HR/BG/tset.png) 0 0 no-repeat \ 9 ;}
. Radius_bot_ie,. radius_bot_ie_in {Background: URL (.../../images/HR/BG/tset.png) 0-6px no-repeat \ 9 ;}
. Radius_top_ie_in {Height: 100%; Background-position: 100% 0 ;}
. Radius_bot_ie_in {Height: 100%; Background-position: 100%-6px ;}
. Radius_top_ie {margin-bottom:-6px ;}
. Radius_bot_ie {margin-top:-6px ;}
/* End _ rounded corner */

My HTML implementation:

<Div style = "width: 200px; margin: 90px;">
<! -- [If lt ie 9]> <Div class = "radius_top_ie"> <Div class = "radius_top_ie_in"> </div> <! [Endif] -->
<Div style = "width: 198px; Height: 200px; Background: # f2f9ff; Border: 1px solid # 5e92cc; border-radius: 4px;"> </div>
<! -- [If lt ie 9]> <Div class = "radius_bot_ie"> <Div class = "radius_bot_ie_in"> </div> <! [Endif] -->
</Div>

When IE is earlier than ie9, the rounded corner is displayed in HTML + CSS mode. Otherwise, the border-radius attribute is directly used to ignore the relevant code.

(Note: if any error occurs, please advise)