推荐好文：无懈可击的CSS圆角技术

日期：2007年9月14日作者：查看:[大字体中字体小字体]

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

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

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

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

　　圆角化

　　以下是Web标准的能人，也是本书的技术编辑Ethan Marcotte在解决Browse Happy网站所面临这样的问题时的做法（图5-15）　http://browsehappy.com

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

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

　　图5-16 这个圆角矩形框可以往任何方向扩展

　　Ethan 没有给框设定固定的宽度，而使用了一种对前面提到过的“滑动门”技术的变通方法，使得当内容文字增多（或增大）时，框在水平和竖直方向都能伸缩（图5-17）。

　　图5-17 当文字变大时，框会在水平和竖直方向扩展，同时能保持圆角形状不变

　　我们现在来基于Ethan所使用的技术，构建另一个示例，它将是一个具有真正灵活性的框，能容纳其内部的任何东西。

1.HTML代码结构

　　如我先前提到过的，要实现一个在每个方向都灵活的框，面临的不幸事实是我们需要添加额外的代码。这些额外的代码是独立引用框的四角的图片所必须的，这样它才能根据需要在四个方向扩展。

　　注意：因为有些地方已经超过了本章要讨论的范围，所以为了让例子简单，这里对HTML代码做了一些修改。本来，这个圆角矩形框是一个“定义列表”对象的一部分，该列表还包括有“切换人”的姓名以及其它信息。这是一个运用定义列表的聪明又巧妙的方法－－可以去查看http://browsehappy.com 的页面源码获知更多细节。

　　要谨记，我们应该使用最少的HTML对象来作为背景图片的载体，以下是我们创建的HTML代码：

<div class="container">
<p class="desc">This box is:</p>
[1] [2] [3] [4] [5] 下一页
推荐好文：无懈可击的CSS圆角技术相关文章：
·上网冲浪选谁更好七款主流网页浏览器评测
·网站优化的几个好经验
·哪种最好？6种在线杀毒扫描软件大比拼
·如何做好图片网站的搜索优化
·用消除人声好插件DeFX 电脑上唱卡拉OK
·学好Word文档管理
·保护好你的Wi-Fi网络
·用SNMP设置来管理好Cisco设备
·用好Excel 2007六则小技巧帮你节省时间
·迅雷把好关通过下载传播病毒难上加难
推荐好文：无懈可击的CSS圆角技术相关软件
·做人做事好心态
·做人做事好方法
·离奇神秘的情感遭遇《说好一言为定》
·秦林新作《管好你的嘴》
·做好每一个自己
·三好彻推理小说作品集》
·台湾“皇冠大众小说奖”百万首奖作品：《请把门锁好》
·《自己是最好的医生》
·好莱坞影星肖像100张（附简介）2-1
·做女人挺好（图集）

上一篇:修改Windows Vista操作系统登陆声效

下一篇:南方周末：攻击事件中国黑客被“黑”？

特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作
者.文章版权归文章原始作者所有.对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转
载的文章有版权问题请联系编辑人员,我们尽快予以更正. 转载请注明来源：http://www.hackhome.com

推荐好文：无懈可击的CSS圆角技术

精品推荐

热点TOP10

特别推荐