CSS using sprites technology to achieve fillet effect _ experience Exchange

First of all, to say briefly what is Sprites,sprites is a Web image application processing. It allows you to include all the bits and pieces of a page that are involved in a larger image, so that when you visit the page, the loaded picture will not show up as slowly as before. For the current network speed, not higher than 200KB of the single picture of the required loading time is almost the same, so no scruples about this issue.

The first step: Create our Sprite

Use PS and other tools to synthesize the picture as shown (distinguish it by a pixel red line)

Step two: Write HTML code

First, we'll give the container div a. Roundedbox class:

Copy Code code as follows:

<div class= "Roundedbox" ></div>

Now we have to add four more div, which will be used when we create rounded corners in the future. You must then load a class for each. Corner, and also identifies a class to specify the location of their lattices.

Copy Code code as follows:

<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>

Step three: Writing 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 goes to the parent element that was recently positioned relative to the body tag.

Let's start by defining all the rounded corners.

All rounded corners must be defined in absolute position and indicate height and width. The width and height of my fillet definition are 17px.

Copy Code code as follows:

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

Now start defining the div container style:

Copy Code code as follows:

. Roundedbox {Position:relative}

In any element that defines a class. Roundedbox, the absolute positioning element is positioned relative to the element, not the tag body. We also have to set some padding values, if not set, rounded corners will overwrite our text, which is definitely not the effect we want. Important: Top and bottom padding values must be equivalent to the height of 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:

Copy Code code as follows:

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

Let's make a separate definition without rounded corners.

We will set the absolute positioning for each fillet and position the background image (according to our Sprite):

Copy Code code 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, the #type1 is matched with a background color that blends into the rounded corners in the sprite:

Copy Code code as follows:

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

All the code:

Copy Code code as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Untitled Document </title>
<style type= "Text/css" >
. 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;}
#type1 {background-color: #CCDEDE;}
#type1. Corner {Background-image:url (.. /image/corners.gif);}
</style>
<body>
<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>
</body>