CSS 屏蔽 Webkit 输入框高亮

下面是默认情况下，Webkit 浏览器里输入框获取焦点时的情况。

我们可以发现 Webkit 对输入框的高亮已经使页面呈现出的样式和设计样式不同了。如果你的网站已经对输入框获取焦点时定义了特殊的样式，不妨把 Webkit 这个多此一举的功能屏蔽掉。加上下面的 CSS 就可以轻松地把高亮去掉。

1
2
3
4
5
6
7

input {
	outline: none;
}
/* 屏蔽文本框高亮 */
textarea {
	outline: none;
}

CSS 屏蔽 Webkit 文本框缩放

Webkit 的文本框缩放功能原本是方便用户进行大量文本输入而设计的，但有时果度的缩放会造成下图的效果，打乱了页面的布局。如果你的网站已经为用户提供了足够大的空间让用户进行输入，那么你可以屏蔽这个功能，用 CSS 有两种方法。

CSS 2.1 的方法：

原理：限制文本框的最大宽度和最大高度，使其和设计的大小一样。

1
2
3
4
5

textarea {
	width: 400px;
	max-width: 400px;
	height: 400px;
	max-height: 400px;

CSS3 的方法：

通过 resize 属性禁止对元素进行缩放，因为 Chrome 对 CSS3 支持良好，因此推荐使用这个方法。

1
2
3

texearea {
	resize: none;
}

Related Posts

• CSS 多个子框架居中
• CSS3 灵活的盒子模型(Flexible Box Module) – 1
• 网页圆角的取舍
• 10个节约开发时间的CSS技巧
• 纯CSS打造斜角

泛选择器（*）

在 jQuery 选择器里，“*” 号是一个通配符，表示所有。例如：

1

$("*").css("border","3px solid red")

上面的一句表示遍历页面里的所有容器，并且全部赋予一个线宽为 3px 的红色实线边框。还有一种情况是我们只需要对某些容器里的内容进行操作，我们可以这样写：

1

$("#test").find("*").css("border","3px solid red")

上一句只对 ID 为 test 的容器里的子容器产生效果，为它们加上线宽为 3px 的红色实现边框。

:animated 选择器

:animated 选择器是用来选择当前执行 jQuery 动画的元素的，严格来说是一个特征过滤器。例如：在空 HTML 文档里建一些 Div ，其中一个 ID 为 mover ，然后编写以下的 jQuery 语句

1
2

$("#mover").slideToggle("slow", animateIt);
$("div:animated").toggleClass("colored");

上面的代码执行后将先找到 ID 为 mover 的元素，并不断地进行展开和收缩的动画。然后浏览器遍历页面里所有的 Div 标签，如果该 Div （在这个例子里也就是 ID 为 mover 的 Div 了）正在执行动画的话，jQuery 将为这个 Div 加上 class=”colored”。具体的 Demo 可以看这个页面。

属性选择器

jQuery 的属性选择器是其所有选择器最强大的一个，也是最灵活复杂的，具体情况还可以继续进行细分。

属性字头选择器（Attribute Contains Prefix Selector）

jQuery 属性字头选择器的使用格式是 jQuery(‘[attribute|=value]‘) ，例如 jQuery(‘[herflang|=en]‘) 这句代码执行时将会选择文档中所有含有 herflang 属性，并且 herflang 的值以 “en” 开头的元素，即使 “en” 后面紧跟着连字符 “-” 也能进行选择。

属性开头选择器（Attribute Starts With Selector）

jQuery(‘[attribute^=value]‘) ，用于选择属性的值以某个字符串开头的元素，但和 jQuery(‘[attribute|=value]‘) 的区别是，如果 value 的后面是一个连字符的话，这个元素不会被选择。例如 jQuery(‘[rel^=no]‘) 将会选择所有 rel 的值以 “no” 开头的元素，但类似于 rel=”no-****” 的元素不会被选择。

属性包含选择器（Attribute Contains Selector）

基本使用方法为 jQuery(‘[attribute*=value]‘)，例如 jQuery(‘[rel*=no]‘)，表示所有带有 rel 属性，并且 rel 的值里包含子字符串 “no” 的元素（如 rel=”nofollow”，rel=”yesorno” 等等）都将会被选择。

属性单词选择器（Attribute Contains Word Selector）

jQuery(‘[attribute~=value]‘)，这个选择器的特别之处在于 value 的值只能必须是一个独立的单词（或者是字符串），例如 jQuery(‘[rel~=no]‘) ，此句在执行的时候会选择带有 rel=”yes or no” 的元素，但不会选择带有 rel=”yesorno” 的元素。这个选择器可以看做属性包含选择器的补充品，用于需要进行严格匹配的时候。

属性结尾选择器（Attribute Ends With Selector）

jQuery(‘[attribute$=value]‘) ，用于选择特定属性的值以某个字符串结尾的元素，例如 jQuery(‘[rel$=no]‘) 将会选择 rel 属性的值以 “no” 结尾的元素。

属性均等选择器（Attribute Equals Selector）

jQuery(‘[attribute=value]‘) ，只选择属性的值完全相等的元素，如：jQuery(‘[rel=nofollow]‘)，则只选择 rel=”nofollow” 的元素，差一点都不行！

属性非等选择器（Attribute Not Equal Selector）

jQuery(‘[attribute!=value]‘) ，和 :not([attr=value]) 的效果一样，用于选择属性不等于某个值的元素，例如 jQuery(‘[rel!=nofollow]‘)，所有 rel=”nofollow” 的元素都不会被选择。

按钮选择器（:button Selector）

jQuery(‘:button’) ，所有的 <input type=”button”> 和 <button> 元素都会被选择。

Checkbox 选择器（:checkbox Selector）

jQuery(‘:checkbox’) ，所有的 <input type=”checkbox”> 元素都会被选择。

Checked 选择器（:checked Selector）

jQuery(‘:checked’) ，可以看做是 Checkbox 选择器的补充，用于选择所有已经被勾选的 Checkbox 对象。

子元素选择器（Child Selector）

jQuery(‘parent > child’)，只选择 parent 的子元素（下一级元素），不对子元素以下的元素进行选择。

近期忙，少更新。

Related Posts

• CSS 屏蔽 Webkit 浏览器 input 高亮和 textarea 缩放
• 利用 Yahoo Pipes 和 jQuery 做一个 RSS 挂件
• 为 WordPress 3.0 的自定义菜单链接添加栏目图标
• CSS 多个子框架居中
• CSS3 灵活的盒子模型(Flexible Box Module) – 2

WordPress 3.0 为了增强 CMS 功能，加入了自定义菜单的功能，除了定义菜单项目外，还可以菜单定义各个项目的 CSS Class。我们可以利用这个功能来为菜单项目添加一个个性图标。

在 WordPress 3.0 的 Appearance（外观）-> Menus（菜单）面板里我们可以看到自定义菜单的设置，首先点击“Creat Menu”，再在左栏勾选需要的菜单项目后点击“Add to Menu”可以把勾选的项目添加到刚才建立的自定义菜单里。这是展开菜单项可以看到相关项目的参数。

默认情况下能修改的参数很少，这时点击屏幕左上角的“Screen Options（屏幕参数）”，把“Show advanced menu properties（显示高级菜单属性）”里的项目全部勾选，我们就可以看到更多的参数。以本文题图为例，为各个项目分别加上 Home、Advertise、Contact、Archives 和 About 的 CSS Class，这样在前台调用菜单时，这些项目将拥有一个自定义的 CSS Class，接下来我们可以通过 CSS 为这些项目加上图标。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

#header ul.navigation li a.home {
	background:url("images/home.png") no-repeat 0 1px transparent;
}
#header ul.navigation li a.about {
	background:url("images/about.png") no-repeat 0 0px transparent;
}
#header ul.navigation li a.advertise {
	background:url("images/advertise.png") no-repeat 0 0px transparent;
}
#header ul.navigation li a.archive {
	background:url("images/archive.png") no-repeat 1px 2px transparent;
}
#header ul.navigation li a.contact {
	background:url("images/contact.png") no-repeat 0 3px transparent;
}

