有些恼人的圆角

一些网站（尤其是娱乐性为主的网站）从用户视觉体验角度出发，会将用户头像设置为圆角显示，以增加亲和度。如开心网的用户头像：

在此基础上，追求更简约的设计会直接将头像图片本身设置为圆角来展示，如腾讯朋友：

这个效果看似简单，但可能会令一些前端er感到头疼。毕竟在尚不支持CSS3圆角属性的IE大行其道的当下，高效的解决页面中的批量圆角图片不是那么容易。看到最后的童鞋也会发现，本文也无最优解，因为不同的环境，需求不同，技术实现也会不同。

下午用CSS3画了一个自己的印章，觉得很有意思，技术上没什么难度，就是一大堆的变换+定位，这东西主要还是考验人的耐心。

线上地址：http://www.osmn00.com/demo/css3-yinzhang/logo-demo.html

原版的印章如下（扫描+PS重新填色版，也就是我博客模板LOGO处的那个印章）

CSS3制作的印章如下，在非IE浏览器里都能很好的显示

堂主原创博文，转载请加本页链接，谢谢合作：

http://www.osmn00.com/rebuild/223.html

-------------------------------- 分割线 ----------------------------------

HTML大纲算法

HTML中存在着一个大纲算法，大纲可以为用户提供同一份页面的信息结构目录，就像之前我们在word和pdf文档中体验过的那样。

PDF文档中的目录结构：

没有HTML5之前

HTML5之前的HTML4，唯一的方式是采用<h1> ~ <h6>元素来创建大纲。因为正常习惯下，<h1> ~ <h6>表示了从第一级到第六级的层级递减标题，而标题之下就应该是对应的内容了。

合理正确的使用标题元素可以为文档赋予一个良好结构的大纲，不单单对于搜索引擎的优化，更是为借助于屏幕阅读器浏览器网页的盲人（或弱视力）用户提供了巨大的帮助。

在非采用HTML5对网页进行重构的情况下，合理正确的使用标题元素依然可以为文档赋予一个良好结构的大纲，比如目前堂主博客的首页模板：

这个首页采用了如下的结构：