background-size是CSS3提供的一个新特性，它可以让你随心所欲的控制背景图的尺寸大小。先简要的看看background-size的用法。我们知道在CSS2中，背景图的大小在样式中是不可控的，比如要想使得背景图填充满某个区域，你要么重新做帐大点的图，要么就只能让它以平铺的方式来填充。

　　如今background-size让你既可以直接缩放背景图来填充满这个区域，也可以让你先给背景图设置大小，然后以设置好的尺寸去平铺满这个区域。

　　一起来认识认识background-size吧。

　　background-size的值类型：

　　background-size需要1个或2个值，这些值既可以是像素px，也可以是百分比%或auto，还可以是特定值cover, contain。

　　background-size的值定义：

　　background-size可以设置2个值，1个为必填，1个为可选。
　　其中第1个值用于指定背景图的width，第2个值用于指定背景图的height，如果只给background-size设置1个值，则第2个值默认为auto（cover和contain特定值除外）。

div{
   background-image:url(test.png);
   background-repeat:no-repeat;
   background-size:100px;
}

　　等价于：

div{
   background-image:url(test.png);
   background-repeat:no-repeat;
   background-size:100px auto;
}

　　查看具体DEMO: background-size的值定义。当你使用firebug抓取到那个实例节点时，你会发现第二个值被自动加上了并且值为auto。当然，你也可以手动将第2个值设置为auto，然后与该DEMO的实例对比，它们的效果将是相同的。

　　background-size的特定值：

1. cover: 保持图像本身的宽高比例，将图片缩放到正好完全覆盖定义背景的区域；
2. contain: 保持图像本身的宽高比例，将图片缩放到宽度或高度正好适应定义背景的区域；

cover值：

div{
   background-image:url(test.png);
   background-repeat:no-repeat;
   background-size:cover;
}

　　上例，背景图片将覆盖整个div区域。查看具体DEMO: background-size:cover。

contain值：

div{
   background-image:url(test.png);
   background-repeat:no-repeat;
   background-size:contain;
}

　　上例，背景图将缩放到宽度或高度的任意一边与div区域适应。查看具体DEMO: background-size:contain。

 　　background-size简单的应用示例：

1. 背景图自适应容器大小
2. 设置背景图大小与平铺

　　如果尚未对CSS3有一定的了解，相信你还会为要给同一个元素设置多个背景图而头痛。于是就衍生出一些使用伪对象来实现的解决方案，如使用:first-letter，:first-line，:befor，:after等；又或是使用多个无意义标记堆叠来实现；又或是其它的什么方法。

　　当然，方法没有错误，有的只是寻求最适合和最简单的。

　　相信在CSS3 multiple background-image尚未出现之前，亦没有人会说自己的某某方法是最佳的，有的只是满足需求的一些变通方案（即使是在现在这种CSS3尚未被所有浏览器支持的情况下，是否要在项目中使用multiple background-image，也是你必须要考虑的问题)。

　　所谓有需求就会有变化，也许正是基于这样或那样的考虑，background-image终于将多背景图纳入了自己势力的范围之内。

　　有之前使用background-image的经验，多背景图对于你来说，完全是锦上添花，你甚至都不必花更多的时间去了解它，因为多背景图与之前的单一背景图并无大的区别，让我么来看看简单的DEMO吧：css3 multiple background-image多组背景图。

　　两者的细微区别：

• 单一背景图语法：background-image:url();
• 多重背景图语法：background-image:url(),url(),url()...

　　你会发现多背景图只是在单一背景图的基础上，多添加一层背景图，就多设置一个url()，每个url()之间以半角逗号分隔。这种方式应该很常见了，比如说多字体间的间隔，不也正是这样么。

　　组合与拆分写法：

组合：

.test{
    background:url(1.jpg) no-repeat,url(2.jpg) no-repeat 25px 25px,url(3.jpg) no-repeat 50px 50px;
}

拆分：

.test{
    background-image:url(1.jpg),url(2.jpg),url(3.jpg);
    background-repeat:no-repeat;
    background-position:0 0,25px 25px,50px 50px;
}

　　如上组合与拆分这两种写法是等效的，依据实际情况使用适合的写法。拆分写法中的background-repeat:no-repeat之所以可以缩写成这样，是因为该示例代码中的3个背景的平铺方式都为no-repeat。完整代码为： background-repeat:no-repeat,no-repeat,no-repeat;

