大猫的测试代码：http://www.linxz.cn/demo/button_type.html

好奇心比较重的我就在想，为什么大猫他突然会问这个事情呢，仔细盘问之后才晓得，原来他没写type属性的时候，在输入框得到focus的时候，直接回车就提交了，也就是说没有type属性的button标签默认值是submit。那么换句话说，以前我记得button标签的type属性默认值为button是错误的。

经过对几个浏览器的对比查看，最终发现只有IE7（或许IE6也是这样的，没测试过）的button标签默认值是button，其他的浏览器都是sumbit。借用大猫的一句话就是“微软虽然改变了路线，但是没把屁股擦干净”，^O^ IE8都有了，他们怎么可能会去擦IE7的屁股呢。

然后在w3school网站中可以看到这么一句话“The button is a submit button (this is default for all browsers, except Internet Explorer)”。好吧，我又长见识了！

以下是豪情同学的来信，在这里我未经豪情同学同意，斗胆发出来给大家看一下，望豪情同学切勿见怪，凡是仁者见仁，智者见智，大家可以从豪情同学的来信中去思考一些问题。

小志：
你好~！
首先很感谢你为读者奉献出了这么一本经验与理论并存的好书。
同时也感谢你对我教程提出的修改意见。
其次是我在阅读完本书后的几点感触，想跟你分享一下：
1. 感觉书的开篇就开始css，这本无可厚非，但是对于“结构，行为，表现”这三个的关系没有扯一扯，或对table,xhtml,css的历史扯一扯，一致好多人还是把css与xhtml结构混在一声写，这与原来的三层背道而驰，我感觉在这上面欠缺。
2. 这一点可能也与出书的时间有关，就是感觉通篇介绍完当前流行的css相关技术之后，没有对未来的html5,css3做一个展望和一些学习的建议。从而是书的内容没有达到广而外沿的目的。
3. 从书中的内容阐述来看，css方面确实炉火纯青，但一涉及javascript方面就很少描述，从而是一亮点技术没有得一展示，这可能与本书创作的初衷有关系。但我感觉就是没有把技术向广的方面推进。从技能上来讲 css,js的配合是相得益彰是两个技术，可以略提一提，从而达到给予“渔”的目的。
4. 最后一点就是通篇的文字描述过于干色，总的感觉就是标题比内容更精彩。而且，形象化的比喻也是少之有少。其中最引人记忆犹新的，放上聊天记录那段对话(page 182)。

另外一般一本书我会看上三遍以上，但由于最近白天上班css晚上也在学习java，时间实在有限，只是大概粗读了一遍，上面的只是这一遍的感触。有机会在阅读第二遍第三遍的时候希望能在提出点意见点。

豪情 2010 7 22

小志不才，看到这篇文章感觉不错，就通过好多翻译工具以及结合个人对文章的理解翻译了一下这篇文章，如有不妥之处望指教！

重要说明：文章原出处：http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/如果有转载的朋友切记一定要保留这个出处，谢谢！

如果可以的话也请保留一下小志第一次翻译的这篇文章的原链接：http://blog.linxz.cn/multiple_backgrounds_and_borders_with_css2/

——————– 不 可 爱 的 分 割 线 ——————————

使用css2.1实现多重背景、多重边框效果

在单个HTML元素上利用CSS2.1实现拥有3张背景图片和2张内容图效果，或者多重边框的效果。这种渐进增强的方式适用于所有支持CSS2.1伪元素及其定位属性的所有浏览器。不需要CSS3的支持。

• 演示：使用CSS2.1的多背景
• 演示：使用CSS2.1的多边框

支持的浏览器：Firefox 3.5+, Safari 4+, chrome4+, opera10+, IE8+

是如何实现的呢？

从本质上讲，我们所创建的伪对象（:before和:after）跟我们在对待HTML元素嵌套关系是相同的。但他们相对于嵌套使用的HTML元素而言具有其独特的优势——不具有语义化。