在 WordPress 3.0 之前的版本里，我们可以通过 JavaScript 等方法为菜单项目加上图标。原理是获取菜单项的 title 值，再为它加上一个和 title 值相同的 Class，在 jQuery 里可以这样写：

1
2
3
4
5

$(document).ready(function(){
	$('ul.navigation li a').addClass(function() {
		return $(this).attr('title');
	});
});

Related Posts

• 为 WordPress 3.0 自定义菜单添加描述
• 主题发布：Inpad
• 自定义默认Gravatar头像
• 显示每篇文章的日期
• 为主题添加AJAX提交评论功能

但如果我们要让多个子框架居中，并且等分父框架剩余的空间的话，我们对所有子框架使用 CSS box-align: center 来实现这种效果。

可是目前还有相当一部分主流浏览器不支持 box-align 属性，那么我们应该如何编写 CSS，使这种效果能兼容大部分的浏览器呢？

通常的方法

为了使多个 block 级元素排列在同一行里，我们习惯使用 float 属性使子框架浮动，然后利用 margin 属性让每一个子框架之间都留出一些空白的间距。可是这样做会触发经典的 IE6 双倍 margin BUG，这样反而要投入额外的时间去调试 IE6 的 Hack。

虽然我们还可以通过 display: inline 来避开 IE6 的 BUG，但我们仍然需要调整这些子框架间的间距，防止最后一个自框架被挤到下一行。