　　值得注意的地方：

　　如果设置的多重背景图之间存在着交集（即存在着重叠关系），前面的背景图会覆盖在后面的背景图之上。DEMO请看这里：多背景图之间的层叠关系。

　　如果存在着可比性的话，那么这个情况与元素的z-index正好相反，z-index默认下后者会覆盖前者，当然，其实这2者间不存在可比性，只是都有覆盖的情况，顺带一提。

　　“有了新盖中盖高钙片，一片顶过去五片，高钙片，水果味，一个片嘣五楼，不费劲儿！”

　　这句广告词估计大家都早已烂熟于胸，多年的狂轰乱炸，想记不住也是不可能的。比起新盖中盖高钙片广告词中的神效，CSS3 RGBA之与RGB又或HEX，应该可以对等。

 　　为什么要这么说？想想不使用CSS3，我们一直是如何满足“背景透明，文字（内容）不透明”这种需求的？

　　例如现在有个需求：

1. 有个长300px，高100px的div在body为红色的页面中；
2. 该div拥有不透明度为50%的黑色背景颜色；
3. 该div内容不允许出现半透明效果，且文字为白色。

　　根据该需求中的3点要求，我们需要得出的效果应如下图：

　　
　　Figure 1: 背景透明内容不透明

根据需求里的已知条件，我们代码如下：

body{
    background:#f00;
}
#opacity{
    width:400px;
    height:100px;
    background-color:#000;
    color:#fff;
    filter:alpha(opacity=50);     /* For IE */
    opacity:.5;
}

<div id="opacity">怎样实现背景透明，内容不透明？</div>

 　　运行这段代码后，效果与需求3不符合，内容也随着容器成了半透明的，看DEMO：不成功的背景透明内容不透明效果。其效果如下图：

　　
　　Figure 2: 内容也半透明了

　　有经验的前端工程师知道，要达到需求所述的效果，上面的代码需要做些许变动：

1. 如果仅需满足IE，那么在原有的结构上加多一层，并将其设置为position:relative。示例DEMO：only ie的背景透明内容不透明效果。
2. 兼容大部分浏览器的处理方式：这也需要加多一层，不过要与原结构“同级”。示例DEMO：兼容大部分浏览器的背景透明内容不透明效果。

　　以上2中方式，其中only ie的自然是不可取的，因为这是前端工程师的职责所在，我们必须使得大部分用户能得到相同的体验，而不仅仅是某个范围。

　　至于第二种，这是现在比较流行的处理方式。不过这种方式也不是那么完美，这个缺憾表现在：

1. 代码量增加：需加多额外一层无意义标签；与此同时，相应的CSS代码也将增加
2. 不灵活：由于新增的一层与内容层是并级的，所以新增层的宽高不能动态的随着内容层的中内容的增减而变化。

　　这个时候CSS3 RGBA的优势就体现出来了，从字面看，RGBA = RGB + alpha。但事实上RGBA并不是简单的RGB与alpha的相加。请看例子CSS3 RGBA color详解中几种颜色类型的对比。

　　我们知道opacity（IE下用filter:alpha(opacity=??)）是让整个元素渲染成半透明的效果，而不能单独指定是否只有颜色为半透明。我想这也许正是RGBA和HSLA这种类型颜色的出现原因。

　　RGBA的语法非常简单，如果你熟悉RGB颜色话。

　　rgba(0-255,0-255,0-255,0-1) 这就是RGBA的语法，前三个参数为色调，取值可在0-255之间，第四个参数则为alpha，取值为0-1之间。

以上面的需求第2点为例，用RGBA可以这样表示

background-color:rgba(0,0,0,.5);

　　这样就只有背景色为半透明，其它的俱不受影响。最大的问题被轻松搞定，那整个需求即变得异常简单起来，迟疑什么？立即看看用CSS3 RGBA实现的背景透明内容不透明效果DEMO吧。而之前在第二种实现方案中所提及的2个缺憾，在RGBA的实现方案中，似乎根本不存在。

　　DEMO看完后，相信你也能体会到RGBA这种颜色类型的强大力量。CSS3离你还远吗？

　　与圆角border-radius属性一样，盒阴影box-shadow也是一个令人激动的属性。

