Heluyao的博客 {11gz.com}

实现效果如下图：

这个方法并非我创，我也是以前在网上看到，记下了原理。今天有时间了，整理思路，写出代码！原文我不记得地址了，只记得原作者是google的前端工程师，方法很赞，尽管多了四个空标签(如果不要三角箭头，就只多了外层嵌套的两个标签)。

一般我处理圆角效果，都是弄一张图片，里面放4个角(或更多颜色的角)，利用浮动、相对定位再配合负margin来实现，也要多写空标签，而且是两对嵌套的标签(共4个)。这个方法固然好，毕竟用图片嘛，更美观，锐化效果要好。现在这个方法不用图片，从优化的角度分析，纯css不是更好吗！不过弊端还是有，只适合半径1-2像素的圆角，大了锯齿就出来啦～

如果需要实现多种颜色，那么可以将定义颜色的样式属性抽出来，单独弄一个类，比如灰色，新建个gary类，放在最外层标签上，控制好颜色。想实现几种就建几种。代码如下：

第一个div添加gray这个类：

以下css添加至样式表最后一行，再将前面控制颜色的属性删掉：

接手新项目，要写一个如上图的东西，简单做个说明：外层盒子固定宽度，文章标题字数超出即隐藏，并实现省略号(支持的浏览器)，日期位置跟随标题宽度。

难度不大，关键要了解各浏览器的特性。这个东西难点就在于时间元素上，我利用float+负margin来解决，兼容性也好，遗憾的是hack没少用，实属无奈啊！-_-!

下面贴出代码：

css第4行， _background:transparent 解决IE6下“莫名”行高问题。

css第5行， _position:relative 解决IE6下该元素随外层宽度溢出隐藏。

css reset这里未提供，需自行添加。

用到图片一张：num.gif 打开后右键另存为！

预览demo：html5 forms demo

必填项

很简单，添加属性 required

输入框自动获取焦点

载入页面后，第一个NAME的输入框自动获取焦点。添加属性 autofocus

文本框的输入提示

一直以来都是利用javascript的onblur、onfocus来实现一个输入框的提示信息，现在只需要添加属性 placeholder="要提示的内容"

表单验证功能

将输入框的type设置为email，即可验证是否正确的邮箱地址。

有趣的input type=”range”

可拖动的滑块，可设置一个最小值(min)和一个最大值(max)，还可以设置每拖动一格数字变动的步长(step)。配合output实现当前值的显示。

output写法：

input type=”number”

点击上下箭头按钮实现数字的加减操作。与“可拖动的滑块”类似，可设置最小值、最大值、步长。

输入框下拉提示

可自行输入，也可以直接下拉选择。

日期选择

不需要任何脚本的支持即可实现日历控件。

点击图片查看大图

此文提供“靓图”对照，帮助记忆再加深印象。此文仅介绍几个可以说是比较“靠谱”的属性或值，其中包括有渐变、RGBA、文本阴影、Box 阴影、圆角。

渐变 gradient

background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue));

webkit引擎下，5个参数值，记住每个都需要用“逗号”隔开就是了。

1. 渐变的类型? (linear)
2. 渐变开始的X Y 轴坐标(0 0 – 或者left-top)
3. 渐变结束的X Y 轴坐标(0 100% 或者left-bottom)
4. 开始的颜色? (from(red))
5. 结束的颜色? (to(blue))

background: -moz-linear-gradient(top, red, blue);

Gecko引擎下，只有3个参数，linear已经放到了属性前缀中了。

1. 渐变从哪里开始? (top – 我们也可以使用度数，比如-45deg)
2. 开始的颜色? (red)
3. 结束的颜色? (blue)

background:linear-gradient(top, red, blue);

最后这个就是标准版本了，良好的前瞻是需要的。

还有几句要补充的：

如果你想设置超过2种以上的颜色渐变，那么可以这样写：

对于目前还没有支持css3的渐变的浏览器，比如IE、Opear，要记住在最前面写下一个简单的背景颜色(background-color)，否则看到的将是空白。

Firefox可以使用角度来设定渐变的方向，而webkit只能使用x和y轴的坐标。

最后，回到IE：

IE不支持CSS3渐变，不过好在IE有个渐变滤镜，可以实现最简单的渐变效果：

渐变的效果可能在每个浏览器里看起来都不相同，此乃正常现象。

————————————————-分割一下————————————————-

RGBA

R\G\B 分别指颜色值，a指透明度，0(透明)-1(不透明)。