改变子框架级别并且控制剩余的空白

使用 float 和 margin 来让多个子框架居中并且等分父框架剩余空间的做法缺点很多。为了避开这些缺点，我们还可以使用另一种方法：把子框架的级别改为 inline-block ，并且通过 letter-spacing 属性 控制自框架之间的间距。

假设在一个父框架里有四个 block 级的子容器，每个子容器的大小均为 100px x 100px。为了让这些子框架能排列在同一行内，我们可以把它们改为 inline-block 级，由于子框架和父框架之间并没有其它的内容，应此要控制子框架的空间分配将易如反掌。姑且假设父框架 id=parent，子框架 class=child，那么 CSS 可以这样写：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

#parent {
	width: 615px;
	border: solid 1px #aaa;
	text-align: center;
	font-size: 20px;
	letter-spacing: 35px;
	whitewhite-space: nowrap;
	line-height: 12px;
	overflow: hidden;
}
.child {
	width: 100px;
	height: 100px;
	border: solid 1px #ccc;
	display: inline-block;
	vertical-align: middle;
}

在这段样式里，#parent 的 text-align、letter-spacing、white-space、overflow 和 .child 的 vertical-align、display 这些属性是实现预想效果的关键，下面解释一下这些属性起了什么作用。

• text-align：使 #parent 里的所有内容都居中
• letter-spacing：控制每个子框架之间的空白大小
• white-space: nowrap：防止最后一个子框架被挤到下一行
• overflow: hidden：隐藏超出 #parent 范围的内容
• vertical-align: middle：使所有子框架都垂直居中
• display: inline-block：是所有子框架都排列在同一行，并且保持 block 级元素的特性

兼容 IE

在今时今日，老版本的 IE 浏览器已经成为网页设计师的心头大恨，虽然上面的 CSS 能兼容 IE8，但由于 IE6 和 IE7 并不完全支持 inline-block 级元素，因此我们还需要写下面的一段 Hack，确保在 IE6 和 IE7 里能保持和现代浏览器一致的效果。

1
2
3
4

.child {
	*display: inline;
	*margin: 0 20px 0 20px;
}

本文所举例子的最终效果可以看这个 DEMO。

后记

本文所举的例子虽然只有短短的两句 IE Hack，但在实际开发中大家要写的 Hack 肯定要多很多，因此淘汰老版本 IE 的任务已经刻不容缓。我听过很多人说：“我不用 IE 浏览器的，我用傲游和世界之窗”，在这里我提醒一下大家，对这些无法解释清楚的人，我们可以简单地和他们说：“凡是能用支付宝的浏览器都是落后的，请放弃使用。”。

Related Posts