　　W3C将box-shadow加入CSS3属性列表，并使其标准化，应该是件值得高兴的事。也许，从此你再也不会因为“实现代价”而与设计师争得脸红。

　　那么，box-shadow究竟是如何被人们所称道的？

　　如果你是前端工程师，你可能有过这些痛苦的经历：

1. 面对到处都是圆角的设计稿；
2. 面对到处都是圆角+阴影的设计稿；
3. 面对到处都是圆角+阴影+半透明的设计稿。

　　如果你还没有接触过CSS3，或者你所负责的这个项目，必须兼容IE系列。那么，无论是面对上面的哪一点，都可以耗费你不少的精力和时间。

　　这里，我们搁下IE不谈，只谈谈box-shadow。

　　box-shadow属性至多有6个参数可以设置：

1. 阴影水平偏移量：如果该参数为正值，则阴影在box的右边；如果该参数为负，则阴影在box的左边
2. 阴影垂直偏移量：如果该参数为正值，则阴影在box的底部；反之，则在box顶部
3. 阴影模糊距离（大小）：此参数可选，只能是正值。如果该参数值为0，则阴影的边缘犀利；该值越大，阴影的边缘越模糊
4. 阴影扩展距离：此参数可选。如果该参数为正，则整个阴影都延展扩大；反之，则缩小。
5. 阴影颜色：此参数可选。如果不写，则会选取默认颜色。至于默认颜色会是什么，不清楚（在webkit核心下为无色，即透明），建议不要省略该值。
6. 阴影类型：此参数可选。有唯一值‘inset’，如果存在该值，那么阴影将为内阴影；如果不写该值，则为缺省的外阴影。

　　box-shadow的特征：

1. 通过对阴影偏移量的设置，可以使得阴影出现在“上、右、下、左”任一方向；
2. 阴影大小、边缘模糊、颜色可自定义；
3. 可设置内阴影及外阴影；
4. 可设置“多组”阴影。

　　box-shadow实例：

　　来实现一个最基本的阴影的效果，如下图：

　　
　　Figure 1: 基本阴影效果

　　就是这样的一个具有最简单阴影的效果，如果不用box-shadow做，那么要实现的话，也必要再多堆叠一层无实质意义的标签。

再来看看box-shadow的代码实现：

box-shadow:5px 5px #888;background:#eee;

　　该实例的DEMO展示：simple box-shadow。同时，可以通过对偏移量数值的更改以查看其它的效果，实现特征1所述效果。

如果，你想要得到一个内阴影的效果，只需在上诉代码中加上一个'inset'即可：

box-shadow:5px 5px #888 inset;background:#eee;

　　经此一改，效果立即变成：

　　
　　Figure 2: 内阴影效果

　　至于阴影出现的方向，仍然可以通过对偏移量的更改来控制，看看DEMO：内阴影

　　通过box-shadow，阴影的实现是如此的方便；而圆角也一如本文开头所说，用border-radius也可轻松搞定。如果你对CSS3中圆角的实现不大了解，请看： CSS3 border-radius圆角的优雅实现。

　　如此一来，开篇所述的3大痛苦经历，前2大已经变得那么微不足道了。如果把半透明阴影也搞定了，那3大痛苦经历似乎也不再那么纠结了。

　　那么半透明阴影有解么？是的，有，而且异常简单。

　　你或许已经听说过RGBA colors与HSLA colors，没听说过也无妨，CSS3为了让半透明的实现更简单，新增了RGBA和HSLA这样的颜色属性。相比于RGB，RGBA多了一个‘A’，而这个A正是alpha（透明度）的缩写。这样的组合要告诉我们的是，CSS3允许你使用一个可以调节透明度的颜色。

　　我们看看半透明阴影与普通阴影的对比DEMO：半透明阴影。

　　一个小应用：

　　曾惊艳于Chrome与Safari的文本框聚焦效果，却也不甚欢喜其实现的繁杂。

　　
　　Figure 3: Safari下常态文本框

　　
　　Figure 4: Safari下获取焦点的文本框

　　如今，对着如Figure 4的效果，你可以微笑着说：“这个，简单！”

　　不信，我们可以一起去看看DEMO：文本框聚焦效果。

　　得益于CSS3，现如今边框（border）也颇具可玩性了。它正在慢慢摆脱只能设置纯色，只能是规规矩矩的矩形的约束，穿上一件华彩的外衣。

