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