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 打开后右键另存为！

正常盒模型：

实际显示宽度 = 设置的width或height + 边框 + 填充

IE 5.x及更前的版本：

实际显示宽度 = 设置的width或height(边框和填充被包含在里面)

怪异模式的IE8以下版本将使用IE5的盒模型，这点很重要，要记清了！

　　盒子宽度未定义且是静态(没有浮动)或者相对定位的，宽度为100%，边框和填充会向内推动，而不是向外扩展。若明确设置宽度为100%，那么则相反。

　　绝对定位盒子，没设置宽度，宽度则跟随内容自动缩放，只受相对定位的外层元素的宽度影响而换行，切记body是一个相对定位的盒子。

　　浮动盒子，没设置宽度，与绝对定位的盒子相似。不同点是受外层元素的宽度影响而换行（该元素不需要设置相对定位）。

　　块级元素，上下边界会重合，以数值较大一方为基准。浮动的块级元素不会有此问题。块级元素不能为内联元素的子元素。

　　内联元素，行与行之间的距离不受边界和填充的影响。不过，内联元素也是盒子，也有边距、填充、边框，只是变现得有点“反常”。

　　边界值可为负，填充值不可为负。

　　下节准备补习：浏览器模式(怪癖模式、标准模式、准标准模式)

做个笔记，具体实现效果看下面图片，偶不知如何用语言来描述了。具体原理偶也说不清了，反正能解决了问题就是王道。

具体数值是随行内缩进的距离变动的，上图的距离需要12pt，距离越远数值也就跟随着越大，反之，亦然。

利用li配合list-style-type的decimal来实现固然简单，但是如果需要复制文字再粘贴后保留前面数值，那么就…

这样的导航看起来挺复杂，做起来其实挺简单，只是IE6要用到滤镜来确保PNG的透明。万恶的IE6啊！

这里还用到inline-block，IE不支持inline-block，hack给inline，IE6下给定zoom也能解决，再利用负方向的margin值将透明部位重叠。

关键css:

预览效果：不规则的导航条

下载文件：点击下载

先上PP，容易明白此文内容。

不需要用到脚本(js)，仅css中transform属性(firefox文档, safari文档)，适当设置“值”，就能实现很酷的3d效果。

浏览器支持：Safari 3.2+, Google Chrome, Firefox 3.5+

基本是个华而无实的效果了，呵呵！玩玩还是不错的！

html：

css：

看个例子：

3d演示文档 – 注意：Safari 3.2+, Google Chrome, Firefox 3.5+才能显示正确效果

本来出处：http://www.fofronline.com/2009-04/3d-cube-using-css-transformations/

首先在前端开发的角度BS一下IE8，说什么支持CSS3，现在看来，前端开发的同鞋们还得等IE9，甚至可能IE10！因为大部分它还是没有支持，不过还是有个“安慰奖”滴！

CSS3是个好东西，能支持它的浏览器都是好样的！Safari, Firefox, Opera(支持部分)。好久没做笔记了！

note:

1. 去css3.info看看
2. 直接预览css带来的新体验
3. 不喜欢读洋文的，可以看看这里

这个css的升级，着实是帮了前端人员不小的“忙”，可惜的是浏览器们没赶上！不过，众多新加的功能中，个人认为真正有实用价值的也没几个！最有用的，当属“圆角(radius)”，其次“阴影(shadow)”、背景图像大小及数量(多背景)、嵌入字体(洋文的可能用得上)、透明度(opacity)、rgba等效果,剩下的就基本是华而无实了！最重要的，现在IE7、IE8都还和它们没“混熟”，默默期待吧！

这些CSS Selector，目前可能还不适合用在实际项目中。但是将来是肯定能开创一片天地的。只要IE6“倒下”！

CSS2：除IE6外当前主流浏览器都是支持滴！
A > B  匹配A的子元素B
A:first-child  匹配父元素的第一个子元素是A的A
A + B  匹配紧贴着A后面的B
A[property]  匹配含property属性的A
A[property="warning"]  匹配property属性完全等于warning的A(注意“完全等于”)
E[property~="warnging"]  匹配property属性包含warning的A(仅“包含”)

CSS3
A ~ B  匹配A以后的所有B，IE6不支持
A:empty  匹配空元素A，IE6、IE7不支持

详细请进：W3C Specification on CSS3 Selectors