　　当然，无图无真相，只说不做难以令人信服。那就先上个图吧。

　　
　　Figure 1: 自适应大小的边框

　　相信类似Figure 1图示的效果，大家都不会陌生。并且，很多人为做类似的效果还颇费了一番功夫。css sprites自是不必多说，肯定是要用到的，为了实现它，同时还要“绑架“好些个标签。是不是有人要说，我只要一个标签照样可以实现？我想说，若不借力于CSS3，你做不到，因为需求是这个边框会随着内容的大小改变而改变，而并非大小固定。

　　那CSS3真的可以用”1个标签“实现类似的效果吗？如果能，怎么做呢？

　　答案是肯定的，你且过来看DEMO 1：border-image自适应大小的边框。至于实现方式，请听我慢慢道来：

　　首先，我们这个华丽的外框，我们还是需要用图片来做的，所以我们提供这样一个图片：

　
　　Figure 2: 边框图片

　　是的，你没看错，就是Figure 2这么一张小图，我们就能实现Figure 1的效果，并且可以让它想大就大，想小就小，如有怀疑，你可以在DEMO 1里去修改图片的大小试试。

　　第二，你需要了解CSS3的新特性border-image，因为我们需要借助的就是它。

　　初看到border-image，很多人会马上想起background-image。确实，它们之间有一些类似之处，其中包括对图片的引用及图片排列方式。

　　如同background般，border-image也是多值的，所以可以对它进行形式上的属性分解：

1. border-image-source
2. border-image-slice
3. border-image-width
4. border-image-repeat

　　border-image-source用来引入图片，格式与background-image一致：

1. 写法：border-image-source:url(image URL)

　　border-image-slice用来分解引入的图片，将之拆解成9份，形成一个九宫格造型。参见：W3C borer-image-slice。

1. 写法：border-image-slice:10 10 10 10；
2. 方位：跟如margin,padding等属性一样，这4个数值所对应的方位仍然是“上、右、下、左”；
3. 处理：如上面的代码其实可缩写成border-image-slice:10 10，或者进一步缩写成border-image-slice:10，这点可以参照margin等属性，其对数值的处理方式是相同的。
4. 单位：你会发现这4个数值均无单位，其实这些数字已被固定单位为px了，所以不必写上，如果加了单位就错了；当然，也可以用百分比来设置这些数值。

　　border-image-width用来指定border的width，为边框图片的显示提供地方；

1. 写法：border-image-width:10px 10px 10px 10px；
2. 处理：数字的处理方式如margin,padding等属性。

　　border-image-repeat用来指定边框图片的排列方式；

1. 拉伸写法：border-image-repeat:stretch stretch; 参见DEMO 2: stretch拉伸方式
2. 重复写法：border-image-repeat:repeat repeat; 参见DEMO3: repeat重复方式
3. 平铺写法：border-image-repeat:round round; 参见DEMO4: round平铺方式
4. 语法：border-image-repeat可以指定2个值，分别表示水平方向和垂直方向；当水平和垂直方向的排列方式相同时，可以将2个值合并写成1个，同时由于该属性的默认值为stretch，所以当水平和垂直方向均为stretch时，可以省略不写；当然2个方向可以使用不同的排列方式，参见DEMO 5: 混合方式。

　　上面我们说过，对border-image的属性拆分只是形式上的，用于帮助理解每个参数的意思。实际在应用的时候，是不能拆分的，必须是缩写在一起，如：

　　border-image:url(xx.png) 10/10px stretch stretch;

　　按本文对border-image-repeat的语法里所说，上面代码其实可以简写成：

　　border-image:url(xx.png) 10/10px stretch;

　　或者：

　　border-image:url(xx.png) 10/10px;

　　第三：了解各浏览器对CSS3的支持程度。这也是我一直想说的，既然是讲CSS3，大家在看的时候，或者在练习的时候，总不至于还会说：IE下怎么没效果啊，某某浏览器怎么不是这样的啊（我在每个DEMO里都已注明浏览器版本参照基准和支持程度）。同时，这里也不讨论CSS3还要多久可以普及，IE什么时候可以被推到，我们只是去尝尝鲜而已，看看新技术的发展方向。

