Flexible processing of CSS image rounded corners

 

3.2.1 fixed-width rounded corner Frame

The most easy to create is a fixed width rounded corner box. They only need two images: one for the top of the frame and the other for the bottom. For example, suppose you want to create a box style like 3-3.

Figure 3-3 simple corner frame style

The box is marked as follows:

You need to use the graphics software to create two images like 3-4: one image for the top of the frame and the other for the bottom. The code and images for this example and all other examples in this book can be downloaded from www.friendsofed.com.

Figure 3-4 top and bottom curve Images

Then, apply the top image to the title element and the bottom image to the bottom of the div box. Because the frame style is monochrome, you can add the background color to the div box to form the body of the box.

We do not want the content to touch the boundary of the box, so we also need to add some padding on the elements in the div:

This method is effective for simple boxes with a single color and no borders. However, what should I do if I want to create a more vivid style like Figure 3-5?

Figure 3-5 more special corner Frame

In fact, you can use the same method, but this time you do not set the background color in the box, but set a duplicate background image. You also need to apply the bottom curve image to another element. In this example, the last paragraph element in the box is used:

Figure 3-6 shows the generated box. Because the height of the box is not set, it is vertically expanded as the text size increases.

Figure 3-6 Special fixed width box. The height of the box will expand as the text size increases.

Flexible rounded corner Frame

If you increase the font size, the preceding example will be vertically expanded. However, they do not horizontally expand because the width of the box must be the same as the width of the top and bottom images. If you want to create a flexible box, you need to use a slightly different method. Instead of a single image forming the top and bottom curves, two overlapping images are used (see Figure 3-7 ).

Figure 3-7 how to expand the top image to form a flexible rounded corner Frame

As the size of the frame increases, more large images are displayed, thus achieving box expansion. This method is sometimes called sliding doors technique because one image slides on another image and hides a part of it. This method requires more images, so two additional silent elements must be added to the tag.

This method requires four images: the two top images form the top curve, and the two bottom images form the bottom curve and the body of the frame (see Figure 3-8 ). Therefore, the height of the bottom image must be the same as the maximum height of the frame. .

Figure 3-8 images required to create a flexible rounded corner Frame

First, apply bottom-left.gif to the main frame divand apply bottom-right.gif to the external div. Next, apply top-left.gif to the internal divand apply top-right.gif to the title. Finally, add some padding to make a little blank around the content.

In this example, I set the width of the box in em units, so the box will be stretched when the text size is added to the browser (see Figure 3-9 ). Of course, you can use percentages to set the width, which enables the box to expand or contract according to the size of the browser window. This is one of the main principles behind elasticity and flexible layout. These principles will be further discussed later in this book.

Figure 3-9 the flexible rounded corner frame scales horizontally and vertically as the text size increases