CSS uses sprites technology to achieve rounded corners

This article mainly introduces the use of CSS sprites technology to achieve rounded corners of the effect, has a certain reference value, now share to everyone, the need for friends can refer to

Using the CSS sprites technology to draw the fillet, the simple is to put a circle in a picture, define 4 p, each p take a corner of the graph to do the background, see the concrete implementation method below.

First of all, let's briefly say what is Sprites,sprites is a Web page image application processing method. It allows you to include all the scattered images of a page in a large image, so that when you visit the page, the loaded picture will not be shown as a picture of the past. For the current popularity of the network speed, no more than 200KB of a single picture of the required loading time is basically the same, so there is no need to worry about this problem.

The first step: Create our Sprite

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

Step two: Write HTML code

First, we will give the container p a. Roundedbox class:

<p class= "Roundedbox" ></p>

Now we have to add four more p, which will be used in the future when we create rounded corners. A class must then be loaded for each. Corner, also identifies a class to specify the location of their lattice.

<p class= "Roundedbox" >    <strong>my content in Roundedbox Type 1</strong>    <p class= "Corner TopLeft "></p>    <p class=" Corner topright "></p>    <p class=" Corner bottomleft ">< /p>    <p class= "Corner bottomright" ></p></p>

Step three: Write CSS styles

Absolutely positioned elements are usually positioned according to the relative positioning of the parent element. If the parent element cannot be defined, it will go to the parent element that was recently positioned relative to the body tag.

Let's start by defining all the rounded corners.

All fillets must be defined with absolute positioning and marked with height and width. The width and height of my fillet definition are 17px.

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

Now start defining the P container style:

. roundedbox {position:relative;}

Any element that defines a class. Roundedbox, an absolutely positioned element is positioned relative to the element, not the label body. We also have to set some padding values, if not set, the fillet will overwrite our text, which is certainly not the effect we want. Important: The top and bottom padding values must be equivalent to the height of the rounded corners. The left and right padding values must be equivalent to the width of the rounded corners. As you already know, my fillet width is equal to the height, so the padding values for the Four corners are equal:

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

Let's make a separate definition of no rounded corners.

We will set the absolute positioning of each fillet and position the background map (depending 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;}

Finally, match the #type1 a background color to the rounded corners of the sprite:

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

All the code:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!