　　一口气说完“第三”点这么长的一句话后，忽然想起还有一个地方需要跟大家说说：

　　border-image-width，对，这个是定义边框width的，用来为边框图片的显示提供地方，这点前面已经说了。遗漏没说的是，对于边框width的定义以前还有一个border-width可以做到。在这里也不例外，你可以使用border-wdith代替border-image-width的定义，参见DEMO 6: border-image-width之与border-width。如果这样的话，那么上面的代码则可写成：

　　border-width:10px;
border-image:url(xx.png) 10;

　　最后：一起写个小例子看看吧

　　弄清楚上面这些后，让我们来做个小东西试试：我们暂且只拿一张简陋的草图来做我们的border-image。写这样一句代码：

　　border-image:url(xx.png) 5 8 5 10/5px 8px 5px 10px repeat stretch;

　　那么，解析这句代码就会得到：这张“草图”，实际上会先被分解成如下图般的1，2，3，4，A，B，C，D，E 9个部分。1，2，3，4不参与border-image-repeat(排列方式)；A，B，C，D，E5部分，其中AC为参与水平方向的 border-image-repeat（即代码里的repeat），BD参与垂直方向的border-image-repeat（即代码里的 stretch），E同时参与水平和垂直2种排列方式（即水平方向repeat，垂直方向stretch）。

　　Figure 3: 边框图分解

　　顺便看看这个小例子的实现吧：DEMO 7

　　了解了这些，还犹豫什么，找一张COOL点的图来代替Figure 3，试着为你的border穿起华丽的衣裳吧。

　　初看标题，你可能还反应不过来什么是“双线框”。没关系，因为这个叫法可能只是我“杜撰”的，或许它有其它的叫法，不过不必深究。

　　我想，如果有张图来让你看到什么是我所谓的“双线框”，那么，接下来应该可以让你我的距离拉近一些。

　　
　　Figure 1: 常规双线框

　　有了Figure 1的图示，估计很多人已想到了实现该图效果的方法。是的，就算没有CSS3，实现这样的效果也是信手拈来。

　　其实，看到double border这样的字眼，应该就会想到，border-style（在CSS1中已实现，故所有现代浏览器均支持）有个double参数值。double所表现出来的效果就是如Figure 1般：2条有间隔（你所看到的这个白色间隔并不是1根白色的线条，而是真正的缝隙）的线条。

　　需要说明的是：border-style的double参数值需要border-width在不小于3px的情况下使用，2条线条与之间的间隔之和等于border-width的值。

我们来看看Figure 1的border-style实现（Code 1）：

.test{
	border:3px double #000;
}
<div class="test">double border</div>

　　你可以试着将Code 1的3px进行修改，会发现，2条线条和间隔，这3者总是自动去对这个值进行分配，所以无法有针对的指定对2条线条和间隔的width。也就是说，你无法实现2条1px的线条夹着1个3px的间隔，也无法实现2条3px的线条夹着1个1px的间隔。

　　当然，上面所说的这点，并不是最纠结的问题。真正影响实际应用的问题在于：

1. 无法为2根线条指定不同的颜色；
2. 无法单独为这个间隔指定背景色；
3. 无法只保留外边框而去掉内边框。

　　也就是说你可以通过Code 1的方法去实现Figure 1，并且也能实现如下列的Figure 2和Figure 3。

　　
　　Figure 2: 带背景色的双线框

　　
　　Figure 3: 背景色不包括border的双线框

　　但却做不到如下列的Figure 4，Figure 5，Figure 6。

　　
　　Figure 4: 2条线条颜色不同的双线框

　　
　　Figure 5: 间隔设置了颜色的双线框

　　
　　Figure 6: 去掉了内边框的双线框

　　自然，如Figure 7的常见效果就无法做到了。

　　
　　Figure 7: 常见双线框效果

　　既然标题是CSS3 VS. CSS1，那么CSS1的实现方法已经有了，我们再看看CSS3的实现方式吧。很简单，我们要用到的正是我之前所写文章“CSS3 border-colors创建惊艳多重边框色“中的多重边框色：border-colors。

　　也就是说，只需要多每组的颜色进行一些设置，就可以实现border-style方案所纠结的问题。但这种方法也存在着瓶颈，因为当前并非所有浏览器都对CSS3支持良好。

