原文:http://www.yuiblog.com/blog/2011/03/08/css-border-tricks-with-collapsed-boxes/
译文:[cref css-border-tricks-with-collapsed-boxes-translation //ofcss.com/?p=1078]
作者: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;
}
<ul id="menuBar-A">
<li><a href="#">About Usa>li>
<li class="selected"><a href="#">Contact Usa>li>
<li><a href="#">Servicesa>li>
<li><a href="#">Productsa>li>
ul>
/*
* 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;
}
<div id="menuBar-B">
<ul class="one">
<li class="first-child"><a href="#">About Usa>li>
<li class="selected"><a href="#">Contact Usa>li>
ul>
<ul class="two">
<li class="last-child"><a href="#">Servicesa>li>
<li><a href="#">Productsa>li>
ul>
div>
原文并未直接给出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;
}
<ul id="menuBar-C">
<li><a href="#">About Us</a></li>
<li class="selected"><a href="#">Contact Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
</ul>
/* 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不支持用于边框颜色的“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;
}
<p>
规则中的font-size的定义是为了解决IE6下自动撑开元素高度的问题。<h4>
译注:
</h4>
<ol>
<li>
原文给出的css样式和html结构不对应,在译文中已做修正。<li>
原文作者对IE6/7的注释采用两种方式:*号引导属性名、以及规则最后一个选择符带逗号,在译文中我统一使用了#号引导属性名的方式。为了部分原来不清楚这些hacks方式的读者,下面再把作为本文背景知识的IE6/7、IE6 Hacks符号简单说明一下:<ul>
<li>
IE6/7 均支持以“*”号、“#”号引导的属性名称,其它浏览器不支持。因此,针对IE6/7的Hack可以写为:<br /><font color="#ff0000">#</font>zoom:1或<font color="#ff0000">*</font>zoom:1<li>
IE6/7 均支持最后一个选择符后面跟逗号的规则,其它浏览器不支持。因此,针对IE6/7的Hack也可以写为:<br />.selector<font color="#ff0000">, </font>{zoom:1}<li>
IE6 支持以下划线引导的属性名,其它浏览器不支持。因此,针对IE6的Hack可以写为:<br /><font color="#ff0000">_</font>width:600px;
</li></ul>
</li></ol>
<p>
以上只是用边框实现“无图化”设计的众多技巧中的一小部分,实际上我们还可以做得更多。如果有兴趣,你可以继续阅读:<p>
《<a href="http://www.99css.com/archives/146">自适应圆角</a>》<p>
《<a href="http://www.zhangxinxu.com/wordpress/?p=794">CSS Border三角、圆角图形生成技巧</a>》
</p>