在w3school把css3过了一遍，顺便就记些所有学到的东西。先上我的
DEMO
1.css3 border新增的三个属性
- border-radius
- box-shadow
- border-image
前两个我在之前的demo中都已经用到过了，今天才发现原来还有一个border-image,搜一下，我靠，这么牛逼，单这个属性就够写一篇文章了，搜到了三篇好文章，都讲解的很清晰透彻。先扔资料链接，你完全可以不看我的介绍了。。。不行，做了demo以后发现现在的属性和他们写文章的时候已经不一样了。遇到了点问题，当border-image-width的值小于border-image-slice并且没有fill关键词的时候为什么会虚晃的这么厉害，向下面的图这样，花了不少时间还是没弄明白。。
demo的border-image宽度是27*3=81px;九宫格每格的宽度是27px，当参数为border-image:url(border.png) 20 20 stretch;时就会出现上面图片的效果，而当设置为border-image:url(border.png) 29 29 stretch;时就是demo的效果，还没完全弄明白，没有搜到详细的解答。
HERE:找到了例子，看这里：
border-image-slice和一个实验室：
border-image
资料：
2.css3 background新增的三个属性
- background-origin
- background-clip
- background-size
先回顾一下css2.1中background的用法，css2.1中background有五个参数，参数的顺序依次为：
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
比如：body {background:#ffffff url('img_tree.png') no-repeat fixed right top;},也可以分开写。
再回到css3，background-origin用来决定background-position计算的相对参考位置，有三种模型：
| padding-box |
默认值。该位置是相对于衬距方框而言的。对于单一方框，“0 0”是衬距边缘的左上角；“100% 100%”是右下角。 |
| border-box |
该位置是相对于边框方框而言的。 |
| content-box |
该位置是相对于内容方框而言的。 |
语法为：
background-origin： border-box | padding-box | content-box;默认为padding-box
background-clip也有三个属性，和background-origin一样，但它指定的背景开始裁剪的位置。为了加强对比，我在clip属性示例中加入了黑色背景，大家山下对照着看就能理解他们的工作原理了。
语法为
:background-clip: border-box|padding-box|content-box;默认为border-box
backgroun-size设置背景图片的大小，可以设置为长度值，分别为长和高；还可以设置为相对于其父元素长度的百分比，如果只设定了一个值，则第二个值默认为auto，这两种可以混着用，我在demo里就是设置的background-size:50px 20%。另外还有两个值，分别是cover和contain，顾名思义，cover会把图片拉伸到最大，使之完全覆盖背景区域（默认的background是以padding为边界的，看demo里的第二幅图），contain则是拉伸图片使之覆盖内容区域（图三）。
语法为：
background-size:
length|
percentage|cover|contain;默认为auto;
发现点问题，demo页面在chrome和safari浏览器中，background-size属性的三个例子，第二个背景图片的右边和第三张背景图片的下面分别有1px左右的空白，在firefox里面就没有这个问题。搜索了一下没有找到相关的解答，还望知道的朋友告知一声~
还有一个问题，平时我们一般都是用1px的细虚线框，这在各个浏览器下表现都差不多，几乎没有差别。但是demo中我用的是20px的虚线框，这差别就出来了，详见下图：
想到怎么解决了么？就是用css3的border-image属性，具体介绍看这：
http://www.zhangxinxu.com/wordpress/?p=822,闻道有先后呀，学长10年就发现并解决了这个问题，但不管多少人研究过，知识总在那，这点总是让人欣慰的。这个问题值得深入的研究一下，等下篇文章再探讨。
另外发现background-clip一个未标准化的属性——text，在w3school里面没有介绍，但一些现代浏览器都已经支持，但效果上存在较大的差别，可以实现许多强大的效果。这里有一篇介绍：
http://tympanus.net/codrops/2011/12/12/experiments-with-background-clip-text/，文中的demo在firefox和chrome中的效果不一样，大家可以换浏览器看下。
还有一个问题，就是<br>标签在不同的浏览器下的间距，在chrome中，clip例子的前两个图下面的position-clip代码刚好在border上，而在firefox、safari和IE中则都在盒子的下方去了，还有个奇葩的opera，跑到上面去了。
3.css3 text effect
css3新增了两个text effect属性(还有其他的但许多浏览器没实现，w3s没详细介绍），分别是text-shadow和word-wrap，谷歌搜索text-effect可以找到很多不错的css3 text-effect教程，我在demo里面照着做了几个，大家可以看看，更多的详细教程大家还是用谷歌搜索一下。关于word-wrap属性w3cplus有一篇介绍，看了就可以完全明白了，就不多说了：
http://www.w3cplus.com/content/css3-word-wrap。
另外搜到一个很不错的css3教程，链接是
http://c7sky.com/works/css3slides