• CSS 屏蔽 Webkit 浏览器 input 高亮和 textarea 缩放
• CSS3 灵活的盒子模型(Flexible Box Module) – 1
• 网页圆角的取舍
• 10个节约开发时间的CSS技巧
• 纯CSS打造斜角

在 CSS2 里，要把一个容器分成三栏的话比较简便的方法是把三个字容器的 width 都设为 33.3%，这种方法无法把父容器的宽度完全填充，在父容器的宽度足够大的时候留下的空白会是页面变得很不美观。令一种方法是通过计算把子容器的 width 都设为一个固定值，这种方法比较繁琐，而且在一些情况下无法使子容器的宽度完全相等（例如父容器的宽度为 100px）。当我们迈入 CSS3 时代后，这种问题将迎刃而解。

box-flex 属性

box-flex 应用在需要分栏的子容器上，它的值必须是一个自然数或小数。当父容器里有多个带有 box-flex 属性的子容器时，浏览器将会把这些子容器的 box-flex 的值相加，然后根据它们各自的值占总值的比例，再在父容器剩余的空间里分配它们的尺寸（说的啰嗦，其实一看 DEMO 就懂）。也就是说，我们需要注意 box-flex 属性必须在父框架具有具体的 width 或者 height 的时候才能正常渲染。

灵活的尺寸

在这个例子里，我将使子容器2和3的宽度相等，并且子容器1的宽度为它们的两倍。由于使用了 box-flex 属性，如果再插入一个子容器的话，已有的容器宽度将会自动调整。CSS 如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

#exemple4 .content{
	-moz-box-orient : horizontal;
	-webkit-box-orient : horizontal;
	box-orient : horizontal;
}
#exemple4 .v1{
	-moz-box-flex: 2;
	-webkit-box-flex: 2;
	box-flex: 2;
}
#exemple4 .v2{
	-moz-box-flex: 1;
	-webkit-box-flex: 1;
	box-flex: 1;
}
#exemple4 .v3{
	-moz-box-flex: 1;
	-webkit-box-flex: 1;
	box-flex: 1;
}

效果可以看这个 DEMO。大家也可以下载这个 DEMO，尝试添加一个新的子容器，它是不是自动适应了。

自适应子容器和固定尺寸子容器的混合使用

box-flex 的另一个强大之处是可以和具有固定尺寸的容器混合使用。我把上面的例子改一改，子容器3改成固定宽度160px，其它的保持不变，看看有什么效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

#exemple5 .content{
	-moz-box-orient: horizontal;
	-webkit-box-orient: horizontal;
	box-orient: horizontal;
}
#exemple5 .v1{
	-moz-box-flex: 2;
	-webkit-box-flex: 2;
	box-flex: 2;
}
#exemple5 .v2{
	-moz-box-flex: 1;
	-webkit-box-flex: 1;
	box-flex: 1;
}
 
#exemple5 .v3{
	width: 160px;
}

大家可以看这个 DEMO 的效果。我们可以发现，子容器1和子容器2的宽度是在父容器宽度减去子容器3的宽度以后剩下的空间里分配的，这点和使用百分比作为 width 时直接根据父容器的宽度进行计算有很大的不同，使用 box-flex 能使子容器自动适应尺寸的变化，节省了很多调试时间。

空间的分配

因为我们可以把具有固定尺寸和灵活尺寸的子容器混合使用，并且也可以给父容器赋予灵活的尺寸。因此在最终的成品里我们可能会遇到父容器空间过余或者不足的情况。为了更合理地利用父容器提供的空间，box-align 和 box-pack 属性可以帮助我们。

box-pack 属性

box-pack 属性可以用于设置子容器在水平轴上的空间分配方式，它共有四种可能值：start，end，justify 和 center。这些值的含义如下：

• start ：所有子容器都分布在父容器的左侧，右侧留空
• end ：所有子容器都分布在父容器的右侧，左侧留空
• justify ：所有子容器平均分布（默认值）
• center ：平均分配父容器剩余的空间（能压缩子容器的大小，并且有全局居中的效果）

box-align 属性

