[译]CSS边框实现“无图化”设计

原文: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与透明边框

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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏web前端

用jQuery+easyUI遇到的几个插件与文件详解

很早就开始跟着老师学习jQuery课程,那时候是要求熟练使用jQuery中的easyUI插件中的控件,包括textbox、combobox、panel、chec...

18910
来自专栏王二麻子IT技术交流园地

HTML出现错位的问题

引起网页HTML显示错位的几个常见问题:          1、在HTML代码中缺失元素的开始或结束标签          2、CSS设置中对边界、填充或边框的...

2375
来自专栏腾讯社交用户体验设计

SVG fallback 及可读性

1413
来自专栏CDA数据分析师

那人的Excel技巧好烂,他做1个小时,别人29秒搞定

本文为简书作者傲看今朝原创,CDA数据分析师已获得授权 ”智能表格“在Excel中就是叫表格,恐怕是Excel当中最不起眼最受人忽视,却极其实用的功能之一,可以...

2185
来自专栏小程序之家

如何在小程序中实现视频播放

在如何使用小程序媒体组件这篇文章中,我们简单介绍了video视频组件的使用,这篇文章中,将对视频播放做一些补充,同时介绍API的使用。

16.3K3
来自专栏九彩拼盘的叨叨叨

九彩拼盘的前端技能

1142
来自专栏13blog.site

Markdown语法讲解及MWeb使用教程

写了一个月的博客,忽然感觉Markdown编辑器比较好用,于是就下载了一个本地的Markdown编辑软件学习了一下,刚好软件里自带了一篇英文的指示文档,顺便翻译...

3044
来自专栏程序员互动联盟

【专业文章】六种常见的HTML5写法误用(一)

一、不要使用section作为div的替代品 人们在标签使用中最常见到的错误之一就是随意将HTML5的<section>等价于<div>——具体地说,就是直接用...

3435
来自专栏数据小魔方

这种自带黑科技的R包,请给我来一打

今天要介绍的这个R包,有些特别! 它即不能做可视化,也不能用来抓数据! 它的核心功能是抓拍,对,你没听错,就是抓取,和狗仔差不多! 而且专门抓拍网页,有点儿类似...

38416
来自专栏青玉伏案

窥探Swift编程之在Playground上尽情的玩耍

  自从苹果公司发布Swift的时候,Xcode上又多了一样新的东西---"Playground"。Playground就像操场一样,可以供我们在代码的世界里尽...

2178

扫码关注云+社区

领取腾讯云代金券