We will next create an xHTML page, which contains two content areas contained by DIVs with IDs fixedBox and FlowBox. They are two DIVs with fixed width and non-fixed width. Now we will create a page for these two DIVs. DIV with rounded corners.
The theory we use is that when adding a background to an element, the background image always appears on top of the background color; to create a solid color rounded rectangle, we can first create a normal rectangle and then, use Use a rounded corner picture with the same color as the four rounded corner background of this element to form a rounded corner frame. The method will be explained in detail below in two cases - fixed-size boxes and streaming unfixed-size boxes.
Adding rounded corners to a fixed-size box Step 1: Create a basic xHTML document and add a little content to it
view plaincopy to clipboardprint?
<div id="fixedBox">
<h2>FixedBox Testing</h2>
<p>This is just a test page of enpor.com.</p>
</div>
<div id="fixedBox">
<h2>FixedBox Testing</h2>
<p>This is just a test page of enpor.com.</p>
</div>We have now created an xHTML document, which has a DIV with an ID of fixedBox. We will create a rounded border for this DIV. Then add basic styling to the document:
view plaincopy to clipboardprint?
body, html {
margin:0;
padding:0;
background:#a7a09a;
color:#000;
}
body, html {
margin:0;
padding:0;
background:#a7a09a;
color:#000;
}Step 2: Set the width and background color of the DIV
view plaincopy to clipboardprint?
div#fixedBox {
width:340px;
margin:40px;
background:#E4ECF9;
}
div#fixedBox {
width:340px;
margin:40px;
background:#E4ECF9;
}Step 3: Make a rounded rectangle based on the width of the DIV. Since I set the width of the DIV to 340px, I now need to make a rounded rectangle with a width of 340px. After making the rectangle, place the top part of the entire rectangle with The bottom part was cut out and used as a DIV picture. I made the following two pictures:
Step 4: Apply the image to the DIV background
view plaincopy to clipboardprint?
div#fixedBox {
width:340px;
margin:40px;
background:#E4ECF9 url(images/bottom.gif) no-repeat bottom center;
}
div#fixedBox {
width:340px;
margin:40px;
background:#E4ECF9 url(images/bottom.gif) no-repeat bottom center;
}div#fixedBox h2{
margin:0;
padding:2px;
background:#E4ECF9 url(images/top.gif) no-repeat top center;
}
Above we apply the image named Bottom.gif at the bottom of the DIV, and then use Top.gif on the first element H2 of the DIV. Of course, the first thing we need to pay attention to here is that we cannot add Margin to h2. Value or add Padding or Border to DIV.
Create a non-fixed-width rounded box. What we said above is to create a fixed-width but not fixed-height rounded box. This requires two pictures, top and bottom. So, now if we do not fix the width and height, think about it for a moment, You will find that this time we will have to use 4 pictures, one picture in each corner to create a rounded rectangle that can be shrunk in any way. We still need to create a DIV container first and add basic content.
Step 1: Create xHTML document
view plaincopy to clipboardprint?
<div id="flowBox">
<div class="forhelp">
<div class="forhelp2">
<h2>FlowBox Testing</h2>
<p>This is just a test page of enpor.com.</p>
</div>
</div>
</div>
<div id="flowBox">
<div class="forhelp">
<div class="forhelp2">
<h2>FlowBox Testing</h2>
<p>This is just a test page of enpor.com.</p>
</div>
</div>
</div>I added the above four lines directly to the previous HTML document, so I no longer need to set a CSS style sheet for its Body. Now we go directly to the topic.
The second step is to create rounded corners. Create four rounded corners. The rounded corners are in the upper left, lower left, upper right, and lower right directions. The completed rounded corners I made are as follows:
Step 3: Set the background color of the DIVview
plaincopy to clipboardprint?
div#flowBox {
margin:40px;
background:#C3D9FF;
}
div#flowBox {
margin:40px;
background:#C3D9FF;
} Step 5: Add rounded corners
. For DIV containers with no fixed width and height, any rounded corner must be able to change its position according to changes in the width and height of the DIV, so we can only add rounded corners to the fixed-width DIV. The fixed-width images used here are processed into two small images, and can be added directly to the H2 element. Now after we add the H2 element, we only get one side of the rounded corner, and there is still one rounded corner that can be used in H2. Span is obtained, so that two rounded corners are solved, and the p element can provide one rounded corner, and the div itself has one rounded corner, which is exactly four rounded corners.
view plaincopy to clipboardprint?
div#flowBox {
margin:40px;
background:#C3D9FF url(images/bottom-left.gif) no-repeat bottom left;
}
div#flowBox h2{
margin:0;
padding:0;
background:#C3D9FF url(images/top-left.gif) no-repeat top left;
}
div#flowBox h2 span{
margin:0;
display:block;
background:#C3D9FF url(images/top-right.gif) no-repeat top right;
}
div#flowBox p{
margin:0;
padding:0;
background:#C3D9FF url(images/bottom-right.gif) no-repeat bottom right;
}