关闭

让Google为你生成圆角图片

363人阅读 评论(0) 收藏 举报

注:此文首发于煎蛋,原作者为sfufoet (专栏)。

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

 

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:2684次
    • 积分:67
    • 等级:
    • 排名:千里之外
    • 原创:3篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章存档