快速业务通道

微妙的圆角参数 纯CSS圆角Tab

作者 佚名技术 来源 CSS编程 浏览 发布时间 2012-07-03

  Tab能算的上是网页里最为常见的组件,不论是作为内容切换,还是直接作为导航,形形色色的Tab扮演着各种交互角色。既然是重要的交互角色,那么无论其颜色还是形状都关乎整个交互过程——圆角是有意义的,在视觉上把Tab和其他分隔元素区别开来是必要的,就如同圆角按钮一样——可能很多时候圆角按钮都与整个设计风格格格不入,但却是必须的,因为交互元素的凸显比整个设计浑然一体更为重要。

  在IE67日渐边缘的如今,2012可能是前端重心转移最为明显的一年。于此也就不去考虑过时浏览器的兼容性了,对于它们,能看看内容就已经不错了,管它美不美观错不错位,时代在进步,往前看才不至于失业。

  今天琢磨了会写了下面这样一个CSS圆角Tab,和网上流行的圆角Tab不同之处在于:Tab底部也使用圆角过渡。

Pure CSS Rounded Tab Navigation

  我简单制作了一个DEMO,列出了HTML结构和CSS:

  Demo为达到底部使用圆角过渡的目的,关键就是下面两点:

  border-radius 的使用时显而易见的,这个属性在所有现代浏览器中工作良好,并且在无论是Firefox还是Chrome的更新里,都不再需要前缀。

  由于Tab下沿的圆角无法填补,需要用 li 的伪元素来定位填补,同时还需要 a 的伪元素来定位覆盖隐藏Tab下沿的边线。

  具体结构我绘制了一张框图,感觉上这种圆角的参数很微妙…

rounded tab html construction diagram

  代码里面值得一提的可能只有一条:

 

  .top-nav li.current:after{

  content:"\200B";

  position:absolute;

  display:block;

  width:100%;

  left:0;

  bottom:-5px;

  border-bottom:1px solid #fff;

  }

 

  那就是 content:"\200B";。其实之前的再谈清除浮动 里也已经提到,这个 U+200B 字符是一个“零宽度空白”,其本身就不可见,所以也就不需要在使用 visibility:hidden; 来隐藏内容。

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

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号