当使用多背景或者多重边框的时候，我们需要将伪元素层的内容利用绝对定位固定在HTML元素内容的后面。

并非真实的内容被伪元素所包含进行定位。这意味着他们能在“父”元素范围内随意拉伸的同时而不会影响其内容。这可以任意组合绝对定位的top、right、bottom、left、width和height的值，主要关键是他们的组合性能是灵活的。

可以达到什么效果？

仅需要依赖于一个HTML元素和相关的图片就可以创建类似于多背景颜色、多背景图、背景图片剪辑、图片翻转、使用图片边框的可扩展的盒模型、浮动的虚假列（小志注：后面会提到的三列等高效果）、在盒模型外的图片、显示在外面的多边框，以及其他流行的效果等。可能需要2张额外的内容图片在生成的内容中。

在使用CSS2.1的多背景和使用CSS2.1的多边框演示页面中将会展示如何使用CSS2.1伪对象的技术实现这些流行的效果。

大部分的结构都包含子元素。因此，往往很多时候，你将有可能通过父元素的第一个子元素（设置是最后一个子元素）的伪元素来展示更多的效果。此外，还可以通过:hover对样式产生一些复杂的交互效果的变化。

示例代码：多背景图片

使用这种技术我们可以重现类似于Silverback网站中只使用一个HTML元素的多背景图片效果。

该元素拥有自己的背景图片和需要填充的空间。将该元素相对定位后作为其伪元素的绝对定位参考点。使用正值的z-index将有助于伪元素选择合适的z-index值（小志注：对于这句的翻译思考了很久一直没能选择合适的词来表达，主要的意思根据下面的代码我们可以看到是将伪元素的z-index值设置比元素自身的小即可，最好是用负值）。

1
2
3
4
5
6
7
8

#silverback {
	position:relative;
	z-index:1;
	min-width:200px;
	min-height:200px;
	padding:120px 200px 50px;
	background:#d3ff99 url(vines-back.png) -10% 0 repeat-x;
}

两个伪元素将会通过绝对定位的方式固定在该元素的两边。设置z-index值为-1将伪元素移到内容层的后面。这样伪元素将会位于元素的背景和边框上面，但是该元素的内容依然可以选择。

1
2
3
4
5
6
7
8
9
10

#silverback:before,
#silverback:after {
	position:absolute;
	z-index:-1;
	top:0;
	left:0;
	right:0;
	bottom:0;
	padding-top:100px;
}

每个伪元素都拥有一个可重复的背景图片属性。这是实现类型多重背景效果所需要的。

伪元素的content属性允许添加图片内容。这样我们就可以添加两张图片在一个伪元素中。可以通过改变伪元素的其他属性改变图片的位置，例如text-align和padding。

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

#silverback:before {
	content:url(gorilla-1.png);
	padding-left:3%;
	text-align:left;
	background:transparent url(vines-mid.png) 300% 0 repeat-x;
}
 
#silverback:after {
	content:url(gorilla-2.png);
	padding-right:3%;
	text-align:right;
	background:transparent url(vines-front.png) 70% 0 repeat-x;
}

使用CSS2.1的多重背景图效果成品。

示例代码：浮动的虚假列

另外一个应用是创建一个不需要图片或者额外嵌套容器的等高列（小志注：这里展示的是三列等高的效果）。

这个HTML结构非常简单。我曾经依赖于CSS2.1选择器使用特定类名在每一个子元素的div标签上，但IE6不支持。假如不需要IE6的支持的话，并不需要指定类名。

1
2
3
4
5

<div id="faux">
	<div class="main">[content]</div>
	<div class="supp1">[content]</div>
	<div class="supp2">[content]</div>
</div>

对这个拥有百分比的容器再次设置相对定位以及正值的z-index。应用overflow:hidden;主要是为了包含其子元素浮动后的容器（小志注：也就是清除浮动的一种方式），以及隐藏溢出的伪元素。背景颜色将作为其中一列的背景色。

