CSS rounded corner Processing

Document directory

• Preliminary Introduction
• What should we do?
• Step 1: Create our Sprite
• Step 2: HTML code
• Circle Box Model 1 (blue)
• Circular Box Model 2 (green)/circular box model 3 (purple)
• Model 4 (red border)
• Model 5 (vertical gradient)
• IE6
• Last thought

From: http://www.javaeye.com/news/7417-css-sprites-fillet

Preliminary Introduction

Of course, I know there are thousandsUseCSSProcess rounded cornersBut in any case, I still want to show this article to you. I hope you will find this article very useful. It should be noted that this tutorial thoroughly applies advanced CSS technology, but I will try my best to make it simple for beginners.CSS3There is no complete application yet, so, knowing now, I will keep W3C verification valid.

Demo | download CSS Sprites + rounded corner

You can also refer to the following article:

43 PSD to XHTML. How will we deal with the CSS tutorial?

The version of the rounded corner is composed of four built-in absolute positioning Div, each Div has a unique rounded corner ImageCSSSprite operation. We will do this:

How does one make this technology so amazing (what makes this technique cool )?

The ability to process adjacent elements through variable width and height. No limit. (The ability to make rounded-bordered elements with fluid width and height. No limits whatsoever.) This technology, as I mentioned earlier, is completed by combining operations with CSS Sprites. If you do not know the technology or how to use it, read my previous article first. Have CSS Sprites been learned? Let's get started!

Step 1: Create our Sprite

1. Select an editor for rectangular rounded corner Image Processing (in this case, I chose firework ).
2. Cut and export the rounded corner to the temporary local location (we will use it later ).
3. Create a new file, import the rounded corner to the new file, copy it three times, and then rotate the three new slices to get the other three rounded corners.
4. Merge four rounded corners into one image and use1px Red LineTo distinguish them.
5. Export the merged image, and sprite will be finished.

Step 2: HTML code

First, we will give the container Div. Roundedbox

Class:

<div class="roundedBox"></div>

Now, we must add four more Divs, which will be used to create rounded corners in the future. Each class must be loaded. CornerAnd also identifies a class to specify the position of their grids.

<div class="roundedBox">
    <strong>My content in roundedBox Type 1</strong>
    <div class="corner topLeft"></div>
    <div class="corner topRight"></div>

    <div class="corner bottomLeft"></div>
    <div class="corner bottomRight"></div>
</div>

All done? Well, let's move our attention backCSSCode.

Step 3: CSSCode

As you know, (or you will learn it quickly here) absolute positioning elements are usually located according to the parent element of relative positioning .. If this element is not defined, they will take as their parent relatively-positioned element, the body tag. if this parent element cannot be defined, it will go to the parent element that is relatively located recently until the body tag.Ha ?!-Well, if you still haven't mastered it so far, don't worry, we will understand it in the second part. (The translation is a bit stubborn. The original Article is attached: OK, if you didn't get this, don't worry, you'll catch it in an second .)

Let's first define all the rounded corners

Absolute positioning must be defined for all rounded corners and the height and width must be specified.The width and height of my rounded corner are both 17px.

.corner {
position:absolute;
width:17px;
height:17px;
}

If this is the first time you cut the rounded corner of a rectangle, the width and height are likely to be different !).

Now, define the DIV container style:

.roundedBox {position:relative;}

Any defined class. RoundedboxThe absolute positioning element is located relative to this element, rather than the label body. We must also set some padding values. If not set, the rounded corner will overwrite our text, which is definitely not what we want.Important:The top and bottom padding values must be equivalent to the rounded cornerHeight. The left and right padding values must be equivalent to the width of the rounded corner. As you know, the width and height of my rounded corner are equal. Therefore, the padding values of the four corners are equal:

.roundedBox {position:relative; padding:17px; margin:10px 0;}

I also made some gaps for our Div through margin.

Finally, Let's define the non-rounded corner separately.

We will make absolute positioning settings for each rounded corner and position the background image (based on our sprite ):

.roundedBox {position:relative; padding:17px; margin:10px 0;}

    .corner {position:absolute; width:17px; height:17px;}

        .topLeft {top:0; left:0; background-position:-1px -1px;}
        .topRight {top:0; right:0; background-position:-19px -1px;}
        .bottomLeft {bottom:0; left:0; background-position:-1px -19px;}
        .bottomRight {bottom:0; right:0; background-position:-19px -19px;}

You may have noticed that our style has not been downloaded. We generally do not define them because we will use another method.

Circle Box Model 1 (blue) HTML code

<div class="roundedBox" id="type1">
    <strong>My content in roundedBox Type 1</strong>

    <div class="corner topLeft"></div>
    <div class="corner topRight"></div>
    <div class="corner bottomLeft"></div>
    <div class="corner bottomRight"></div>
</div>

We must define an ID for the container Div# Type1To implement special background.

CSSCode

First, we need to match # type1 with a background color so that it can be integrated into the rounded corner of Sprite:

#type1 {background-color:#CCDEDE;}

Then, define the. Corner class to help the circular box model load the sprite style:

#type1 {background-color:#CCDEDE;}
    #type1 .corner {background-image:url(../images/corners-type1.gif);}

Now, we have achieved the first rounded rectangle! Preview rounded rectangle Model 1 (blue)

.

Circular Box Model 2 (green)/circular box model 3 (purple)

The only difference between model 1, Model 2, and model 3 is their color, so we only need to modify these.

