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”

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

输入框下拉提示

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

日期选择

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