CSS uses sprites technology to achieve rounded corners

Source: Internet
Author: User
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!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.