1
2
3
4
5
6
7
8

#faux {
	position:relative;
	z-index:1;
	width:80%;
	margin:0 auto;
	overflow:hidden;
	background:#ffaf00;
}

通过定义子元素的div标签为相对定位之后，还可以控制单独列的位置。

1
2
3
4
5
6
7
8
9

#faux div {
	position:relative;
	float:left;
	width:30%;
}
 
#faux .main {left:35%}
#faux .supp1 {left:-28.5%}
#faux .supp2 {left:8.5%}

另外百分百高度的两列被建立于定位的位置和定位属性的伪元素，同时设置了背景色。这些背景可以用（重复的）图片代替，如果有需要的话。

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

#faux:before,
#faux:after {
	content:"";
	position:absolute;
	z-index:-1;
	top:0;
	left:33.333%;
	width:100%;
	height:100%;
	background:#f9b6ff;
}
 
#faux:after {
	left:66.667%;
	background:#79daff;
}

使用CSS2.1的多重背景效果成品。

示例代码：多边框

多边框的处理方式有很多相类似之处。利用这些方式可以避免使用图片而产生简单的效果。

元素必须具有相对定位属性，并且在需要有填充产生足够的宽度给由伪元素创建的额外的边框。

1
2
3
4
5
6
7

#borders {
	position:relative;
	z-index:1;
	padding:30px;
	border:5px solid #f00;
	background:#ff9600;
}

将伪元素绝对定位在盒子中，并明确与元素盒模型边距之间的距离，设置z-index值为负值后移动到内容层的后面，同时设置你所需要的边框色和背景色。

1
2
3
4
5
6
7
8
9
10
11

#borders:before {
	content:"";
	position:absolute;
	z-index:-1;
	top:5px;
	left:5px;
	right:5px;
	bottom:5px;
	border:5px solid #ffea00;
	background:#4aa929;
}

1
2
3
4
5
6
7
8
9
10
11

#borders:after {
	content:"";
	position:absolute;
	z-index:-1;
	top:15px;
	left:15px;
	right:15px;
	bottom:15px;
	border:5px solid #00b4ff;
	background:#fff;
}

就是这么简单。一个使用CSS2.1的多边框效果成品就有了。

渐进增强和传统浏览器

IE6和IE7不支持CSS2.1伪元素，将会忽略所有:before和:after声明。它们没有任何增强，但保留着基本的使用习惯。

关于Firefox 3.0的一个警告

Firefox 3.0虽然支持CSS2.1伪元素但不支持其定位。虽然没有支持这部分的效果，但另一些完全不受影响，并且不知道后续的Firefox 3.0版本将会什么时候优化成完美支持这种技术。有时，可以通过定义display:block样式属性可以改进伪元素的外观样式。

使用目前的方式，要求其定位伪元素，建议考虑Firefox 3.0支持的重要性和您的用户目前使用的浏览器比例。

——————– 不 可 爱 的 分 割 线 ——————————

翻译之外的东西，一点点个人看法

这篇文章我不知道是什么时候有的，不过原文后面是对CSS3的属性一些内容，我抛弃了，因为当时看到这篇文章主要是冲着使用CSS2.1的伪对象方式实现效果而去的。当我看到文章中提到用伪对象实现三列等高的时候，我表示十分惊讶，大概分析了一下这样的等高处理方式也存在着一点点小问题，比如背景图片定位（不支持伪对象的浏览器不考虑在内了）。顺带说一下，曾经考虑过在伪对象的content属性中增加图片，但一直以为是不可能实现的，就没尝试了，现在看到了，我也明白了，凡事只有尝试过后才能去确认！

职位要求：
1、热爱前端开发工作，对前端开发有正确的认识
2、工作严谨、喜欢专研
3、熟悉XHTML、CSS、Javascript编程
4、理解Web标准，对可用性、可访问性等相关知识
5、专业不限，但是你一定要对前端很热爱。

