让Google为你生成圆角图片 5

  
  现在很多网站、博客都使用了圆角效果。圆角效果让整个页面看起来不会很死板。实现圆角效果,可以直接使用 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肯定是用了一个椭圆函数来生成圆角图片的。

链接 | 来源

# 本文来自煎蛋(http://jandan.net/),作者为sfufoet


blogmarks del.icio.us Google Live MisterWong Reddit Technorati TwitThis QQ
垦一垦

关于 “让Google为你生成圆角图片”有 5 篇评论

  1. 1 sein 说 : Reply to this comment
    2006-12-13 5:35 pm

    火山真强!

  2. 2 sfufoet 说 : Reply to this comment
    2006-12-13 7:29 pm

    刚刚更新了一个链接:颜色的名称
    本来想链接一个英文颜色的,那个链接只认英文颜色名,但是一堆英文谁有兴趣看啊。还不如看中文的。
    想知道中文颜色对应的RGB值?

    很简单。有QQ,按下默认的截图快捷键 Ctrl+Alt+A,看右上角的提示。
    没QQ?-______-
    有办法,把颜色对应的图片下载下来,用PhotoShop打开……
    没PS?
    可以用取色软件。

  3. 3 sfufoet 说 : Reply to this comment
    2006-12-13 7:38 pm

    再附上个中英文对照的
    http://blog.kubao.com/article/10939.aspx

  4. 4 煎蛋 » 煎蛋里的全文翻译 说 : Reply to this comment
    2006-12-17 4:52 pm

    [...] 22- 时代杂志年度人物:你 [zuofei / 1818字] 21- 10个Linux操作的好习惯 [cunni / 1287字] 20- 我们去年的现在所不知道的100件事 [skyreal / 1139字] 19- 10种最危险的玩具 [ant / 654字] 18- XNA 10 步打造自己的 Xbox 360 游戏 [yonnie / 656字] 17- Google Earth “圣诞礼物大冒险”火热进行中 [sfufoet / 575字] 16- 让Google为你生成圆角图片 [sfufoet / 642字] 15- 15 个最强 007 装备 [maple / 704字] 14- 没有阳光的意大利小城 [sein / 606字] 13- Blogger 们,是不是该停下来了 [maple / 598字] 12- 定时影片:蟹状星云的脉冲星风 [sfufoet / 545字] 11- 2006最佳电子产品 [skyreal / 606字] 10- 2007年10大最佳未来创新 [ant / 588字] 9- Windows下必不可少的30个开源软件 [skyreal / 556字] 8- Sony PS3 十宗罪 [skyreal / 573字] 7- 很酷 CSS特效 - Dashboard [yonnie / 703字] 6- 16个用得比较少的WinXP工具 [elfox / 817字] 5- 人体在真空中会爆炸吗 [sein / 991字] 4- 名人谈性 [sein / 605字] 3- NVIDIA发布最新Linux x86平台显示驱动程序 [yonnie / 520字] 2- 用 IE(!) 浏览地球 [maple / 509字] 1- 怎样控制你的梦 [elfox / 527字] [...]

  5. 5 煎蛋里的全文翻译(收藏) at Skyreal’s blog 说 : Reply to this comment
    2006-12-19 4:22 pm

    [...] 22- 时代杂志年度人物:你 [zuofei / 1818字] 21- 10个Linux操作的好习惯 [cunni / 1287字] 20- 我们去年的现在所不知道的100件事 [skyreal / 1139字] 19- 10种最危险的玩具 [ant / 654字] 18- XNA 10 步打造自己的 Xbox 360 游戏 [yonnie / 656字] 17- Google Earth “圣诞礼物大冒险”火热进行中 [sfufoet / 575字] 16- 让Google为你生成圆角图片 [sfufoet / 642字] 15- 15 个最强 007 装备 [maple / 704字] 14- 没有阳光的意大利小城 [sein / 606字] 13- Blogger 们,是不是该停下来了 [maple / 598字] 12- 定时影片:蟹状星云的脉冲星风 [sfufoet / 545字] 11- 2006最佳电子产品 [skyreal / 606字] 10- 2007年10大最佳未来创新 [ant / 588字] 9- Windows下必不可少的30个开源软件 [skyreal / 556字] 8- Sony PS3 十宗罪 [skyreal / 573字] 7- 很酷 CSS特效 - Dashboard [yonnie / 703字] 6- 16个用得比较少的WinXP工具 [elfox / 817字] 5- 人体在真空中会爆炸吗 [sein / 991字] 4- 名人谈性 [sein / 605字] 3- NVIDIA发布最新Linux x86平台显示驱动程序 [yonnie / 520字] 2- 用 IE(!) 浏览地球 [maple / 509字] 1- 怎样控制你的梦 [elfox / 527字] [...]

想说点什么呢...

XHTML: You can use these tags: <a href="" title=""> <img src="" alt=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>