Model 2 (green)

HTML code

<div class="roundedBox" id="type2">
    <strong>My content in roundedBox Type 2</strong>

    <div class="corner topLeft"></div>
    <div class="corner topRight"></div>
    <div class="corner bottomLeft"></div>
    <div class="corner bottomRight"></div>
</div>

CSSCode (only modify the sprites color and background color)

#type2 {background-color:#CDDFCA;}
    #type2 .corner {background-image:url(../images/corners-type2.gif);}

Preview rounded rectangle Model 2 (green)

.

Model 3 (purple)

HTML code

<div class="roundedBox" id="type3">
    <strong>My content in roundedBox Type 3</strong>
    <div class="corner topLeft"></div>

    <div class="corner topRight"></div>
    <div class="corner bottomLeft"></div>
    <div class="corner bottomRight"></div>
</div>

CSSCode (only modify the sprites color and background color)

#type3 {background-color:#D3CADF;}
    #type3 .corner {background-image:url(../images/corners-type3.gif);}

Preview the rounded rectangle model 3 (purple). Have you learned all this? Okay. Now let's learn more.

Model 4 (red border)

What is the difference between model 4 and Model 1, 2, and 3? Border and color. Let's solve these problems.

HTML code

<div class="roundedBox" id="type4">
    <strong>My content in roundedBox Type 4</strong>
    <div class="corner topLeft"></div>

    <div class="corner topRight"></div>
    <div class="corner bottomLeft"></div>
    <div class="corner bottomRight"></div>
</div>

CSSCode (in Sprite, add borders to the borders of your corners, and integrate the background and border of the. roundedbox class with Sprite .)

#type4 {background-color:#CCACAE; border:1px solid #AD9396;}
    #type4 .corner {background-image:url(../images/corners-type4.gif);}

Okay, this is the effect. We cannot correctly overwrite the # type4 border at the corner. Therefore, we must correct their positioning to cover early positioning styles. Let's do this:

#type4 {background-color:#CCACAE; border:1px solid #AD9396;}
    #type4 .corner {background-image:url(../images/corners-type4.gif);}
        #type4 .topLeft {top:-1px;left:-1px;}
        #type4 .topRight {top:-1px; right:-1px;}
        #type4 .bottomLeft {bottom:-1px; left:-1px;}
        #type4 .bottomRight {bottom:-1px; right:-1px;}

Well, this is the model 4 we have completed. Preview rounded rectangle Model 4 (red border). We are almost there, don't quit now: P

Model 5 (vertical gradient)

Well, model 5 requires more work. We should do this:

1. Modify the height of the top and bottom corners (determined by the gradient (depending on your gradient )).
2. Modify the position of the background image at the upper and lower corners (determined by the gradient ).
3. You can repeatedly tile a 1px background image to create a gradient effect for the container Div.
4. It is worth noting that we must set a size for the content, or set a minimum height for the container (determined by the gradient ).

Let's get started.

HTML code (same as before)

<div class="roundedBox" id="type5">
    <strong>My content in roundedBox Type 5</strong>
    <div class="corner topLeft"></div>
    <div class="corner topRight"></div>

    <div class="corner bottomLeft"></div>
    <div class="corner bottomRight"></div>
</div>

CSSCode

My gradient is vertical from top to bottom. Therefore, we must increase the height of the top corner and change the background image position of the bottom corner. When you see my new Sprite, you will understand why this is done. The following figure shows the background image in my Div:1px width, which does exist. My bottom corner has a solid color that matches the background color of the div. Speak less and act more. Let's continue to define the container Div:

#type5 {background:#FECBCA url(../images/roundedbox-type5-bg.png) repeat-x 0 0; min-height:110px;}

The background color set for the container is what I learned from the bottom corner. Repeat the background image in the X direction. Finally, I set a minimum height for it. As I mentioned earlier, the gradient will not be leaked. Add all the corners (I changed the file type to an image in. PNG format to achieve better gradient quality ):

#type5 {background:#FECBCA url(../images/roundedbox-type5-bg.png) repeat-x 0 0; min-height:110px;}
    #type5 .corner {background-image:url(../images/corners-type5.png);}

Now, I add the height of the top corner (this is determined by the color position that the gradient finally arrived ):

#type5 {background:#FECBCA url(../images/roundedbox-type5-bg.png) repeat-x 0 0; min-height:110px;}
    #type5 .corner {background-image:url(../images/corners-type5.png);}
        #type5 .topLeft,
        #type5 .topRight {height:140px;}

Finally, I corrected the Background Image Positioning at the bottom corner:

#type5 {background:#FECBCA url(../images/roundedbox-type5-bg.png) repeat-x 0 0; min-height:110px;}
    #type5 .corner {background-image:url(../images/corners-type5.png);}
        #type5 .topLeft,
        #type5 .topRight {height:140px;}
        #type5 .bottomLeft {background-position:-1px -142px;}
        #type5 .bottomRight {background-position:-19px -142px;}

All done! -Preview rounded rectangle model 5 (vertical gradient)

.

IE6

This technology is problematic in this annoying browser. We must specify the width and height for the container (. roundedbox, or # type1, # type2, etc. If you do not define it, it will be leaked out of the box model. Use IE6 conditional annotations to define it.

Last thought

I hope this technology will be helpful to you and will not appear too difficult. Vertical gradient, transparent corner, as long as you practice more, your head will become more easy to use, it will be easier to define the style.