CSS Tutorial: Fillet head Production

Introduces two methods of making rounded heads, which are done through CSS and PNG transparent icons.

A lot of SNS head of the use of rounded corners, yesterday in the school saw the rounded head, today in Qzone also saw a rounded head, rounded head looks more beautiful than right angle.

The principle of fillet head is to cover a transparent picture on the head, set four corner color to the background color of the page, the middle is transparent,

Assuming that my page background is pure black, then this transparent image can be made like this, as shown in figure:

Note here that you need to save the picture to 24-bit PNG, although the IE6 support 8-bit PNG transparent, but the 8-bit PNG to do transparent arc image has the effect of the problem is the existence of white matte or sawtooth, as shown:

, the 24-bit PNG or 32-bit PNG's circular transparent (translucent) picture is very smooth, but the damned IE6 does not support 24-bit PNG or 32-bit PNG transparency (supported by other browsers) and requires additional processing.

IE6 handle 24-bit PNG or 32-bit PNG method There are many, I did 2 kinds:

First: Using the AlphaImageLoader filter:

HTML code:

<div id= "Circular-box" class= "Clearfix" >

<ul>

<li><a href= "http://www.sodao.com" > <span class= "CIR-BG" ></span></a> </li>

<li><a href= "http://www.sodao.com" ><span" class= "CIR-BG" ></span></a></li>

<li><a href= "http://" Www.sodao.com "><span class= "CIR-BG" ></ span></a></li>

</ul>

</div>

CSS code:

#circular-box{margin:50px;}

#circular-box li{float:left; margin:0 20px; position:relative}

#circular-box li Img{display:block}

#circular-box li Span{position:absolute; : 0;width:200px; height:200px; Background:url (circular.png) no-repeat; _background:none;_filter:progid:dximagetransform.microsoft.alphaimageloader (src= ' circular.png ', sizingMethod= ') Crop '); Cursor:pointer}

Here's what you need to be aware of:

1. Elements that use AlphaImageLoader filters must be of wide height, width:xxpx; Height:xxpx;
2. IE6 must recharge the background for None,_background:none

View demo:http://www.css88.com/demo/circular-img/circular-img1.html

The second type: Using Widgetfx the method:

You can get the latest widgetfx:http://code.google.com/p/widgetfx/source/browse/widgetfx.org/?r=122 here.

HTML code:

<div id= "Circular-box" class= "Clearfix" >

<ul>

<li><a href= "http://www.sodao.com" > <span class= "CIR-BG" ></span></a> </li>

<li><a href= "http://www.sodao.com" ><span" class= "CIR-BG" ></span></a></li>

<li><a href= "http://" Www.sodao.com "><span class= "CIR-BG" ></ span></a></li>

</ul>

</div>

CSS code:

#circular-box{margin:50px;}

#circular-box li{float:left; margin:0 20px; position:relative}

#circular-box li Img{display:block}

#circular-box li Span{position:absolute; left:0;width:200px; height:200px; Background:url (circular.png) no-repeat; Behavior:url ("IEPNGFIX.HTC"); Cursor:pointer}

Here's what you need to be aware of:

1. The page head needs to quote Iepngfix_tilebg.js;
2. Add to the elements of the transparent Picture: Behavior:url ("IEPNGFIX.HTC");

View demo:http://www.css88.com/demo/circular-img/circular-img.html