Google隐藏的超强圆角效果 's

admin 2017年4月23日12:40:13评论312 views字数 668阅读2分13秒阅读模式
摘要

来源:GSeeker
  在设计网页的时候,要实现圆角效果,有N种方法,随便Google一下就可 找到很多 。但如果我们不想自己动手写这么多代码,又或者根本不想利用自己服务器上的图片,那该怎么办呢?不怕,因为Google本身就隐藏着一个极强大的圆角效果,我们只需要直接把它挖出来用就行了。
  Zach 是个圆角效果爱好者(via Philipp ),因此每次看到某个网页上有漂亮的圆角,他都会习惯性地查看一下源代码,看看是怎么做出来的。这一次他发现Google在 Groups beta 里使用的圆角效果相当不错,于是他在源代码里找了一下,发现原来Google本身就有一个强大的圆角效果,并且它是现成的,你可以直接使用它。
  下面就是Google的圆角图片的地址:
http://google.com/groups/roundedcorners?c=0000FF&bc=white&w=40&h=40&a=tr
  效果如下:

  你可以自定义圆角图片的属性:
1.c表示圆角图片的颜色;
2.bc表示圆角图片的背景颜色;
3.w和h分别表示圆角图片的宽和高;
4.a表示圆角产生的方向,tl是左上角,tr是右上角,bl是左下角,br是右下角。
  比如我们可以调整上面的属性参性,做出一个"宽和高均为100px、位于右上角的蓝色圆角图片":

  可见你不需要写额外的代码,也不需要使用自己空间里的图片,你要做的只是在设计网页的时候,直接调用Google现成的圆角图片,并且根据自己的需要定义它。当然,这样做的缺点是当Google服务器无法访问时,圆角图片就显示不出来了。

来源:GSeeker
  在设计网页的时候,要实现圆角效果,有N种方法,随便Google一下就可 找到很多 。但如果我们不想自己动手写这么多代码,又或者根本不想利用自己服务器上的图片,那该怎么办呢?不怕,因为Google本身就隐藏着一个极强大的圆角效果,我们只需要直接把它挖出来用就行了。
  Zach 是个圆角效果爱好者(via Philipp ),因此每次看到某个网页上有漂亮的圆角,他都会习惯性地查看一下源代码,看看是怎么做出来的。这一次他发现Google在 Groups beta 里使用的圆角效果相当不错,于是他在源代码里找了一下,发现原来Google本身就有一个强大的圆角效果,并且它是现成的,你可以直接使用它。
  下面就是Google的圆角图片的地址:
http://google.com/groups/roundedcorners?c=0000FF&bc=white&w=40&h=40&a=tr
  效果如下:
Google隐藏的超强圆角效果  's
  你可以自定义圆角图片的属性:
1.c表示圆角图片的颜色;
2.bc表示圆角图片的背景颜色;
3.wh分别表示圆角图片的宽和高;
4.a表示圆角产生的方向,tl是左上角,tr是右上角,bl是左下角,br是右下角。
  比如我们可以调整上面的属性参性,做出一个"宽和高均为100px、位于右上角的蓝色圆角图片":
Google隐藏的超强圆角效果  's
  可见你不需要写额外的代码,也不需要使用自己空间里的图片,你要做的只是在设计网页的时候,直接调用Google现成的圆角图片,并且根据自己的需要定义它。当然,这样做的缺点是当Google服务器无法访问时,圆角图片就显示不出来了。

免责声明:文章中涉及的程序(方法)可能带有攻击性,仅供安全研究与教学之用,读者将其信息做其他用途,由读者承担全部法律及连带责任,本站不承担任何法律及连带责任;如有问题可邮件联系(建议使用企业邮箱或有效邮箱,避免邮件被拦截,联系方式见首页),望知悉。
  • 左青龙
  • 微信扫一扫
  • weinxin
  • 右白虎
  • 微信扫一扫
  • weinxin
admin
  • 本文由 发表于 2017年4月23日12:40:13
  • 转载请保留本文链接(CN-SEC中文网:感谢原作者辛苦付出):
                   Google隐藏的超强圆角效果 'shttps://cn-sec.com/archives/49094.html
                  免责声明:文章中涉及的程序(方法)可能带有攻击性,仅供安全研究与教学之用,读者将其信息做其他用途,由读者承担全部法律及连带责任,本站不承担任何法律及连带责任;如有问题可邮件联系(建议使用企业邮箱或有效邮箱,避免邮件被拦截,联系方式见首页),望知悉.

发表评论

匿名网友 填写信息