这两天没办法实时更新文章了，只能先写下来预发布了，那就没办法回复留言了。本来打算不更新的但又想到最近PR也快更新了，所以就将就着更新几篇文章。今天给大家介绍几个比较好用的CSS过滤器。
* html #element { color:red}
*+html #element { color:red}
div > #element { color:red}
html >/**/ body #element { color:red}
下面这个例子可以知道你用的是什么样的浏览器：预览及查看效果
上篇文章说到了CSS 3新增属性详解(一)—>边框，今天咱研究研究背景。
关于背景有四个属性：
兼容性：FireFox 3.0+ , Chrome 1.0+ , Safari 3.1+ , Opera 9.63+
效果如下图：点击查看原效果及代码(图1,2,3)
background-origin
CSS代码：
-moz-background-origin:border; /*从边框部分开始平铺背景图片*/ -webkit-background-origin:border; /*也可以从padding,content部分开始*/
兼容性：FireFox 3.0.10+ , Chrome 2.0+ , Safari 4+ , Opera 9.64+
效果如下图：点击查看原效果及代码(图4,5,6)
background-clip
CSS代码：
-moz-background-clip:content; /*当背景图片小于div大小时*/ -webkit-background-clip:content;/*背景图片从内容部分被剪切*/
兼容性：Chrome 1.0+ , Safari 3.1+ , Opera 9.63+
效果如下图：点击查看原效果及代码(图7)
background-size
CSS代码：
-webkit-background-size:100% 50%; /*背景将拉伸至div宽的100%高的50%*
兼容性：Chrome 1.0+ , Safari 3.1+
效果如下图：点击查看原效果及代码(图8)
multiple-backgrounds
CSS代码：
background-image:url(flower-02.jpg),url(flower-04.jpg); /*设置两个背景图片*/ background-position:left top,right bottom; /*设置背景图片的平铺位置*/ background-repeat:no-repeat,no-repeat; /*设置两个背景图片的平铺方式*/
最近从腾迅团队的博客(ISD webteam)上下载了CSS 3新增属性手册，自己也在学习和研究中。顺便也发上来和大家分享，每个属性我都会做一个实例以便理解，也算是学习笔记吧。如果你想去官方看看那么可以去这里：http://www.css3.info/preview/
边框有四个相关属性：
兼容性： 其它浏览器中没什么可说的，唯独在FireFox3.0+(表示火狐3.0版本以上)多出了方向的控制，即：border-top-color, border-right-color, border-bottom-color , border-left-color。
效果如下图：(所有效果及源代码)
兼容性：FireFox 3.5+ , Chrome 1.0+ , Safari 3.1+
效果如下图：
—–>这是引用图片
注意：此例在Firefox下貌似无法产生stretch(图片拉伸)效果，上上图为Chrome下正常显示
效果如下：
兼容性 : Firefox3.0+ , Chrome1.0+ , safari3.1+
-moz-border-radius:10px；
10px为圆角半径
效果如下：
兼容性 : Firefox3.5+ , Chrome2.0+ , safari4+
-moz-box-shadow:2px 2px 10px #000
四个值分别为：阴影水平偏移值，阴影垂直偏移值，阴影模糊值，阴影颜色。显然用这个属性来做相册是首选。
CSS的选择器可谓种类繁多，属性选择器就是其中一种，虽然老浏览器(如IE6)不支持，但当前主流的标准浏览器都很好的支持。所以有必要学习一下。
所谓属性选择器就是能选择具有指定属性元素的CSS选择器。比如：
input[type="text"] { border:1px;}
这条CSS规则就声明了类型为文本框的输入标签的边框为1像素。这是一般而言的属性选择器，当元素比较复杂时就得用到可以匹配属性的高级选择器了。比如：
div[class^="menu"] { color:red;}
div[class$="menu"] { color:red;}
div[class*="menu"] { color:red;}
大家可以看到不同的一点就是class后面跟的三人符号：”^”,”$”,”*”。分别表示：
1.匹配具有class属性，且值以menu开头的div元素。例如：class为menu1,menua,menu0都可以渲染指定CSS规则。
2.匹配具有class属性，且值以menu结尾的div元素。例如：class为1menu,amenu,0menu都可以渲染指定CSS规则。
3.匹配具有class属性，且值含有menu的div元素。例如：class为1menu,menu1,0menua都可以渲染指定CSS规则。
注意：须在标准浏览器下浏览(IE7+ , FireFox2.0+ , chrome1.0+ , safari3.1+)
最近看 亚当教程 时发现了这个IE6 bug，刚好我的博客sidebar部分也遇到此问题所以就发出来和大家分享一下。由于此bug只属于IE6的独特之处原因也说不清。所以直接上代码：
<div> <div>浮动元素<br/>[标准浏览器中不会有问题]</div> <a href="#">IE6中碰到第三个a标签会隐藏掉一部分浮动元素</a> <a href="#">IE6中碰到第三个a标签会隐藏掉一部分浮动元素</a> <a href="#">IE6中碰到第三个a标签会隐藏掉一部分浮动元素</a> <a href="#">IE6中碰到第三个a标签会隐藏掉一部分浮动元素</a> <div></div> </div>
.box-outer{ padding:10px; border:1px solid #ccc; background:#eee;
height:1%; overflow:hidden}
.box-inner{ float:left; padding:10px; border:1px solid #ccc;
background:#eee; width:80px; height:120px;}
a { text-decoration:none; display:block;}
a:hover {/*background:#fff;*/
/*padding:1px;*/
border:1px solid red;
/*三个属性任意一个都可以使IE6产生bug*/}
此时在标准浏览器中是完全正常的，介是在IE6中当鼠标移动到第三个链接时会使浮动元素中的部分消失。修复这个部题的办法也比较简单只要链接后加入一个清除浮动的div就行了。从这个例子中也可以看出来：heigh:1%; overflow:hidden清楚浮动的办法也有不可之处。加入一个额外的div来清楚浮动虽然背离标准但效果应该是最好的也最符合浮动的定义。