rounded tab

纯CSS圆角Tab

Tab能算的上是网页里最为常见的组件,不论是作为内容切换,还是直接作为导航,形形色色的Tab扮演着各种交互角色。既然是重要的交互角色,那么无论其颜色还是形状都关乎整个交互过程——圆角是有意义的,在视觉上把Tab和其他分隔元素区别开来是必要的,就如同圆角按钮一样——可能很多时候圆角按钮都与整个设计风格格格不入,但却是必须的,因为交互元素的凸显比整个设计浑然一体更为重要。 在IE67日渐边缘的如今,2012可能是前端重心转移最为明显的一年。于此也就不去考虑过时浏览器的兼容性了,对于它们,能看看内容就已经不错了,管它美不美观错不错位,时代在进步,往前看才不至于失业...... 今天琢磨了会写了下面这样一个CSS圆角Tab,和网上流行的圆角Tab不同之处在于:Tab底部也使用圆角过渡。 我简单制作了一个DEMO,列出了HTML结构和CSS:Demo 为达到底部使用圆角过渡的目的,关键就是下面两点: border-radius 的使用时显而易见的,…