CSS教程:制作圆角矩形的网站头像
目前许多网站的个人头像都采用圆角矩形来体现,这种效果就是通过CSS与PNG透明图标来做的,下面为您介绍两种制作圆角矩形头像的方法: 好多sns的头像都使用圆角了,昨天在校内上看到了圆角头像,今天在Qzone的也看到了圆角头像,圆角头像看上去比直角的美观。 圆角头像的制作原理就是在头像上覆盖一张透明的图片,把四个角颜色设置成页面的背景颜色,中间透明, 假设我的页面底色是纯黑色的,那么这个透明图片可以做成这样,如图: 这里需要注意的是需要把图片保存成24位的png,虽然IE6支持8位的png的透明,但是8位的png做透明圆弧图片存在效果上的问题,就是存在白色的杂边或锯齿,如图:
,24位的png或32位的png的圆弧透明(半透明)图片则非常光滑,但是该死的IE6不支持24位的png或32位的png透明(其他浏览器都支持),需要我们额外的一下处理; IE6下处理24位的png或32位的png方方法有很多,我做了2种: 第一种:使用 AlphaImageLoader 筛选器: html代码:
CSS代码:
|
||
凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢! |