« FeedSky与腾信互动成功合并用户体验在Z-Blog上的一点应用 »

用CSS实现圆角效果的方法

一个优质的站点应该是很注重用户体验的,其中对用户来说最直接的感受不外乎这几个方面:

  1. 结构式清晰直观的,操作简单;
  2. 界面是美观大方的,视觉良好;
  3. 访问速度是快速的,等待时间短。

访问速度是一个十分重要的方面,只要稍微懂得一些站点设计知识的人就会知道,为了优化站点访问效率则要尽量减少对图片的使用,如果必须要用到图片,那么需要对图片进行优化处理,使其在不影响视觉效果的情况下是最小的。

同时我们知道,网页标准化设计提倡使用CSS控制页面的表现的,这样就在很大程度上减少了图片的下载次数从而大大降低了服务器的负荷、加快了页面的打开速度,提高了用户达体验。

其实,这还不是最理想的手段。——很多时候,我们还可以在以上基础上对页面进行进一步的优化处理。举个简单的例子,我们可以把很多的小图片集成到一张图片里面,然后用CSS控制需要显示的部分将其展示出来即可——实际上只需要下载一次。关于这方面的例子可以查看新浪网首页的图片运用。

另外,为了增强用户体验我们经常在页面中使用圆角效果。一般的情况下都会想到事先做好圆角效果的图片然后进行分割进行处理,这是最基本的做法。其实Firefox给我们提供了圆角的样式,十分好用——但是此处不推荐使用,因为IE浏览器目前还不支持,这就在显示效果上出现了差异。

下面很实用网站谈谈用CSS方法实现的圆角效果的办法。

原理:我们知道,把一张圆角效果的图片放大到一定的倍数的时候,我们会看到实际上每个边缘呈现出来的圆角(“毛边”效果)是按照一定的规律减少一定像素来实现的。在这个理论的指引下,我们就有了CSS实现圆角效果的办法。

下面给出最简单的一个例子,点击查看运行效果:

Source Code Example[代码示例]

另外本人用CSS模拟出百度知道CSS效果样式,点击这里查看效果。

通过这样的例子,我们多家练习,自然会制作出更多更复杂的圆角效果,比如这个例子,点击查看。



本文链接地址:http://www.henshiyong.com/archives/123.html

转载请注明:转载自很实用博客网站 [ http://www.henshiyong.com ]

发表评论(Open/Close):

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

  •  6.space  
  • b标签不是已经被遗弃了吗?怎可还用?
    很实用网站 于 2008-12-12 14:33:35 回复
    那你觉得还有比这个更简单的代码吗?
    就像现在很多人对Table布局表示不屑一样,其实在很多时候,效率显得更为重要,还要根据实际需要。而不是盲目随大流。
  • 2008-12-12 9:43:00 回复该留言
  •  4.Yacca  http://www.eemir3.com
  • 恩 我也是利用这个规律实现的圆角 但代码很烦 只用在了大的框架之中.
    很实用网站 于 2008-11-25 17:54:12 回复
    呵呵,这是个细活,需要一定耐心滴~~4
  • 2008-11-25 17:38:45 回复该留言

订阅博客

  • 订阅很实用网站
  • 通过Google订阅本站
  • 通过鲜果订阅本站
  • 通过抓虾订阅本站
  • 通过飞豆订阅本站
  • 通过电子邮件订阅本站

站内搜索

最新评论及回复

AD

最近发表

Powered By Z-Blog 1.8 Devo Build 80201

Copyright www.henshiyong.com. Some Rights Reserved.