Implementation of rounded corners (in the simplest way, I think)

This is summarized by one of my colleagues and is well written. Let's share it here.

1. An Image completes the effect of rounded rectangle

To avoid interface rigidity, designers often design plates with rounded rectangles.

Content. This is often a burden for developers. In

In the age

Add four rounded corners to the four corners. As for the border on all sides, it is an ideal practice

Set border.

In the age of Div, we will consider using the float Div to float the four corners, respectively

Set the scene image to the cut-down four images, and try another way to set the border.

However, this method is actually not changing, but the table is changed to Div and the IMG is changed.

As a background image, the basic idea is as fragmented as it is.

It is a fragmented idea. In fact, I have read the CSS for the rounded rectangle on the Baidu Hi homepage.

This is what we think after style design-because their design is truly simple and practical.

The model is a border and a circular image. Add a rectangle to the right rectangle, and then

Four small squares are placed on the four corners, and the background image is

To display the parts of the circular image separately, so that the rounded rectangle is reduced to zero.

. Next, let's take the example of moving the four small squares out 1px respectively.

Overwrite the original border on the four corners. Let's take a look at Baidu Hi's homepage:

The figure shows a piece of code in the upper right corner of the rounded rectangle. the CSS code on the right shows that

DIV is set to the right by float: Right, and then

Position: relative, right:-1px, top:-1px, etc.

The distance from 1 px protruding from the right side, so as to overwrite the border of the original line here, so that the outside

The table shows the curve on the image. The image is displayed in the background-

Position: Right top

Zero effect. The effects on other corners can also be achieved through the same method

.

In practice, there may be several different rounded rectangles on a page.

Some have different colors, and some have different rounded corner diameters. You can extract the common parts in CSS.

The rounded corner moments with different effects can be generated with only a few additional codes.

. For example, the following code:

. Rect,. rect2

{Width: 8px; Height: 8px; position: relative; overflow: hidden; font

-Size: 1px;}. rect2 {width: 10px; Height: 10px;}. C1 {background-

Position: Left top; top:-1px; left:-1px; float: Left;}. C2

{Background-position: Right top; top:-1px; Right :-

1px; float: Right;}. C3 {background-position: Left Bottom; bottom:

-1px; left:-1px; float: Left;}. C4 {background-position: Right

Bottom; bottom:-1px; Right:-1px; float: Right;}. CB {background-

Image: URL (/img/home/circle.gif);}. CB2 {background-image: URL

(/Img/home/circle2.gif);} in use, C1, C2, C3, and C4 are public parts.

Points, defines the style on the four corners, rect, rect2 defines the size of the four corners,

CB and CB2 define the background image of the rounded corner,

You can create two different rounded rectangle effects.
For example:
<Div style = "border: solid 1px # f2f2f2;">
<Div class = "rect C1 CB"> </div>
<Div class = "rect C2 CB"> </div>
Rounded rectangle 1
<Div class = "rect C3 CB"> </div>
<Div class = "rect C4 CB"> </div>
</Div>

<Div style = "border: solid 1px # f4f4f4;">
<Div class = "rect2 C1 CB2"> </div>
<Div class = "rect2 C2 CB2"> </div>
Rounded rectangle 2
<Div class = "rect2 C3 CB2"> </div>
<Div class = "rect2 C4 CB2"> </div>
</Div>

Put the four rounded corners on one image, and then reduce the four requests to one. Pair

For a high-traffic page like Baidu Hi, this account is really clever.