大而全的CSS3 API类型书，并带有一些实用案例讲解，层次分明分类明确，新增技术都做了详情介绍。个人觉得如果在细节和文字表达上再下些功夫会更出色，其中部分内容如：rem、Media Queries网上资料更全。读本书之前，事先在些渠道学过CSS3，故花了2天左右，近300页的篇幅。剩下的就是写案例（完全理解和消化变成自己的）和Blog总结了~
1）比较实用的属性、伪类选择器，其它没有记录的可在使用时直接查API
[attr] 只使用属性名，没有属性值
[attr=“value”] 属性名加值
[title~=flower] 选择 title 属性包含单词 "flower" 的所有元素 注：字符
a[src^="https”] 选择其 src 属性值以 "https" 开头的每个 <a> 元素 注：字符
a[src$=".pdf”] 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素 注：字符
a[src*="abc”] 选择其 src 属性中包含 "abc" 子串的所有 <a> 元素 注：字符
[lang|=en] 选择 lang 属性值以 "en" 开头的所有元素 注：必须是单词或者后面跟着连字符en-
:before 元素之前插入一些内容
:after 元素之后
:root 将样式绑定到页面根元素中
:not 排除结构下的子元素
:empty :target
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child 匹配父元素的第N个子元素，会将父元素一起计算 nth-child(4n+1) 4n循环中包括几种样式，1指定样式在循环中的位置
:nth-last-child 从最后一个元素开始匹配
:nth-of-type 匹配父元素的第N个子元素
:nth-last-of-type 从最后一个元素开始
:only-child 父元素的唯一一下子元素
17种UI元素状态伪类选择器:hover,:active,:focus,:enabled(可用状态),:disabled(不可用状态),:read-only(只读，配合readonly属性一起使用),read-write(可编辑):checked,:default,:indeterminate,::selection(元素被选中时的样式),:invalid(不能通过一些属性的检查时),:valid,:required,:optional,:in-range(输入的值在有效范围内),:out-of-range
2）使用选择器在页面中插入指定内容
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>content</title> <style type="text/css"> h1:before{ content:'1' } h2:after{ content:url(http://images.cnblogs.com/cnblogs_com/chenlily/853011/o_thumb_IMG_1654_1024.jpg); } img:after{ content:attr(alt); display: block; } h3:before{ content:counter(counter,upper-alpha)'.'; } h3{ counter-increment: counter; } h4:before{ content:'第'counter(mycounter)'天'; } h4{ counter-increment: mycounter; counter-reset: subcounter; } h5:before{ content:'第'counter(subcounter)'天'; } h5{ counter-increment: subcounter; margin-left: 40px; } p:before{ content: open-quote; } p:after{ content: close-quote; } p{ quotes: "(" ")"; } </style> </head> <body> <!-- 选择器的content属性可插入文字 --> <h1>冬季的大五台</h1> <!-- 图片 --> <h2>风雪兼程</h2> <!-- 属性名content:attr(alt)，只有Opera10浏览器支持 --> <!-- <img src="http://images.cnblogs.com/cnblogs_com/chenlily/853011/o_thumb_IMG_1986_1024.jpg" alt="大五台" /> --> <!-- 项目编号,指定编号种类和样式--> <h3>行程：</h3> <!-- 编号中追加文字 --> <h4>东台到北台</h4> <!-- 编号嵌套和追回文字一样 --> <h5>大风</h5> <!-- counter-reset: subcounter将二级编号进行重置 --> <h4>北台-中台-西台</h4> <h5>一群女汉子</h5> <!-- 字符两边嵌套文字符号，如果是双引号需加转义字符 --> <p>致谢</p> </body> </html>
3）文字
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>给文字添加阴影</title> <style type="text/css"> p{ text-shadow:5px 5px 5px gray; /*阴影*/ text-shadow:-5px 5px 5px gray; /*位移*/ text-shadow:5px 5px 25px gray; /*模糊*/ text-shadow:5px 5px gray; /*实体*/ text-shadow:5px 5px 5px; /*默认颜色黑色*/ text-shadow:5px 5px 5px gray, 40px 30px 5px red, 70px 65px 5px blue; /*多个阴影*/ } </style> </head> <body> <p>Hello，我是梨子</p> </body> </html>
文字换行word-break:normal(浏览器默认，遇到标点符号时会与它前面的一个字一起换行) keep-all(只能在半角空格或连字符处换行) breadk-all(允许单词内换行)；word-wrap:break-word让长单词与URL地址自动换行
使用服务器端字体@font-face{font-family:;src:;}
text-overflow:ellipsis;white-space:nowrap;overflow:hidden;多出的文字省略，文字不换行
4）盒阴影box-shadow:0 0 gray;inset设置为内阴影box-shadow:inset 0 0 5px 5px gray;
5）背影和边框background-clip背景的显示范围，background-origin背景图像的起点，背景尺寸及背景平铺space、round选项，多个背影图用逗号隔开，渐变背景色background:linear-gradient()，放射性渐变background-img:radial-gradient()，border-image指定边框背景repeat平铺、stretch拉伸，outline-offset轮廓线向外距离
6）CSS3变形处理transform
旋转、缩放、倾斜、移动
7）CSS3中的动画功能transition、animation
8）布局相关样式
9）CSS3Filter（滤镜）属性
提供了模糊和改变元素颜色等功能，常用于调整图像的渲染、背景或边框显示效果。DOME
最后希望自己能学以致用吧