box-align 属性用于管理子容器在竖轴上的空间分配方式，共有五个值：start，end，center，baseline 和 stretch。

• start ：子容器从父容器顶部开始排列
• end ：子容器从父容器底部开始排列
• center ：子容器横向居中（有点奇怪）
• baseline ：所有子容器沿同一基线排列（很难理解）
• stretch ：所有子容器和父容器保持同一高度（默认值）

box-align 和 box-pack 属性通常混合使用，我们可以用下面的 CSS 测试一下：

1
2
3
4
5
6
7
8
9
10
11
12
13

#exemple6 .content{
	-moz-box-orient: horizontal;
	-moz-box-pack: center;
	-moz-box-align: center;
 
	-webkit-box-orient: horizontal;
	-webkit-box-pack: center;
	-webkit-box-align: center;
 
	box-orient: horizontal;
	box-pack: center;
	box-align: center;
}

在线的 DEMO，大家可以 Firebug 禁用 box-align 和 box-pack 属性看看它们的区别和效果。

防止子容器溢出

CSS3 并没有更好地解决内容溢出的问题，反而在加入和新的盒子模型参数后，溢出的情况变得更加频繁。因此最好的方法还是多做试验，更好地管理你的内容。overflow: hidden 正能临时起点作用而已。

Related Posts

• CSS 屏蔽 Webkit 浏览器 input 高亮和 textarea 缩放
• jQuery选择器详解（一）
• 为 WordPress 3.0 的自定义菜单链接添加栏目图标
• CSS 多个子框架居中
• CSS3 灵活的盒子模型(Flexible Box Module) – 1

通过学习和测试，我发现这种新的盒子模型布局对建立自适应布局的页面带来很大的好处。在这篇文章中，我的所有例子都基于以下 HTML代码：

1
2
3
4
5

<body>
	<div id="box1">1</div>
	<div id="box2">2</div>
	<div id="box3">3</div>
</body>

容器的排列

在通常的情况下，页面上所有容器的顺序都按照载入的顺序排列。而使用 CSS3 提供的功能后，我们可以在不改变 HTML 结构的前提下随意改变容器显示的位置，这样不但给排版带来极大的方便，我们也可以利用这些功能进行流量整形。

在需用使用灵活盒子模型(Flexible Box Module)的时候，我们需要先把其父容器的 Display 属性设置为 box 或者 inline-box 。

水平分布和垂直分布

我们可以通过 box-orient 属性指定容器的分布轴，当这个属性的值为 vertical 时其子容器将垂直分布（也可以为 block-axis ），当值为 horizontal 时其子容器讲水平分布（也可以为 inline-axis ）。在本文的第一个例子里我使用了以下的 CSS ：

1
2
3
4
5
6
7
8
9
10
11

#exemple1 .content{
	-moz-box-orient : horizontal;
	-webkit-box-orient : horizontal;
	box-orient : horizontal;
}
 
#exemple1 .boite{
	-moz-box-flex : 1;
	-webkit-box-flex : 1;
	box-flex : 1;
}

具体的效果可以看这个 DEMO ，三个子 Div 容器都横向并列了。

注：这个效果在 CSS2 里理论上也可以通过 Display: inline; 实现，但由于某些浏览器的 BUG ，没人会这样做。

反序排列

box-direction 属性可以让我们随意改变容器的显示顺序。我们知道，在默认的情况下，block 级元素是按照加载顺序从上到下排列， inline 级元素是从左到右排列的，但现在通过 box-direction 属性我们可以让最后加载的 block 级元素显示在最顶部，最后加载的 inline 级元素显示在左边。

但在使用这个属性的时候要注意它可能会改变元素的某些属性，产生一些不能控制的效果。

在第二个例子里，我使用了以下的 CSS ：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

#exemple2 .content{
	-moz-box-orient : vertical;
	-moz-box-direction : reverse;
 
	-webkit-box-orient : vertical;
	-webkit-box-direction : reverse;
 
	box-orient : vertical;
	box-direction : reverse;
}
 
#exemple2 .boite{
	-moz-box-flex : 1;
	-webkit-box-flex : 1;
	box-flex : 1;
}

