Use pure CSS to achieve rounded border and Perfect compatibility

The implementation of the rounded corner box with pure CSS is a bad event. I have also written two summary articles.ArticleWhy is there another article like this. In our previous projects, corner boxes are often implemented using background images. However, when these projects are released and launched, sometimes new requirements need to be added, because a large number of rounded images were used in previous projects, and all these images were merged using CSS Sprites, in order not to add more additional work and do not want to use js to add more HTTP requests, some simple CSS solutions are required to solve this problem. My personal interests also like to use the image-free method to deal with these effects. I always think that CSS can do the work. Why not let it do it?

Implementation principle:

The principle of implementing the rounded corner frame in pure CSS mode has been explained in detail by many people on the network. below is the effect of enlarging one of the rounded corners.

Figure 1

From the above, we can see that the rounded corner boxes are stacked by containers. The width of each container is different. The width is implemented by the margin of margin, for example: margin: 0 5px; the outer margin of the left and right sides is 5 pixels, and there are 5 lines from top to bottom. The outer margin is 5px, 3px, 2px, and 1px, respectively, which are in descending order. Therefore, based on this principle, we can implement simple HTML structures and styles.

1. html structure layer:

<Div class = "sharp color1"> <B class = "B1"> </B> <B class = "B2"> </B> <B class = "B3"> </B> <B class = "B4"> </B> <Div class = "content"> text content </div> <B class =" b5 "> </B> <B class =" B6 "> </B> <B class =" B7 "> </B> <B class =" B8 "> </B> </div>

 

B1 ~ B4 forms the structure of the two rounded corners above, and B5 ~ B8 constructs the following two rounded corner structures. Content is the content body, which is put in a large container, and a class name for it is sharp, used to set a general style. A color1 class name is added to it. This class name is used to differentiate different color schemes, because there may be corner boxes of different colors.

2. CSS style:

. B1 ,. b2 ,. b3 ,. b4 ,. b5 ,. b6 ,. b7 ,. b8 {Height: 1px; font-size: 1px; overflow: hidden; display: block ;}. b1 ,. b8 {margin: 0 5px ;}. b2 ,. b7 {margin: 0 3px; border-Right: 2px solid; border-left: 2px solid ;}. b3 ,. b6 {margin: 0 2px; border-Right: 1px solid; border-left: 1px solid ;}. b4 ,. b5 {margin: 0 1px; border-Right: 1px solid; border-left: 1px solid; Height: 2px ;}

 

Set each B label to a block structure and define its height as 1 pixel. the excess part is hidden. From the above style, we can see that the setting of the margin value is reduced from large to small. The B1 and B8 settings are the same and have already been combined. In the same principle, B2 and B7, B3 and B6, B4 and B5 are the same settings. This is because the two circles above and below are the same, but the order is relative, so it is set together. Helps reduce CSS stylesCode. The last three sentences and the second sentence are a little different. The left and right border styles are set, but the border color is not set here. Why, because the border color needs to be changed in a timely manner, we separate them and define them separately in the following code.

Next we will set the style of the content area:

. Content {border-Right: 1px solid; border-left: 1px solid; overflow: hidden ;}

 

It also sets only the left and right border lines, but does not set the color value. It forms the outer border outline of the rounded corner frame together with the above eight B labels.

There are usually multiple corner boxes in a page, and each corner box may have different border colors. Is it possible to make different skin replacement solutions for different designs, the answer is yes. In my application, you can change the skin color and set the color scheme is not very difficult. Next let's take a look at how I apply them to different colors.

In the style design above, I have left a scalable space for the color scheme. I will combine all the class names that involve border color, and set a border color for them with the group selection character. As follows:

. Color1. b2 ,. color1. b3 ,. color1. b4 ,. color1. b5 ,. color1. b6 ,. color1. b7 ,. color1. content {}{ border-color: #96c2f1 ;}. color1. b1 ,. color1. b8 {Background: #96c2f1 ;}

 

Note: you need to set the color values of these two sentences to the same. Although the Background color is set in the second sentence, it is also the color of the upper and lower border lines. Remember this 1.1. Because border is not set for B1 and B8, but its height is 1px, the background color of B1 and B8 is equal to the upper and lower border color. Now a rounded corner box has been described, but there is a problem, that is, the background color of the content area, because it is the place where the text subject is stored. Therefore, we also need to add the following sentence, which is also the cluster selector to set all background colors in the rounded corner.

. Color1. b2 ,. color1. b3 ,. color1. b4 ,. color1. b5 ,. color1. b6 ,. color1. b7 ,. color1. content {Background: # eff7ff ;}

 

In addition to B1 and B8, all other labels are included, including the content container, which sets a color for all their background colors, in this way, all the places except the wireframes become a color. Here I also use the include selector and add a color1 to them. This is the class name of color solution 1. You can set different skin replacement schemes based on this principle.

All right, let's set up all the above Code to complete an instance model of the pure CSS rounded corner box. In the source code, I set six sets of color schemes, other color schemes are yours.

The following is a demo of the source code:

Figure 2

To demonstrate the effect, the width values of this model are all implemented by percentage. You can scale the width at will to see if it can adapt to elastic changes.

This model works perfectly in the following browsers:

Ie5.5, IE6, IE7, IE8, ff3, TT, maxthon2.1.5, opera9.6, safari4.0, chrome2.0.