一只人的异想世界:关注生活,关注网络

CSS小技巧:导航按钮圆角背景自动延伸2010-12-11

分类:前端开发 3,674次浏览 18条评论

今天要说的也是一个小技巧,比较适合CSS新手,高手可以直接省略!再次说明一下,因为我也算是新手,所以一些技术性问题都是以实用为主,可能有些简单!

先看一下淘宝网首页的注册登陆按钮:

如上图:一般情况下,拿我来讲,刚开始的时候,我都是切三个背景!如果网站导航有十来个并且都不一样的话,那我就切十个背景!当然那个时候还不知道CSS Sprites图片整合技术!现在知道了,但在这一点上用CSS Sprites整合技术还有点麻烦的!下面就来分析一下淘宝的做法:

第一步:当然,先做一个背景图:

第二步:先分析一下如何将背景自动延伸:

第三步:大家可以看一下效果 :

提示:你可以先修改部分代码再运行。

如果有什么问题的话可以直接留言的~~~

更多
转载文章请保留博客名称及本文链接,谢谢合作!转载已注明非原创文章请注明原文地址及本博客相关信息。

相关日志 »

18条评论 »

  1. CSS忘得差不多了!

  2. spray gun 说道:

    不错,这个圆角延伸多我有用,谢谢博主分享。

  3. 精油品牌 说道:

    虽然很想学,但是感觉这个东西貌似很难的,都是外文,看的头晕晕的

  4. 博客之家 说道:

    这个必须学会啊,太不错了

  5. 笑东风 说道:

    我曾经为了这个自适应宽度郁闷了好一段时间,早写出来就好了。

  6. 小魏 说道:

    改的真难看 我就不想评论了 还不支持宽屏的 难的很! 还有百度推广的黄色广告!

  7. u特尔 说道:

    效果不错~~

  8. bronze casting 说道:

    这样弄过以后的确蛮不错啊

  9. it博客 说道:

    博客很有感觉 ~

  10. 广州SEO 说道:

    我对CSS也不是很熟悉,一些复杂的就不会了,杯具

  11. 广州seo 说道:

    我就是不懂css

  12. 远酷车灯 说道:

    很不错,你博客很漂亮

  13. 学夫子 说道:

    这样就富有立体感了,

    • 庸水禅 说道:

      汗,这里面说的不是立体感,是圆角背景宽度自动延伸~~

      • 学夫子 说道:

        不过我怎么看着就像是立体感?圆角背景宽度自动延伸………………

        • 庸水禅 说道:

          立体感主要是图片做的有立体感!而圆角背景自动延伸是指用两个背景图片就可以适应不同宽度的背景!如果不这样的话,可能是一个宽度就需要一个背景图片,如果有N个宽度就需要N个背景图片 !

  14. 先看看 说道:

    看起来效果不错哦

发表评论 »