效果大家可以看这个 DEMO。可以发现，在不改变 HTML 结构的情况下，容器的排列顺序改变了。

按指定顺序排列

我们不但可以让一组同级容器反序排列，而且还可以让它们按自己喜欢的顺序排列，box-ordinal-group 属性可以帮我们做到这一点。通过 box-ordinal-group 为各个容器指定一个序号，默认情况下他们将会按照序号递增的顺序排列。要注意的是：没有指定序号的容器默认都为 1 ，并且序号相同的元素将按照加载顺序排列。大家可以看一下下面的 CSS ：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

#exemple3 .content{
	-moz-box-orient : vertical;
	-moz-box-direction : reverse;
 
	-webkit-box-orient : vertical;
	-webkit-box-direction : reverse;
 
	box-orient : vertical;
	box-direction : reverse;
}
 
#exemple3 .boite{
	-moz-box-flex : 1;
	-webkit-box-flex : 1;
	box-flex : 1;
}
 
#exemple3 .v1{
	-moz-box-ordinal-group : 2;
	-webkit-box-ordinal-group : 2;
	box-ordinal-group : 2;
}
 
#exemple3 .v2{
	-moz-box-ordinal-group : 2;
	-webkit-box-ordinal-group : 2;
	box-ordinal-group : 2;
}
 
#exemple3 .v3{
	-moz-box-ordinal-group : 1;
	-webkit-box-ordinal-group : 1;
	box-ordinal-group : 1;
}

在上面的 CSS 里，我把第一和第二个容器的序号都定为 2 ，第三个容器序号为 1 ，因此最终效果应该是 v3 排在第一，v1 和 v2 则根据加载顺序，v1 排在 v2 前面。效果可以看这个 DEMO。

后记

CSS3 真的非常强大，我相信在它普及以后，我们做网页的时候将可以减少大量的 JavaScript 。关于 CSS3 盒子模型的介绍还没完，这篇文章只介绍了一下容器的排序，下一次将说说容器的尺寸。欢迎订阅本博客，以即时获知最新的更新。

Related Posts

• CSS 屏蔽 Webkit 浏览器 input 高亮和 textarea 缩放
• CSS 多个子框架居中
• 网页圆角的取舍
• 10个节约开发时间的CSS技巧
• 纯CSS打造斜角

在 CSS3 标准里，Background 属性被赋予更加强大的功能，在 CSS2.1 的基础上，我们可以对一个对象同时使用多个背景图片。例如如下的样式：

1
2
3

#multiple-bg {
	background-image: url(top.png), url(middle.png), url(bottom.png);
}

添加符合背景图片的时候先从最顶层开始添加，按从高到低的顺序写样式。大家可以看这个 Demo。可以尝试用 IE 打开看看效果。

用 IE 打开过 Demo 的同学可以发现 IE 也能显示复合背景了，如果你查看过 DEMO 的源码，你可以发现我是通过 IE 滤镜来实现的。方法是先用标准的 CSS 加一个底层的背景，再通过滤镜添加上一层的背景。整个 Demo 的样式如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<style>
#demo {
	width: 410px;
	height: 290px;
	border: #CCC dotted 1px;
	margin: 120px auto 0;
	background: url(anti-ie6-logo.png) left top no-repeat, url(bg.jpg) center top repeat; /* CSS3 */
}
</style>
<!--[if IE]>
<style>
#demo {
	background: transparent url(bg.jpg) center top no-repeat;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='anti-ie6-logo.png', sizingMethod='crop'); /* IE6~7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='anti-ie6-logo.png', sizingMethod='crop')"; /* IE8 */
}
</style>
< ![endif]-->

IE 的不足

看到当年 IE 的强大了吧？最早开始支持复合背景的 Safari 3.1 诞生以前，IE6 早就可以通过滤镜制作出这种效果了。但IE也存在明显的不足：

• 本例使用的滤镜没有提供调整图片位置的参数，至少我在 MSDN 的技术文档里没找到。
• 目前 IE 只能制作出两层复合背景。

本文权当开开眼界了，为了更快地拥抱 CSS3 ，请在不使用网银和支付宝时弃用 IE。