只要是与颜色值有关的属性，都可以使用RGBA。

————————————————-分割一下————————————————-

文本阴影 text-shadow

x-offset(X轴距离), y-offset(Y轴距离), blur(阴影大小), color(阴影颜色)。

x-offset数值为正那么方向右，负则向左；y-offset数值正下负上。

可以为元素设置多重的阴影，中间用“逗号”隔开就行了。

————————————————-分割一下————————————————-

Box 阴影 box-shadow

与文本阴影(text-shadow)写法是一致的，唯一区别在于添加了box-shadow的同时还别忘了火狐(Gecko引擎)用-moz-，Safari、Chrome等WebKit引擎则添加-webkit-。

照样也支持多重阴影，中间用“逗号”隔开。

————————————————-分割一下————————————————-

圆角 border-radius

与边界、填充类似，也要区分火狐(Gecko引擎)，Safari、Chrome等WebKit引擎。

四个角可以设置不同值的，但要记得-moz-与-webkit-的区别。

原文地址：The Basics of CSS3

预览效果：demo

上图，可不是用画图软件制作的，而是浏览器生成。惊讶吧！css3的威力，巧妙的运用了圆角边框，阴影，背景渐变…等css3新特性。赞叹之余，我也亲自的动手制作了一下，就当学习一下了。以前了解过css3，但没动手写过，发觉有些属性还真是不好记，要区分三类浏览器(Gecko 、Presto、WebKit)，就越发的麻烦了。

其中不少地方的写法很新颖，充分的利用了伪类(before和after)，伪类配合绝对定位，双倍边框、椭圆、三角形等写法也很受教，真真切切体会到了css3的强大，希望css3时代早日到来。

原文地址：Pure CSS social media icons

推荐阅读：pure CSS speech bubbles

　　光说HTML 5的强大了，贴几个应用，感受一下(请使用支持HTML5的浏览器)。

1. Gordon

   　　号称：An open source Flash runtime，一个JS＋SVG应用。解析SWF文件，然后播放。不需要Flash插件，不可思议！但并不是所有的flash都能解析播放的。

2. 基于HTML 5的在线画板

   　　酷毙了!功能强大，画图毕后还能保存一张PNG格式的图片。

3. SublimeVideo

   　　HTML 5视频的一个强大的应用。播放器的操控很便捷，播放、暂停、拖动进度、时间显示，甚至还能够全屏播放，这里的全屏是浏览器窗口的范围，不是整个屏幕。全屏后播放器的控制条还能随鼠标的状态渐隐渐显，体验真是great！

4. HTML 5的YouTube(需要翻个“围墙”)

   　　最后我们再来看看伟大的YouTube，看她是如何将HTML 5付诸现实的。当然你需要有支持HTML 5的浏览器，还有H.264编码器。

　　HTML 5究竟离我们还有多远，我相信不会很快。直到IE9的普及，HTMl 5才能说真正意义上的敢派上“战场”！IE6这个绊脚石都还没瓦解，谈其它的，显得有点荒谬！IE6这个话题扯远了，罢了。保持那份期待还是美好的！

　　HTML5现在火，不火就怪了。很好，很弓虽大，哈哈！希望是个“喜剧”，而且不断的“演”下去。

　　先了解一下HTML5：

W3C 在 1 月 22 日发布了最新的 HTML 5 工作草案。HTML 5 工作组包括 AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera 以及数百个其他的开发商。HTML 5 中的一些新特性：嵌入音频、视频、图片的函数、客户端数据存储，以及交互式文档。其他特性包括新的页面元素，比如 <header>, <section>, <footer>, 以及 <figure>。

通过制定如何处理所有 HTML 元素以及如何从错误中恢复的精确规则，HTML 5 改进了互操作性，并减少了开发成本。

　　记录HTML5标签元素相对HTML4.01标签的不同处：

记录HTML5标签元素相对HTML4.01属性的不同处：

记录HTML5标签元素相对HTML4.01事件属性的不同处：

　　总结：HTML5提供了一系列新的元素和属性，并新增了新的视频和音频功能(<audio>、<video>)，取消了一些过时的标签、属性、事件属性。强化了网页的表现性能，追加了本地数据库等Web应用功能。

推荐阅读：

1. 5 Exciting Things to Look Forward to in HTML 5
2. 各浏览器对css3和html5的兼容表
3. 维基百科：HTML 5
4. W3C：HTML 5
5. Google 发布介绍 HTML 5 新特性的视频