繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS教程:制作圆角矩形的网站头像
- CSS样式表
- css 简单区别ie6,ie7,firefox的写法
- 解决在IE6下文字溢出（多出一行字）的解决方法小结
- 纯css 鼠标移上查看大图的效果
- css 完美清除浮动的两种解决方案
- css 透明度的设置兼容所有浏览器
- pre 自动换行的问题
- CSS 图片定位的几种方式
- div+css学习笔记(IE与fox好多不兼容的问题)
- 让你的页面对 IE6 显示出黑白色(多浏览器)
- li 自适应宽度
- 样式表达式实现交替显示table行颜色
- css 控制图片大小 小于固定值 控制大小
- CSS 各种滤镜代码解释 用法案例
- 针对firefox ie6 ie7 ie8的css样式hack
- CSS 样式 层裁剪图片
- 十个非常实用的CSS属性(IE不支持)
- CSS渲染速度改善的十个方法与建议
- css z-index 最大值
- css z-index 在IE中的迷惑
- IE与Firefox中兼容的html设计中使用CSS改变鼠标为手形
CSS样式表 中的 CSS教程:制作圆角矩形的网站头像
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-27 浏览: 102 ::
收藏到网摘: n/a
目前许多网站的个人头像都采用圆角矩形来体现，这种效果就是通过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代码：
<div id="circular-box" class="clearfix"> <ul> <li><a href="http://www.sodao.com"><img src="jy20090504026.jpg" width="200" height="200" /><span class="cir-bg"></span></a></li> <li><a href="http://www.sodao.com"><img src="jy20090504035.jpg" width="200" height="200" /><span class="cir-bg"></span></a></li> <li><a href="http://www.sodao.com"><img src="jy20090504036.jpg" width="200" height="200" /><span class="cir-bg"></span></a></li> </ul> </div> |
CSS代码：
#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; top:0; left: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} |
这里需要注意的是：
- 使用 AlphaImageLoader 筛选器的元素必须有宽高，width:XXpx; height:XXpx;
- ie6下必须充值背景为none，_background:none
查看demo：http://www.css88.com/demo/circular-img/circular-img1.html
------------------------------------------------------------------------------------------------------------------------------------------
第二种：使用widgetfx的方法：
你可以在这里获取最新的widgetfx:http://code.google.com/p/widgetfx/source/browse/widgetfx.org/?r=122
html代码：
<div id="circular-box" class="clearfix">
<ul>
<li><a href="http://www.sodao.com"><img src="jy20090504026.jpg" width="200" height="200" /><span class="cir-bg"></span></a></li>
<li><a href="http://www.sodao.com"><img src="jy20090504035.jpg" width="200" height="200" /><span class="cir-bg"></span></a></li>
<li><a href="http://www.sodao.com"><img src="jy20090504036.jpg" width="200" height="200" /><span class="cir-bg"></span></a></li>
</ul>
</div>
CSS代码：
#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; top:0; left:0;width:200px; height:200px; background:url(circular.png) no-repeat; behavior:url("iepngfix.htc"); cursor:pointer} |
这里需要注意的是：
- 页面头部需要引用iepngfix_tilebg.js；
- 在透明图片的元素上加：behavior:url(”iepngfix.htc”)；
查看demo：http://www.css88.com/demo/circular-img/circular-img.html
另：校内最新的该效果制作有的特别，在支持html5的浏览器上使用了Canvas,IE下是用VML,HTML 5画图基本上都靠canvas,而且需要js的支持。相关信息可以查看http://byzuo.com/blog/html5-canvas
评论 (0) All