Related Posts

• Firefox Input Button Line-Height Bug
• IE9 发布
• CSS 屏蔽 Webkit 浏览器 input 高亮和 textarea 缩放
• jQuery选择器详解（一）
• 为 WordPress 3.0 的自定义菜单链接添加栏目图标

CSS 圆角

关于 CSS 圆角在《再谈 CSS 圆角》一文里已经有详细的阐述。但纯 CSS 的圆角一些老式浏览器根本不支持。使用框架叠加的话不但会使页面结构变得非常复杂，而且大量的多余框架也会给一些后期开发带来困难。而使用圆角的图片作为背景则很难在一些灵活多变的页面里进行应用。因此 CSS 圆角目前只能在一些框架（主要是宽度）比较固定的页面里，通过图片的方式来实现。

JavaScript 圆角

有高手为了使像 IE 这样落后的浏览器也能显示非图片和框架叠加产生的圆角开发了一些产生圆角的 JavaScript 库，例如 CurvyCorners 是目前我测试过的最强大的一个 JavaScript 圆角效果库，不依赖任何框架。并且通过特定的 CSS Class 就能使 IE 也能产生圆角效果。

通过 JavaScript 框架实现的圆角插件更多，这里不一一介绍。但通过 JavaScript 虽然能解决大部分浏览器的圆角支持问题，但却可能会引起本来正确的一些框架错位，虽然这种错位也能通过 CSS Hack 来修正，但一旦浏览器禁用了 JavaScript 又会产生新的错位。因此 JavaScript 圆角应用并不广泛。

如何取舍

在框架固定的页面里，可以用 CSS + 图片的方法实现圆角效果，使 IE 也能显示圆角。但在一些多变的页面里，就只让现代的浏览器能看到圆角吧，老式浏览器被淘汰只是时间问题！

BTW

我的新主题正在测试中，如发现问题麻烦大家向我反馈一下。另外推荐使用非 IE 核心的最新版浏览器进行浏览。

Related Posts

• CSS 屏蔽 Webkit 浏览器 input 高亮和 textarea 缩放
• CSS 多个子框架居中
• CSS3 灵活的盒子模型(Flexible Box Module) – 1
• 10个节约开发时间的CSS技巧
• 纯CSS打造斜角

Visibility 和 Display 属性的区别

这里有个 Demo 可以比较 visibility: hidden 和 display: none 的区别。点击页面上部的链接，页面里绿色的 Div 将会进行相应的改变。请留意一下当绿色的 Div 属性分别被设为 visibility: hidden 和 display: none 时对其它元素会有什么影响。

Visibility 属性的用法

Visibility 属性共有四个可用的值（visible、hidden、collapse 和 inherit），但常用的值是 visible 和 hidden。

1
2
3
4
5
6
7
8

visibility: visible
/* 元素可见，默认值 */
visibility: hidden
/* 元素不可见，但仍然为其保留相应的空间 */
visibility: collapse
/* 只对 table 对象起作用，能移除行或列但不会影响表格的布局。如果这个值用在 table 以外的对象上则表现为 hidden 。 */
visibility: inherit
/* 继承上级元素的 visibility 值。 */

Display 属性的用法

Display 属性的可用值有很多，但在这里我们只关注其中的几个值：block、none 和 inline 。

1
2
3
4
5
6

display: none
/* 元素不可见，并且不为其保留相应的位置 */
display: block
/* 表现为一个块级元素（一般情况下独占一行） */
display: inline
/* 表现为一个行级元素（一般情况下不独占一行） */

从这里可以看出，虽然 Visibility 和 Display 属性都可以隐藏一个元素，但它们之间的不同点在于 visibility: hidden 在隐藏一个元素的同时仍然在页面上为该元素保留所需的空间，而 display: none 则表现得像把元素从页面里删除了，在页面上看不出该元素还存在着。

另外，display: block 和 display: inline 的区别在于 block 元素会在页面中独占一行，而 inline 元素不会，有的对象默认为 block 元素，而有的对象则默认为 inline 元素，大家在使用时需要注意防止相同属性的重复定义。