　　看看DEMO：css3 double border双线框效果的2种实现方式。你可以在该DEMO内的border-colors方法里修改一些颜色和边框的宽度，就能实现从Figure 1到Figure 6，至于Figure 7，只是背景色由纯色变成了渐变色而已。如果你了解CSS3的gradient属性，这个也很容易实现。如果不了解，就让我们下次再说说gradient吧。

　　是的，我们知道：我们可以为border设置它的width，这个border的宽度可以是5px，可是10px，可以是20px，可以是随意数值。

　　可是，你想象过可以为每1px的border单独设置颜色么？这是个什么概念？就是说，如果你为一个元素设置了10px的border，那么这10px的边框区域，你可以为它设置10种颜色。每1px是一重（一组）。DEMO：css3 border-colors多组边框色详解

恩，让我们来回味下如何为元素设置边框大小（代码块一）：

.test{
	border:6px solid #000;
}
<div class="test">测试border颜色设置</div>

　　上面的代码表示我们为一个className为test的div元素定义了6px的边框，当然，这是一个矩形，包括有4条边。

于是，这段CSS代码其实可细化为（代码块二）：

.test{
	border-width:6px;
	border-style:solid;
	border-top-color:#000;
	border-right-color:#000;
	border-bottom-color:#000;
	border-left-color:#000;
}

　　通过细化后的代码，发现我们其实可以给这个矩形的4条边分别设置颜色，至于颜色是要设置成相同还是不同，则要看自己的需求了。

　　运行细化后的代码（当然你可以更改每条边的颜色），看到的是一个有6px黑色边框的矩形。恩，这就是我们的预期效果。

　　然而，现在，我们可以将6px的边框拆分成6组，每1px为1组，于是每条边框最多可以设置6中不同的颜色。

怎么做？看看吧（代码块三）：

.test{
	border-width:6px;
	border-style:solid;
	border-top-colors:#000 #fff #999 #aaa #ccc #eee;
	border-right-colors:#000 #fff #999 #aaa #ccc #eee;
	border-bottom-colors:#000 #fff #999 #aaa #ccc #eee;
	border-left-colors:#000 #fff #999 #aaa #ccc #eee;
}

　　对比代码块二，会发现，前面的都没变，变的只是之前的每条边只能设置单一的颜色，所以用的是border-xxx-color，而现在每条边能设置多组颜色，所以就变成了border-xxx-colors，变成复数了，这个，你懂的，我相信。

　　运行代码块三后，“怎么和代码块二一样啊？”我知道你会这么说的。

　　哦，这是我的错，因为大多数浏览器都还不支持多重边框色。以写这篇文章的日期为分界，当下还只有Firefox3.6+支持，所以还需借助Firefox的私有属性来瞧瞧这个效果。

用Firefox3.6+玩玩（代码块四）

.test{
	border-width:6px;
	border-style:solid;
	-moz-border-top-colors:#000 #fff #999 #aaa #ccc #eee;
	-moz-border-right-colors:#000 #fff #999 #aaa #ccc #eee;
	-moz-border-bottom-colors:#000 #fff #999 #aaa #ccc #eee;
	-moz-border-left-colors:#000 #fff #999 #aaa #ccc #eee;
}

　　相信，运行代码块四后，你可以放松下了，效果终是出来了。

哦，或许你还应该再看看（代码块五）：

.test{
	border-width:10px;
	border-style:solid;
	-moz-border-top-colors:#100 #300 #600 #800 #900 #a00;               
	-moz-border-right-colors:#100 #300 #600 #800 #900 #a00;
	-moz-border-bottom-colors:#100 #300 #600 #800 #900 #a00;
	-moz-border-left-colors:#100 #300 #600 #800 #900 #a00;
}

　　运行代码块五后，我想跟你说的是：如border为10px，却只设置了6组边框色，那么最后一组边框色将渲染剩余的宽度。意思是说最后一组边框色会自动填充没有设置边框色的剩余宽度。

　　恩，差不多就这样，该结束了。

　　如果你关注HTML5，且你是个web前端开发人员，那你就能感受到HTML5给业界带来的热力和激烈讨论，犹如在炎炎夏日点起一堆熊熊大火。

 　　随着各大浏览器商纷纷宣布对HTML5的支持，并迅速对自家产品进行升级，更是将HTML5推上了峰尖浪头。

