How to achieve rounded corners under CSS2 and CSS3

In previous articles, the Helper home (www.bkjia.com) has mentioned more than once the CSS rounded corner tutorial (View Details >>> ), today, we can see the implementation of CSS rounded corners in the Bolo's blog. The difference is that the implementation methods of CSS2 and CSS3 are described in the Bolo's blog respectively.

　　Recommended reading:CSS Chinese manual

　　Enter the text:

Today, with more and more exquisite web design, the application of rounded corners has become more and more extensive. This article will describe how to create rounded corners in CSS2 and css3.

For ease of use, CSS3 does not require additional tags and images, which is much more advanced than CSS2. But when the application is on the website, the use of CSS2 can make the page more consistent in mainstream browsers. The following describes in detail how to create a rounded corner and its compatibility with browsers.

Note: This article demonstrates the effect of the first image placement.

How to Create a rounded corner with CSS2 1. fixed width rounded corner

This is the easiest way to use up to two images (top and bottom) without adding additional tags. Here, I use the following two pictures as the background:

HTML:

Copy to ClipboardReference: [www.bkjia.com] <div class = "box">
<H2> This is a heading Lorem ipsum dolor sit amet,
Consectetur adipiscing elit. Sed
Vehicula ligula eu diam tincidunt
Fermentum. Curabitur facilisis
Enim non libero cursus eu varius
Enim suscipit. Ut venenatis
Vehicula lorem ut hendrerit. Ut
Adipiscing augue sed ante volutpat
Eget ornare erat facilisis. In hac
Habitasse platea dictumst.
</Div> CSS: Copy to ClipboardReference: [www.bkjia.com]. box {
Width: 200px;
Background-color: # EE2E24;
Background: url ("img/rounded-top.jpg") no-repeat left bottom;
Color: # fff ;}

. Box h2 {
Back ground: url ("img/rounded-top.jpg") no-repeat left top;
Padding: 10px 10px 0 10px;
}

. Box p {
Padding: 10px;
} Advantages:

Use the least mark and image to achieve the rounded corner effect (only one picture can be done for a child shoes with better CSS ).

Disadvantages:

Not flexible enough. You must update the background image every time you change the frame width.

2. Flexible rounded corners

To make the rounded corner more flexible, we can make every rounded corner in the container into an independent element and forcibly locate the four corners of the parent container through CSS. In this method, we only need to use the image on the right.

HTML: Copy to ClipboardReference: [www.bkjia.com] <div class = "box">
<Span class = "crnr tl"> </span>
<Span class = "crnr tr"> </span>
<H2> This is a heading Lorem ipsum dolor sit amet,
Consectetur adipiscing elit. Sed
Vehicula ligula eu diam tincidunt
Fermentum. Curabitur facilisis
Enim non libero cursus eu varius
Enim suscipit. Ut venenatis
Vehicula lorem ut hendrerit. Ut
Adipiscing augue sed ante volutpat
Eget ornare erat facilisis. In hac
Habitasse platea dictumst.
<Span class = "crnr bl"> </span>
<Span class = "crnr br"> </span>
</Div>

CSS:

Copy to ClipboardReference: [www.bkjia.com]. box {
Position: relative;
Width: 200px;
Height: 200px;
}

. Crnr {
Position: absolute;
Background: url ("img/crnr-sprite.jpg") no-repeat;
Width: 20px;
Height: 20px;
}

. Tl {
Left: 0;
Top: 0;
Background-position: 0 0;
}

. Tr {
Right: 0;
Top: 0;
Background-position:-25px 0;
}

. Bl {
Left: 0;
Bottom: 0;
Background-position: 0-25px;
}

. Br {
Right: 0;
Bottom: 0;
Background-position:-25px-25px;
}

Advantages:
It can automatically adapt to the size of the parent container, and the browser compatibility is very strong.

Disadvantages:
Some meaningless labels are added to achieve rounded corners.

• 2 pages in total:
• Previous Page
• 1
• 2
• Next Page