什么时候使用 Visibility 或者 Display 属性？

Visibility 和 Display 属性虽然都可以达到隐藏页面元素的目的，但它们的区别在于如何回应正常文档流。

如果你想隐藏某元素，但在页面上保留该元素的空间的话，你应该使用 visibility: hidden 。如果你想在隐藏某元素的同时让其它内容填充空白的话应该使用 display: none 。

在现实中我（作者）更多的倾向于使用 display 属性（相信这也是大多数人的习惯，bolo 注）。当你决定用 display: none 来隐藏一个元素时，你必须知道其它内容将填充到该元素留下的空白位置，从而改变页面的布局。

Visibility 和 Display 对 SEO 的影响

有时我们会通过把堆砌的关键词隐藏而达到作弊的目的，但不应该使用 visibility: hidden 和 display: none ，而应该把关键词颜色设为和背景色相同，或者把关键词的字号设为非常小，而令访客无法发现。

有的人则因为害怕搜索蜘蛛的的反感而为 visibility: hidden 和 display: none 的使用的烦恼。其实有很多漂亮的效果是通过元素可见性的转换而实现的，搜索引擎也理解这一做法（事实上搜索引擎往往忽略 CSS，bolo 注），因此如果你的目的不是欺骗搜索引擎，你大可以放心地使用 visibility: hidden 和 display: none 去隐藏内容。

原文链接：Visibility vs Display in CSS

Related Posts

• WordPress SEO 技巧：内链优化
• CSS 屏蔽 Webkit 浏览器 input 高亮和 textarea 缩放
• jQuery选择器详解（一）
• 为 WordPress 3.0 的自定义菜单链接添加栏目图标
• CSS 多个子框架居中

CSS3, please!

CSS3, please! 只有一个页面，上面以标准的 CSS 语法罗列了一些目前常用的 CSS3 属性在各种浏览器里的 hack ，通过点击各个属性上的 {toggle rule off/on} 可以禁用或启用该属性，页面的 logo 会做出相应的变化。

点评

CSS3,Please! 的页面非常简洁，而且页面效果也几乎都是用纯 CSS 写成，而且其页面的 HTML 标签写得非常工整。我们不但可以在这里查找 CSS3 hack ，对新手 CSS + DIV 水平的提高也有一定的好处。

CSS3 Generator

CSS3 Generator 是一个在线的 CSS3 编辑器，我们可以查找某个 CSS3 属性的写法，并且进行编辑。而且在属性编写页面我们可以看到这个属性支持哪个版本的浏览器。

点评

CSS3 Generator 类似一个 CSS3 属性的目录，拥有属性编写功能是一大亮点。但其演示过于简陋。

后记

从两个在线 CSS3 规则生成器我们可以看到 CSS3 的强大，但由于标准未定型，我们只能在一部分现代浏览器里体验到 CSS3 带来的震撼效果。在这里 Bolo 再次许愿 CSS3 标准尽快确定下来，并且奉劝各位抛弃老式浏览器。

小知识：老式浏览器

通常指 IE 7、Firefox 3、Safari 3、Chrome 4 以及 Opera 9 之前的浏览器和使用这些核心的浏览器。我们通常可以看见一些人说：“我不用 IE 这个垃圾浏览器，我用傲游”，其实例如绿色浏览器、糖果浏览器、世界之窗、搜狗浏览器、腾讯TT等都是基于 IE 核心的“壳”，我们不将这些“壳”作为一个独立的浏览器看待。Bolo 建议使用这些“壳”的朋友尽快把本机的 IE 升级到 IE8 。虽然搜狗浏览器和傲游浏览器已经叫出了双核的口号，但我认为目前这种技术并不成熟，而且它们也缺乏自主研发的核心（一般是集成 IE 和 Webkit 两个核心）。

Related Posts

• CSS 屏蔽 Webkit 浏览器 input 高亮和 textarea 缩放
• jQuery选择器详解（一）
• 为 WordPress 3.0 的自定义菜单链接添加栏目图标
• CSS 多个子框架居中
• CSS3 灵活的盒子模型(Flexible Box Module) – 2