　　那么HTML5究竟有何魅力？又该怎样开始HTML5呢？

　　HTML5的吸引力在于新增了很多新标签，实现了很多新特性。如直接用video标签播放视频文件，用audio播放音频文件，用canvas绘制图形图像和制作动画，新的表单控件，对本地离线存储的更好的支持等等，这些新特性应该基于HTML、CSS、DOM以及JavaScript。

　　同时HTML5更注重语义化，如xhtml般抛弃了一些无语义，完全用于表现的标签；也将一些原来无语义的标签赋予新的语义；并新增了一些细化语义的标签如header,section,footer,article,nav等等。

　　本文将更多着墨于如何开始HTML5开发上，至于HTML5的介绍及新标签、新特性，大家可以到网上搜索HTML5的相关文章，已然很是详细。

　　起：

　　HTML5 仍处于不断完善之中。然而，大部分现代浏览器已经具备了对某些HTML5新特性的支持，且IE9也将支持某些HTML5 特性。HTML5将成为 HTML、XHTML 以及 HTML DOM 的新标准。

　　承：

　　作为新的HTML标准，HTML5没有XHTML所规定的那么严格。比如在XHTML中，所有的标记必须闭合，所有的标记和属性必须小写，而在HTML5中，这些仍沿用了HTML4的做法，允许不闭合，允许出现大写标记或属性。

　　之前，从HTML4过渡到XHTML的一个非常大的变化，就是规范了HTML的写法，使得广大前端开发人员的代码风格都统一起来。现在如今HTML5虽然没有继续这个规范，但还是推荐大家在写HTML5的时候遵循之前XHTML的标准。

　　转：

　　HTML5简化了一些无关紧要的声明，用于减小HTML的文件大小和让开发人员书写起来更简单。如：

1. DTD文档类型定义：

   XHTML：

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

   HTML5：

   <!DOCTYPE html>

   通过XHTML与HTML5对比，你会看到HTML5的DTD变得简洁多了，并且之后的迭代版本都将使用这个DTD声明。

2. 命名空间：

   XHTML：

   <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">

   HTML5：

   <html lang="zh-cn">

   HTML5简化了命名空间声明，将不再需要HTML代码中定义命名空间。

3. 编码：

   XHTML：

   <meta http-equiv="content-type" content="text/html; charset=utf-8" />

   HTML5：

   <meta charset="utf-8" />

   HTML5简化编码声明。

4. type属性：

   XHTML：

   <style type="text/css"></style>
   <script type="text/javascript"></script>

   HTML5：

   <style></style>
   <script></script>

   HTML5简化了style标签和script的type属性。

　　还有一些其它的简化，感兴趣的可以自己去找找。

　　HTML5新增了一些标签，如：

1. 头部：

   XHTML：

   <div id="header"></div>

   HTML5：

   <header></header>

2. 底部：

   XHTML：

   <div id="footer"></div>

   HTML5：

   <footer></footer>

3. 导航：

   XHTML：

   <div id="nav"></div>

   HTML5：

   <nav></nav>

　　还有诸如<article>、<figure>、<section>、<time>、<aside>等等。

　　合：

　　看完上面这些，我们发现，开始一个HTML5页面是非常的简单的，甚至比之前HTML4和XHTML简单。

简单的HTML5示例页面：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>HTML5 Examples Page</title>
<style>
<!--这里是CSS代码-->
</style>
</head>
<body>
<article>
<header>标题</header>
<section>正文</section>
<footer>文章相关信息</footer>
</article>
<script>
<!--这里是JavaScript代码-->
</script>
</body>
</html>
 

　　至此，我们已经创建了一个简单的HTML5页面，更多有趣且强大的东西正在等待着，赶紧去体验HTML5的魅力吧。

　　在css3尚未真正普及前，我们要实现圆角效果，还是需要颇费苦心的。一方面需要照顾还占有强势地位的低版本IE用户群，另一方面由于css3目前还属草案阶段，有些浏览器暂且以私有属性的方式去实现css3的一些东西。如目前的Firefox3.6.6实现圆角，就必须使用私有属性-moz-border-radius。

　　所有的这些，让我们看到，圆角的标准化实现目前还处理尤抱琵琶半遮面的阶段。不过，曙光已现，只待w3c加快推进css3的进程和IE9或更高版本IE的推出。

