[译]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>
- golang 标准库间依赖的可视化展示
- 静态变量和实例变量的区别(配图解释专业术语,通俗易懂)
- 论golang是世界上最好的语言
- 用shape画内圆外方,形成一个圆形头像
- 在Go中对gRPC+ProtoBuf与Http+Json进行基准测试
- Achartengine.jar绘制动态图形一 --饼图
- 工具| 关于Python线程和队列使用的小思考
- Java中list<Object[]>、list<Student>、list<Map<String,String>>排序
- Java-单例模式详解(图文并茂,简单易懂)
- Fragment生命周期及实现点击导航图片切换fragment,Demo
- 《GO IN ACTION》读后记录:GO的并发与并行
- SharedPreferences 存List集合,模拟数据库,随时存取
- Servlet与Jsp的结合使用实现信息管理系统一
- Mac下nvm管理node.js版本问题
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例