博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

让Google为你生成圆角图片

Posted on 2007-09-30 15:19  .NET酷  阅读(605)  评论(0编辑  收藏  举报
让Google为你生成圆角图片      



现在很多网站、博客都使用了圆角效果。圆角效果让整个页面看起来不会很死板。实现圆角效果,可以直接使用 CSS 特效来实现,也有使用图片实现。cornershop,就是一个自动生成圆角效果网页的自动生成器。

  Zach 就是一个狂热的圆角爱好者,就是 cornershop 让 Zach 变成这样的——他每次在网上看到漂亮的圆角效果总要习惯性地点击右键,查看源代码。他就是想知道那些圆角是用了 javascript, GIF, PNG ,是手工做成的还是自动生成的。

某次他路过 Google Group 的时候,习惯性地查看源代码。发现 Google 用了这样的链接来自动生成圆角:http://groups-beta.google.com/groups/roundedcorners?c=999999&bc=white&w=4&h=4&a=tr
你点击上面的链接就看到那个圆角图片了。   c 的值代表圆角颜色,你可以使用颜色的名称来表示,也可以使用颜色的RGB代码来表示,不用带 # 符号;
   bc 的值代表圆角的背景颜色;
   w 的值分别代表圆角的宽;
   h 的值分别代表圆角的高;
   a 的值代表圆角所在的方向,tl是左上角,tr是右上角,bl是左下角,br是右下角。

  参数解释:


  右图用的参数是这样的:
  c=FF0000   bc=white   w=150   h=100   a=tr

  -_____-
  Google肯定是用了一个椭圆函数来生成圆角图片的。