网页制作CSS教程:自适应圆角

作者佚名技术来源 CSS技术浏览发布时间 2012-02-29

小三角的边框，pointer2 实现小三角的背景，此处利用了 border 来模拟小三角，这其中会遇到IE 6 的边框不透明 bug。另外，你也可以看看oocss的写法

宽度自适应利用的是 display: inline-block，注意IE 6&7 中的处理方式

#left:-2px 之前的 # 为 IE 6&7 hack，多写为*，这里用#一是表明偶的与众不同，二是微软的 Expression Web格式化 CSS 的时候若{}中出现*则会把代码搞乱，此处 IE 6&7 中出现了 margin-left 负值无效的 bug ，通过 position:relative 加 left: -2px 实现

可以看出：IE 6&7 bug 众多的特点在此例中表现的淋漓尽致！

最后的话

阮一峰老师也写过一篇《制作Gmail式按钮》，配合强大的 jquery 来实现按钮各种状态，最后的总结也很精彩，修改一下下：

虽然这种按钮（圆角）的视觉效果比较理想，有很多设计上的优点，但是局限性也很大。一方面，它需要大量的冗余代码，与语义网的原则相违背…

完美方案还是利用浏览器的自身特性提供对不同的浏览器分级支持，渐进增强（比如 IE 下显示为直角，对CSS 3支持较好的浏览器显示为圆角），这才是开发效率、可维护性、语义、性能的最佳平衡。

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

上一页 1 2 3

分享到：更多

你可能对下面的文章感兴趣

上一篇: CSS研究教程:类名的长命名和短命名下一篇: border:none;与border:0;的区别

关于网页制作CSS教程:自适应圆角的所有评论

随机推荐