首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >[译]CSS边框实现“无图化”设计

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

作者头像
小李刀刀
发布2018-03-02 16:46:59
8230
发布2018-03-02 16:46:59
举报
文章被收录于专栏:PHP 开发PHP 开发

原文: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>
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2011-03-10,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 双色背景
  • 列表元素之间的点/线分隔符
  • 左右三角图标
  • IE6与透明边框
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档