原文:http://www.yuiblog.com/blog/2011/03/08/css-border-tricks-with-collapsed-boxes/
译文:https://www.ofcss.com/2011/03/10/css-border-tricks-with-collapsed-boxes-translation.html
作者:Thierry Koblentz (雅虎前端工程师)
用css边框实现小三角的技巧现在已经被越来越多的网站所采用,减少图片、减少HTTP请求的低碳设计越来越受欢迎。这次,来自雅虎的前端工程师又给我们带来了一组新的CSS边框设计技巧,原文列出了三种(双色背景导航条、水平排列元素间的点线分隔符、带左右箭头的垂直导航条),实际上除了这三种外,其范例页中还给出了额外的两种(水平分页导航条、垂直分组导航条)。以下是译文:
双色背景
原文并未直接给出IE6/7的处理说明,但是在范例页的样式中包含了IE6/7的Hack,这里我把它们摘出来放在下方,你也可以狠狠点击原文范例页面自行查看。
#menuBar-A { display: inline-block; text-align: center; border: 1px solid #cecece; } .child { display: inline-block; line-height: 0; height: 0; border-top: 1em solid #ffc; border-bottom: 1em solid #fdcf46; padding: 0 .6em; vertical-align: bottom; }
/* * IE6/7 Hacks * 用display:inline + zoom来模拟display:inline-block; * 基于IE对列表元素的样式渲染方式,不能对其使用垂直边框,因此用它的背景色代替 */ #menuBar-A { #display:inline; #zoom:1; #border:0; #padding:1px 0 1px 1px; #background:#BD9E43; } #menuBar-A li { #background:#ffc; #border:0; #margin-right:1px; #border-bottom:1em solid #fdcf46; } #menuBar-A a { #line-height:1; #border:0; #position:relative; #top:-.65em; _top:.3em; } #menuBar-A li:hover a { #color:#fff; } #menuBar-A a:hover, #menuBar-A a:active { _color:#333; } #menuBar-A .selected, #menuBar-A li:hover { #background:#c789d9; #border-bottom-color:#83358B; } #menuBar-A .selected a:hover, { #color:#fff; }
列表元素之间的点/线分隔符
这个例子只需要做少量的IE Hack就可以完美实现跨浏览器兼容。
ul.one, ul.two { margin-left: 0; display: inline-block; #display:inline; #zoom:1; height:12px; line-height:12px; padding:0; } li { float: left; display: inline; height: 2px; line-height: 2px; position: relative; top: .3em; } li.selected { font-weight:bold; } ul.two { border-left: 1px solid #333; } ul.one li { border-left: 2px solid #333; } ul.two li { border-right: 2px solid #333; } ul.one li.first-child, ul.two li.last-child { border: 0; } a { color: #000; padding: .4em .9em; #position:relative; }
左右三角图标
原文并未直接给出IE6/7的处理说明,但是在范例页的样式中包含了IE6/7的Hack,这里我把它们摘出来放在下方,你也可以狠狠点击原文范例页面自行查看。
#box { line-height: 0; height: 0; border: .4em solid transparent; border-left-color: #333; border-right-color: #333; padding: 0 .3em; display: inline-block; }
/* IE6/7 Hacks */ #menuBar-C { #display:inline; #zoom:1; #width:10em; } #menuBar-C li { #padding:0; #margin:.4em; #list-style-type:none; #height:0; #border-top:.4em solid #fff; #border-bottom:.4em solid #fff; #border-left:.4em solid #2F2876; #border-right:.4em solid #2F2876; _position:relative; } #menuBar-C a { #border:0; #height:auto; #line-height:1; #top:-.4em; #position:relative; _position:absolute; #left:-.4em; } #menuBar-C li:hover { #border-left:.4em solid #f60; }
IE6与透明边框
IE6不支持用于边框颜色的“transparent”关键字。如果在IE6下指定边框颜色为透明(transparent),IE6将会绘制成黑色边框。
解决办法是使用 chroma filter,它可以让对象内容中的指定颜色显示为透明色(译者注:针对IE6,还有其它的解决办法,参见IE 6 的边框不透明 bug)。例如,创建一个向右箭头,可以这样做:
#Box { height: 0; width: 0; border: 10px solid transparent; font-size: 0; _border-color: pink; _filter: chroma(color="pink"); border-left-color: #333; }
规则中的font-size的定义是为了解决IE6下自动撑开元素高度的问题。
译注:
- 原文给出的css样式和html结构不对应,在译文中已做修正。
- 原文作者对IE6/7的注释采用两种方式:*号引导属性名、以及规则最后一个选择符带逗号,在译文中我统一使用了#号引导属性名的方式。为了部分原来不清楚这些hacks方式的读者,下面再把作为本文背景知识的IE6/7、IE6 Hacks符号简单说明一下:
- IE6/7 均支持以“*”号、“#”号引导的属性名称,其它浏览器不支持。因此,针对IE6/7的Hack可以写为:
#zoom:1
或*zoom:1
- IE6/7 均支持最后一个选择符后面跟逗号的规则,其它浏览器不支持。因此,针对IE6/7的Hack也可以写为:
.selector, {zoom:1}
- IE6 支持以下划线引导的属性名,其它浏览器不支持。因此,针对IE6的Hack可以写为:
_width:600px
- IE6/7 均支持以“*”号、“#”号引导的属性名称,其它浏览器不支持。因此,针对IE6/7的Hack可以写为:
以上只是用边框实现“无图化”设计的众多技巧中的一小部分,实际上我们还可以做得更多。如果有兴趣,你可以继续阅读:
作者:小李刀刀
原文链接:[译]CSS边框实现“无图化”设计
裁纸刀下版权所有,允许非商业用途转载,转载时请原样转载并标明来源、作者,保留原文链接。