无懈可击的CSS圆角技术

80酷酷网    80kuku.com

  

  要一个宽度不固定的框,事情变得有些复杂了。宽度不固定,就意味着这个框在水平和垂直方向都有足够灵活的变化。

  为什么说这更难一些呢?因为它需要对四张图片的合适安置——每个圆角用一张。每个圆角都要独立出来,以便框能够在各个方向伸展。于是,四张图片就意味着需要四个HTML对象来作为背景图片的载体。

  有一些实现办法包括在样式表中使用“生成内容”,即使用:before和:after伪类来为单独的一个对象加上多张背景图。这种方法的问题在于,在编写本书的时候,InternetExplore(IE)还不支持“生成内容”,因些相当大数量的用户就将无法看到圆角效果。

  那怎么办呢?如果一个固定的宽度已经预先确定,那就能很容易地使用本章上一节中给出的那种方法,只背景图片:一张用于显示顶部的左右圆角,另一张显示底部的左右圆角。准备好两个HTML对象来做图片载体并不是难题。可是当要求实现宽度不固定的框时,为了让IE用户也能看到一样的设计效果,那就是加上额外的HTML代码了。

  圆角化

  以下是Web标准的能人,也是本书的技术编辑EthanMarcotte在解决BrowseHappy网站所面临这样的问题时的做法(图5-15) http://browsehappy.com

  无懈可击的圆角技术

  图5-15BrowseHappy是一个旨在帮助人们学习使用能取代InternetExplorer在Web标准兼容的浏览器的网站

  Ethan用了一个圆角框来显示用户“已经切换使用”的某个兼容Web标准的浏览器,包括软件名称和图标(图5-16)。

  无懈可击的圆角技术

[1]       



分享到
  • 微信分享
  • 新浪微博
  • QQ好友
  • QQ空间
点击: