Css tutorial: corner box with variable height and width

Rectangular boxes are common in Web pages, but I think they are more beautiful. So how does the rounded corner frame be implemented using DIV + CSS? If an image with a rounded corner frame is processed as the background, the height and width are fixed and cannot be changed with the content. Today, I learned a way to design a rounded corner frame with a variable height and width. Let's take a look:

To achieve the effect of variable height and width, we should first divide the image into five parts. For example:

Why is this split? Why is image 1 so big? So that we can achieve variable height and width? To answer these questions, read the source code first.

Copy to ClipboardReference: [www.bkjia.com] <style>
*
{
Padding: 0;
Margin: 0;
}
Body
{
Font-size: 14px;
}
A: link, a: visited
{
Color: #000;
Text-decoration: none;
}
A: hover
{
Color: # 00f;
Text-decoration: underline;
}
# M_category
{
Width: 200px;
}
# M_category. con p
{
Padding: 10px;
}
. Round2
{
Background-image: url ("../images/round2_left_top.gif ");
Background-position: top left;
Background-repeat: no-repeat;
}
. Round2 h3
{
Background: url ("../images/round2_right_top.gif") no-repeat top right;
Padding-left: 35px;
Padding-top: 12px;
Padding-bottom: 12px;
Font-size: 16px;
Font-weight: bold;
}
. Round2. con
{
Height: 200px;
Padding: 0 20px;
Background: url ("../images/round2_right_middle.gif") repeat-y top right;
}
. Round2. footer
{
Background: url ("../images/round2_left_bottom.gif") no-repeat bottom left;
}
. Round2. footer p
{
Background: url ("../images/round2_right_bottom.gif") no-repeat bottom right;
}

</Style>

<Div id = "m_category" class = "round2">
<H3> Management Center <Div class = "con">
<P> <a href = "Categorymanager. aspx"> category management </a> </p>
<P> <a href = "Newsmanager"> News management </a> </p>
<P> <a href = "Addnews"> Add news </a> </p>
</Div>
<Div class = "footer">
<P> </p>
</Div>
</Div>

 

From the code above, we can see that round2 uses image 1 as the background, the h3 tag uses image 2 as the background, and con uses image 3 as the background, the p tag in foote uses image 4 as the background, and footer uses tag 5 as the background. Let's start with the bottom layer. When the content in round2 is insufficient to fill up 1st images, only the part of image 1 is displayed. In this case, image 5 is superimposed on Image 1. In this way, the control height is achieved. The same principle applies to width control. We use the h3 tag and p tag to overlay Image 2 and Image 4 to image 1 and image 5, thus realizing variable width. As long as the remaining image 3 in con is tiled along the Y axis, the structure of the entire rounded corner is formed.

This method controls the width by dividing the rounded corner frame into five images. Although it achieves the goal of variable height and width, the disadvantage is obvious, that is, image 1 needs to be cut a lot. Is there a better way? On the Internet, I see a method that does not require a background image to implement a variable height and width rounded corner frame.

Source: RainSun's Blog