CSS uses Sprites technology to achieve rounded corner effect _ experience exchange

CSS Sprites technology is used to draw rounded corners. Simply put, a circle is made on a graph and four divs are defined. Each div is used to take an angle of the graph as the background. The following describes the specific implementation method. First, let's briefly describe what Sprites is, And Sprites is a Web image processing method. It allows you to include all the sporadic images involved in a page into a large image, so that when you access the page, the loaded image will not be shown as slowly as before. The loading time required for a single image of no more than KB is almost the same for the current popular speed of the network, so you don't have to worry about this issue.

Step 1: Create our Sprite

Images synthesized by tools such as PS (differentiated by a pixel red line)

Step 2: Compile HTML code

First, we will give the container p A. roundedBox class:

The Code is as follows:

Now, we have to add four more p, which will be used to create rounded corners in the future. A class. corner must be loaded for each class, and a class must be identified to specify the position of their grids.

The Code is as follows:

My content in roundedBox Type 1

Step 3: Write CSS styles

Absolute positioning elements are usually located based on the parent element of relative positioning. If this parent element cannot be defined, it will go to the parent element that is relatively located recently until the body tag.

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.

The Code is as follows:

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

Now define the p container style:

The Code is as follows:

. RoundedBox {position: relative ;}

In any element with a class. roundedBox defined, the 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. Note: The top and bottom padding values must be equivalent to the width of the rounded corner. 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:

The Code is as follows:

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

Let's define no rounded corner separately

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

The Code is as follows:

. 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 ;}

Finally, match # type1 with a background color so that it is integrated into the rounded corner of sprite:

The Code is as follows:

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

All code:

The Code is as follows:

Untitled document

My content in roundedBox Type 1