　　到那时，至于还在使用低版本IE的用户，你或许可以强势点，不兼顾这个群体；又或许你可以采取优雅降级的方式，给低版本IE用户一个“普通版”；再不然，你也可以单独为低版本IE另做一份。相信可以找到一个适合你的处理方式。

　　这是闲话，点到即止。接下来，还是让我们来看看标准化的圆角实现。DEMO：css3 border-radius圆角详解

　　首先，我们要知道css3的圆角属性为：border-radius，其次还需了解一个矩形有4个角，也就是说，我们可以一一给每个角设置是否具有圆角属性。

　　border-radius最多可以设置4个值，分别是矩形4个圆角的半径。你可以如以下这般设置：

1. border-radius:10px

   你可以只设置1个值，其表达的是说当前设置这个属性的元素，四个角都为圆角，且每个圆角的半径都为10px。当四个圆角的大小相同时，会这样设置。

2. border-radius:10px 5px

   你也可以设置为2个值，第1个值代表左上圆角和右下圆角，第2个值代表右上圆角和左下圆角。当左上圆角和右下圆角大小相同，且右上圆角和左下圆角大小相同时，会这样设置。

3. border-radius:10px 5px 1px

   你也可以设置为3个值，第1个值代表左上圆角，第2个值代表右上圆角和左下圆角，第3个值代表右下圆角。当左上圆角和右下圆角大小不同，且右上圆角和左下圆角大小相同时，会这样设置。

4. border-radius:10px 9px 8px 7px

   你也可以将4个值分别设置，它们代表：左上圆角，右上圆角，右下圆角，左下圆角。当4个圆角的大小不同时，会这样设置。

　　当然，你也可以将4个角拆分成4个单独的属性来设置：

1. 左上圆角：border-top-left-radius
2. 右上圆角：border-top-right-radius
3. 右下圆角：border-bottom-right-radius
4. 左下圆角：border-bottom-left-radius

　　以上这些都属于css3圆角实现的标准属性，Chrome5 and Later, Safari5 and Later, Opera10.53 and Later都已支持，在当前Firefox3.6.6版本下，依然需要私有属性来实现。

　　Firefox实现圆角的私有属性分别为：

1. 全圆角：-moz-border-radius
2. 左上圆角：-moz-border-radius-topleft
3. 右上圆角：-moz-border-radius-topright
4. 右下圆角：-moz-border-radius-bottomright
5. 左下圆角：-moz-border-radius-bottomleft

　　相对于使用背景图片及多标记1个像素1个像素的叠加实现，css3的圆角实现，显得那么雅致，让我们一起期待css3一统的那天吧。

　　这段时间html5,css3可谓大大的火了，什么apple与adobe的冲突，IE9 beta preview开放下载，并高调宣布支持html5与css3。这些消息都无疑将html5与css3推到了峰尖浪头。然而，当html5与css3正式被推出时，它们能为整个互联网带来什么呢，又能给web开发者，尤其是web前端开发者带来什么不同呢？

　　我想，当html5与css3正式发布时，将给整个业界带来的好处是显著的，至于那个度是多少，我也不能断下结论。

　　所以，我们都可以趁着现在去尝尝鲜，小小的把玩一下。

　　今天，分享一个用CSS3实现简单的显示与隐藏的切换效果。是的，这个效果是不需要通过JavaScript的。

　　你可以使用 Firefox3.6+ 及 Opera10.53+ 预览：DEMO：css实现显示与隐藏切换

以下是这个DEMO的基本HTML结构：

<div id="switch">
    <a href="?" class="display">显示</a>
    <a href="?" class="hide">隐藏</a>
    <p class="cont">CSS3将带给互联网无限的精彩，很多遥不可及的事情将可信手拈来。</p>
</div>

CSS实现：

#switch .hide{display:none;}
#switch .cont{display:none;}
#switch .display:focus{display:none;}
#switch .display:focus + .hide{display:inline;}
#switch .display:focus ~ .cont{display:block;}

　　简单的数行代码就可以实现隐藏和显示，是不是给你带来些许激动了？虽说这个DEMO还不够让人满意，但广大人民的智慧是无限的，定能将之做得更加完美。

　　相信，更多新特性的展现会成为促使html5与css3的尽早推行的动力。因为，一切皆有可能。