CSS3动画手册：https://isux.tencent.com/css3/index.html?transform
CSS3实现水平垂直居中：http://bbs.html5cn.org/thread-87300-1-1.html http://www.w3cplus.com/css/centering-css-complete-guide.html
CSS魔法：http://www.cssmagic.net/
你很熟悉CSS，却没掌握这些CSS技巧：http://www.html5cn.org/article-9294-1.html
如果你想确保哪些属性还需要依赖于前缀来工作，可以通过CanIuse查询：http://caniuse.com/
检测浏览器对HTML5和CSS3的支持性：http://fmbip.com/litmus
CSS3在线生成器：http://www.css3maker.com/
CSS视口单位快速入门：https://juejin.im/post/590091c81b69e60058b715c5?utm_medium=hao.caibaojian.com&utm_source=hao.caibaojian.com
CSS3奇思妙想，使用CSS3实现各类图形：http://chokcoco.github.io/magicCss/html/index.html#pesudo
制作CSS图片：https://segmentfault.com/a/1190000008627248
CSS3渐变生成器：http://www.colorzilla.com/gradient-editor/
腾讯CSS3动画制作工具：http:http://isux.tencent.com/css3/tools.html
CSS3动画实用技巧教程：http://www.html5cn.org/article-7806-1.html
CSS3 UI 库：http://css3lib.alloyteam.com/
CSS3为图片添加hover的CSS库：http://webres.wang/css-libraries-for-adding-image-hover-effects/?utm_source=top.caibaojian.com/98081&from=weibo.com/kujian
CSS3 :hover时的各种效果：http://linxz.github.io/CSS_Skills/demo/other/about_hover_pseudo_class.html
CSS3渐变效果：http://www.w3cplus.com/content/css3-gradient
CSS3 3D旋转效果：http://www.w3cplus.com/css3/css3-3d-transform.html
CSS3加载进度提示效果：http://www.html5cn.org/article-6458-1.html
CSS3动画库：http://speckyboy.com/2015/09/09/css-animation/
CSS3百叶窗图片切换：http://www.html5cn.org/article-6860-1.html
CSS3制作圆环进度动画效果：http://caibaojian.com/css3-round.html?wb
CSS3 clip-path裁剪各种形状：http://bennettfeely.com/clippy/
字体下载和转换：http://www.dafont.com/ http://www.fontsquirrel.com/tools/webfont-generator
高效CSS选择器编写注意事项：http://web.jobbole.com/35339/
炫酷CSS3复选框checkbox样式美化效果：http://www.html5cn.org/article-8755-1.html
jquery+css3圆环百分比进度条制作：http://caibaojian.com/jquery-circular-progress.html?wb
select原生控件修饰器：http://aui.github.io/popupjs/doc/selectbox.html http://caibaojian.com/css-select-2.html?wb
判断浏览器是否支持css3的属性
var element = document_create Element ('div');
if('text-overflow' in element.style){
element.style['text-overflow'] = 'ellipsis';
return element.style['text-overflow'] === 'ellipsis';
}
else{
return false;
}
为容器的四个内边距添加相同的数值（15px），但是容器内的文字让上下两边的内边距显得比左右两边更大一些。容器看起来并不协调。究其原因就是在水平方向上字体形状更加连贯，导致我们的眼睛认为垂直方向上的多余空间都是内边距。因此，我们在垂直方向上减少内边距，才能让四边的内边距看起来一致。
inherit 可以被应用到任何的 CSS 属性上，并且会根据父级元素的属性计算出恰当的值（如果是伪元素，那么就会根据当前元素属性来计算）。比如，让表单元素和页面其他元素具有相同的字体，无需一一指定，直接使用 inherit。
当属性值相互关联时，应该在代码中体现它们的关联性，使代码更具有维护性。 比如font-size和line-height之间的关联，子元素使用em继承父元素font-size等。
background:rgba(0,0,0,0.6) //前面三个数值分别代表R，G，B数值，最后一个数值代表透明度，它和opacity属性的区别是：父容器的opacity会影响子元素的透明度，而rgba不会影响。
完美兼容各浏览器的办法：http://www.cnblogs.com/PeunZhang/p/4089894.html
http://www.zhangxinxu.com/wordpress/2010/05/rgba
或者
.class {
filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#CCFFFFFF', endColorstr='#99000000');
}
:root .class {
filter:none; /*处理IE9浏览器中的滤镜效果*/
background-color:rgba(0,0,0,0.6);
}
border-radius: 35px 25px 30px 20px / 35px 25px 15px 30px;
如果斜杠/前后都设了值，那么斜杠前面的值就设定横向的圆角半径值，而斜杠后面的值就是设定纵向的半径值。如果没有斜杠的话，就把横向跟纵向的值设定为相等。
对于p:nth-child(2)选择器，意味着选择一个元素如果：
1、这是个段落元素
2、这是父标签的第二个子元素
对于:nth-of-type(2)选择器，意味着选择一个元素如果：
1、选择父标签的第二个段落子元素（限制条件少些）
参考博客：http://www.zhangxinxu.com/wordpress/2011/06/css3%E9%80%89%E6%8B%A9%E5%99%A8nth-child%E5%92%8Cnth-of-type%E4%B9%8B%E9%97%B4%E7%9A%84%E5%B7%AE%E5%BC%82/
box-flex //属性规定框的子元素是否可伸缩其尺寸。父元素添加display:box,定义两个可伸缩的 p 元素。如果父元素的总宽度是 300 像素，则 #p1 的宽度是 100 像素，而 #p2 的宽度是 200 像素
box-sizing:content-box;和box-sizing:border-box;的用法和区别：http://www.w3cplus.com/content/css3-box-sizing
利用CSS3选择器选择第7到14个元素：ul li:nth-child(n+7):nth-child(-n+14) {
background: lightpink;
}
这个功能在Safari中不起效。解决方案：只需将选择器中的顺序换一下，变成这样：ol li:nth-child(-n+14):nth-child(n+7)。Webkit不能识别这种写法，所以你最终还是可以让它在Safari中正常运行。
placeholder在文本框内水平居中：
input[type="text"]::-webkit-input-placeholder{text-align: center;}
input[type="text"]::input-placeholder{text-align: center;}
border-radius(圆角)：水平半径 垂直半径（如果要画圆，盒子必须宽度=高度，半径：宽度/2）
box-shadow(阴影)：内/外(默认是外，设置inset则为内) 水平 垂直 半径(阴影扩散) 颜色,多重阴影只需将两组值使用逗号分隔开即可，这样两组阴影就会按照代码中的先后顺序从上到下应用到元素上(文字阴影同理)
text-shadow:0 1px 0 hsl(0,0%,100%,0.75); //浮雕效果，诀窍：不要模糊，不要水平阴影，仅在垂直方向设置1或2像素的"白影"即可
linear-gradient(线性渐变):(90deg,#fff 0%,#e4e4e4 50%,#fff 100%) //渐变方向 渐变起点(起点的颜色和位置，允许为负值，则在可见区域之外) 过渡颜色点(逗号分隔，自定义更多) 渐变终点
transform-style:preserve-3D(子元素将保留其3D位置)/flat（子元素将不保留3D位置）;
perspective:1000px; //设置从何处查看一个元素的角度,即定义3D元素距眼睛的距离，以像素定义当为元素定义perspective属性时，其子元素获得透视效果，不是本身
backface-visibility:hidden; //当属性定义元素不面向屏幕时是否可见，即不显示元素背面
@keyframes 规则:from{}to{} //使元素匀速向下移动,从哪到哪
animation：规则名称，运行时间，运行速度，运行次数,动画是否在下一周期逆向地播放,规定动画是否正在运行或暂停
@keyframes-selector{from{}to{}} //默认0-100%，from（与 0% 相同）,to（与 100% 相同）
transition关注的是CSS属性的变化,animation作用于元素本身而不是样式属性。在Chrome下，使用过渡效果transition时有时会出现页面闪动，方法：
-webkit-transform-style:preserve-3d;或-webkit-backface-visibility:hidden;
transform:scale(0.9);//缩放元素比例，1为默认
如果overflow-x和overflow-y的值不同，其中一个属性值被赋值为visible，而另一个属性值被赋值为auto、scroll、hidden，那么visible会被重置为auto，出现滚动条。
background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-origin] [background-clip];
注意里面的反斜杠，它跟font和border-radius里简写方式使用的反斜杠的用法相似。反斜杠可以在支持这种写法的浏览器里在position后面接着写background-size。如果简写时缺少某一个属性值，则background失效。
background-size有两个预设值contain和cover，contain是将背景图片等比缩放到宽度或高度与容器的宽度或高度相等，背景图片始终被包含在容器内；而cover是将背景图片等比缩放到完全覆盖容器，背景图片有可能超出容器。
HSL(色相、饱和度、亮度)也可以设置元素的颜色，而且HSLA透明规则和RGBA一样。
使用HSL可以轻松方便地实现鼠标悬停时颜色加深的效果：#btn{background-color: hsl(359,99%,50%);} #btn:hover{background-color: hsl(359,99%,40%);}(RGBA方法同理)
PhotoShop阴影效果转换成css中box-shadow
混合模式：PhotoShop提供了多种混合模式，但是CSS3只支持正常模式(normal)。
颜色： 阴影颜色。对应于CSS3阴影中的color值。
不透明度(Opacity)： 阴影的不透明度。对应于CSS3阴影的颜色rgba()中的a。
角度(Angle)：阴影的角度。
距离(Distance)：阴影的距离。根据阴影的角度和距离，可以计算出CSS3阴影中的h-shadow和v-shadow。
h-shadowt = Distance * cos(180 - Angle)
v-shadowt = Distance * sin(180 - Angle)
扩展(Spread)：阴影的扩展大小。控制阴影实体颜色和虚化颜色的多少。
大小(Size)：阴影的大小。
spread = Spread * Size
blur = Size - spread
box-shadow语法：
box-shadow: h-shadow v-shadow blur spread color inset;
text-shadow语法：
text-shadow: h-shadow v-shadow blur color;
text-shadow没有spread,所以不能完全实现。
组合使用CSS3属性实现按钮样式：
<a href="javasript:" class="btn">我的按钮</a>
.btn{
display: inline-block;
padding: 15px;
text-decoration: none;
font-size: 25px;
background-color: #b01c20;
color: #fff;
border: 1px solid #bfbfbf;
border-radius: 5px;
text-shadow: 0 1px #000;
box-shadow: 0px 0px 3px hsla(0,0%,26.6667%,0.8);
background: linear-gradient(90deg,#b01c20 0%,#f15c60 100%);
}
用CSS3动画实现省略号动画：
<div class="loading"></div>
.loading:after {
overflow: hidden;
display: inline-block;
vertical-align: bottom;
animation: ellipsis 2s infinite;
content: "2026"; /* ascii code for the ellipsis character */
}
@keyframes ellipsis {
from {
width: 2px;
}
to {
width: 15px;
}
}