公司网站： http://www.fortuneage.com
公司有丰富的中午餐提供，保险各方面正规流程，薪水面议，具体还是看个人的能力价值吧。

有兴趣的朋友请QQ联系12618118，或者直接发简历和相关作品到12618118@qq.com，谢谢，没作品勿扰。

地点：广州

代码什么的就不写了，其实很简单，这次玩的仅仅只是旋转的属性 transform ，关于这个属性大家可以自己去尝试一下。小志不才，就是把图片定位叠加，然后旋转了一下。并且当鼠标经过的时候再将其转正，第一次玩CSS3，而且最近也比较忙，没具体写内容了。嘻嘻……别怪我懒

啥也不说，直接看效果吧，如果你的浏览器支持CSS3，那么就疯狂点击这里！

当我走进携程的大楼的时候，问了前台美女开交流会的位置，美女十分热情的告诉我，并且还说了句“你怎么来这么迟呢，他们都快开完了，你快上去吧。”让我心里突然小小的暖了一把，真想上去给她一个拥抱，可惜大大的前台隔着我跟美女，犹如牛郎跟织女隔着银河一般，可惜啊可惜。在会场中，首先让我听到的是场上大家在争论一个浮出层的表现方式，其中提到了用a标签的hover，使我十分纳闷，为什么行为效果要用hover伪类来实现呢，最后才明白他们这个只是引发性的讨论，其实他们是用JS来实现的，罪过，迟到的后果啊，错过了精彩部分。

哦，不，更精彩的好像是淘宝的同学带来的分享让我给错过了，人生最大的杯具莫过于此了，大概我就是这么滴与淘宝无缘吧。在会场经过了几个小时的交流讨论之后，个人感觉到上海这边的前端同学们对于xhtml和css这块的理解以及重视程度与北京、深圳还有段距离，希望是我的错觉吧。

一直以来都在CSS上莫打滚爬的，来到上海之后才知道，上海、杭州这边重视的是JS、PHP等方面的开发，而并非停留在CSS与XHTML之上。但也奇怪啊，我记得挺早的时候淘宝有同学提出“渐进增强”的概念，那么为什么当时我在会场中提到“差异化”会让大家以为就一定是要放弃IE6呢？其实我只是想说，我们仅仅只是在页面表现上让浏览器之间产生些许的差异，但功能上并无任何差异。

还有最大的一个感触就是，会场中的交流似乎并不是在交流，而是针对场内30来个人，每个人提出一个疑问进行解答，这样的交流方式让我感觉好别扭。最不喜欢的就是为什么每次话题都是北京那边的同学提出，然后我们要跟着这个话题走呢，而且最近几次的话题都是流程啊，BUG之类的，难道是为了解决主办方的一些工作上疑惑？如果交流是在场中，大家畅所欲言或者是进行PPT分享知识点，那也好啊。

这期并无太多收获，只是感觉出去见了一下上面的同学们，期待下期的交流会……

在深圳短短的两年半多一点的时间中，我得到了太多东西，也失去了不少。但失去的东西已经失去了，不可能再回来，而得到的东西却一直存在我心中。很多朋友不解我为什么要离开深圳，离开ISD，其实很简单，真的很简单。简单来说吧，前几天接到姐姐的电话，她说“你总算能跟大家一起过端午节了”。所以，离开的原因真的很简单，我已经漂泊太久了。

深圳给我的感觉是，你不进步就会完蛋，不像以前在温州的时候，很安逸，根本不存在任何什么竞争压力，无论怎么样都是有住的地方有吃的东西。

