也说说圆角效果

      看了许多的精彩网站,当然是个有个精彩的!但圆角效果几乎是大家共同的喜好。原因可能是圆角,实现技术不难,对网站的整体效果改善却是显而易见的。
       我也有过一些尝试,但都不算完满的。从css加图片到纯css,再到js封装的圆角,对VML,对CSS Sprites(非圆角技术)的尝试。个个都好,但也个个都有不好的地方。
       css+图片:几乎可以实现所有想要的效果,但对图片的管理,后期的维护不易。更重要的是当使用了很多的相似效果,会增加图片的数量,也就会增加HTTP连接数,这对网站的加载性能和速度有一定影响。
       纯css:相当于用css来画出圆角,但这会增加许多的无语义div,XHTML的结构复杂了,也会对浏览器解析产生影响。但可以不再依赖于图片了。可以说是有利有弊吧~
       js封装圆角:相对于上面两种方法,这种似乎是最灵活的。将纯CSS的内容都封装进了js函数里,就可以灵活的运用到所需的地方,弧度,颜色都可以很灵活。但如果js被禁用了呢?那就什么都看不到了!当然,这对网站功能没有影响,不会造成可用性的问题。但把一个纯表现性的问题交由行为层去处理,到底好不好呢?我觉得还是有问题的~
       VML画矢量圆角:这个只是一个尝试吧~感觉不会比纯CSS简单。更为重要的是,这是一个由微软发布的,所以好像只有IE家族可以识别,那不就是又有一批人看不到了?
       CSS Sprites:这个不是圆角的实现技术,而是对网站整体的图片的一种管理方法。简单的说就是网页上所有的背景图片都放在一张大图片上,通过CSS的background的image repeat position等来实现定位。这可以有效的改善图片对网站的加载性能和速度的影响。这刚好也解决了我对css加图片实现圆角效果的不满(圆角图片当然也是背景图片~)。但是将小图片组合在一张大图片上可是不易啊,后期的修改维护更是!而且这种精确到px的定位,也在一定程度上限制了对图片的灵活使用。
        所以可以说都是好方法,就看你更看重什么,但也都还有遗憾。
        也许,永远也不会有最佳的解决吧,问题好像总是比办法多,选择适合你的,不断的改进,不断的发现,不断的创造,一定会有更好的~
        很高兴的是,在CSS3中有了做圆角的属性了 ——border-radius,我们也可以用css自己的办法来解决这个问题了!不过,在CSS2还不能被完全兼容使用的今天,去为CSS3喝彩,似乎是太早了,但至少我看到了CSS技术的人性化的发展,看到了更好的希望~
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值