border-radius

那些CSS的细节问题(4) —— 圆角边框和outline

能写文章,说明时间略有空余,这应该算好事吧~看了下草稿箱,果断还是选这篇先写完,因为和前面的几篇有关联。在之前的 圆角响应区 以及 圆角边框和overflow 中,已经讨论过圆角边框的一些问题,本篇如题,是关于圆角边框和 outline 的,这里也正好回答了一丝在圆角响应区里提出的“为什么不在做DEMO的时候用 outline 描画边缘?”的问题。在写那篇之前做DEMO的时候,我是用了 outline 的,但注意到 outline 的一些问题之后,又把它从DEMO里移除了,并起草了这篇文章的标题,…

那些CSS的细节问题(2) —— 圆角响应区

之前《那些CSS/JavaScript的细节问题》我都是凑足3个再开始写,现在发觉,很多时候要凑出3个古里古怪的问题还真不是件易事~ 有的时候想到要写一个问题,想等凑多些再写,但又总是一直拖着,好端端的讨论话题都过期了。更糟糕的是,往往好不容易凑足了数量,结果之前要写的东西居然又模糊不清了...以后,在一定时间里凑不出数量的话,也只好先写起来再说:) 所以今天,就只有一个问题,关于边框圆角:圆角边框是否影响元素的响应区域? 想象一下,一个 div 通常被我们认知为一个盒子(box),现在在它的周围有一个圆角边框,那么在这个矩形盒子的四个角上,必然会出现一些空隙(特别是当这个圆角矩形变成一个圆时候)。那么对于这个元素而言,…

纯CSS圆角Tab

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