原本是想分享点自己在深圳这几年的一个工作经历或者说是工作感想的，但仔细想了一下，这个似乎并没什么用，凡事因人而异，每个人的发展道路都是不同的，每个人所接触的人也是不同的，把握好人脉，掌握好机会，巩固好自己的个人能力，机会就会慢慢地向你走近，然后伸手去抓住就可以了。很多人在知道我离开腾讯ISD后问我“小志，为什么你要离开腾讯呢，难道那里不好吗？很多人都一直梦想着要进去啊。”我承认目前国内几个大公司对于重构这块比较重视，尤其是在ISD，在这里可以学到很多东西，可以让一个人飞速发展。其实我是不想离开，只是每个人都有自己的一个理想一个梦想，也有每个自己所需要的一个家，因此我选择了离开，去了一个离家近一点的地方，方便以后可以常回家看看。

在来上海的飞机上，我把自己在深圳所接触到最难忘的几个人回顾了一下，发觉最后让我感动的是我过安检后看到的那个擦眼泪的动作。唉，笨蛋，不是说好了不许掉下来的么，你还是那么的不听话！不过我还算好，挺坚强的，没哭……

在深圳的最后一年左右经历了太多事情，每个故事的主角们，感谢你们！无论是好是坏，结果怎么样，大家都在小志的心中种下了一粒未发芽的种子。

最后感谢关心小志的朋友，小志现在在上海一切都很好，有空多联系！我就在这里：↓

查看大图

附上几张新居小图，更多的请关注小志的QQ空间中的相册。

http://t.qq.com/invite/fe675502c26f851bb47b

http://t.qq.com/invite/c0116b1f31e9e60beec3

http://t.qq.com/invite/be97e462224b60e996dd

http://t.qq.com/invite/c750b8f6b0a4b62fba27

http://t.qq.com/invite/6fe0fa32b6f866b28be7

这个腾讯微博真好玩，送完5个邀请码之后又来了5个，那我就继续送了……大家快来抢啊，一个人一个人，不许浪费~！

http://t.qq.com/invite/780d6e5df12c76c3240b

http://t.qq.com/invite/1cec56f023e6e1350c51

http://t.qq.com/invite/179d04a43633c014d57d

http://t.qq.com/invite/a76bb52baaf8b1cfc387

http://t.qq.com/invite/2bcd3305f109a6229c6d

然而今天在涛哥的勾引下，我使用了谷歌浏览器作为平时默认浏览器，顺带安装了一些插件，值得一提的是谷歌浏览器自带的有一个叫“任务管理器”的东西比较好玩，可以看很多参数，比如什么“缓存”啦、“内存”啊之类的。

“内存”这个东西我看了之后，突然想到曾经不是有人说border渲染后的性能么，于是乎，就在原来的那个demo基础上针对border:0;和border:none;以及border:0 none;这三个做了一个简单的对比。

首先使用的是仅仅只有input标签和button标签的一个对比，结果大致如下：

将三个demo文件同时在谷歌浏览器中打开，可以看到三个的内存占用率的比较，border:0 none;相对就是比较占优势。然后在想会不会跟三个同时打开，并且打开的次序不一样有关系呢（大家可以在图中看到这三个的打开次序是不一样的）？

那就一个个打开吧，大概的也就从上面看到啦。别问为什么现在这个图是这么小哈，我怕流量浪费，主要的数据看到就OK了，而且我相信大家看了之后也会去测试一下。至于测试的结果，估计或许会跟现在看到的差不多吧。哦，忘了一件事说明一下了，测试的时候，我用了300个input标签和300个button标签。

最后不明白的是在没有关闭浏览器的情况下，将另外一个文件拖拉至浏览器中，会发现“内存”会慢慢爬高，三个对比之下还是border:0 none;占优势。

写这篇日志不为别的，只想说，大家可以看到这个性能上的东西，无论怎么样都占用不了多少“内存”，“CPU”呢也只是在打开页面的一瞬间闪过，对于我们在制作网页的时候，使用border:0 none;主要的目的还是最终的渲染结果的兼容性问题。还是推荐使用border:0 none;的方式