CSS3笔记和CSS实用技巧
浏览数：18 /
时间：2015年06月09日
CSS/CSS3在线手册：http://www.css119.com/book/css/
50个CSS代码片段必备：http://blog.csdn.net/holandstone/article/details/17613089
CSS规范和常用模块代码段：http://nec.netease.com/
必须熟记的30类CSS选择器：http://bbs.html5cn.org/thread-85312-1-1.html
CSS制作水平垂直居中对齐所有办法：http://www.w3cplus.com/css/vertically-center-content-with-css
CSS之少用继承，多用组合：http://www.w3cfuns.com/blog-5459640-5403984.html
自适应之Margin负值布局之美：http://www.cnblogs.com/jscode/archive/2012/08/28/2660078.html
10条影响CSS渲染速度的写法与建议：http://bbs.html5cn.org/thread-2395-1-1.html
如果你想确保哪些属性还需要依赖于前缀来工作，可以通过CanIuse查询：http://caniuse.com/
检测浏览器对HTML5和CSS3的支持性：http://fmbip.com/litmus
条件样式替代CSS Hacks方案：http://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
CSS3动画实用技巧教程：http://www.html5cn.org/article-7806-1.html
CSS clip-path裁剪各种形状：http://bennettfeely.com/clippy/
CSS3渐变效果：http://www.w3cplus.com/content/css3-gradient
CSS绘制基本图形代码：http://spion.blog.163.com/blog/static/187244272201272791123671/
CSS3 3D旋转效果：http://www.w3cplus.com/css3/css3-3d-transform.html
CSS3加载进度提示效果：http://www.html5cn.org/article-6458-1.html
CSS3动画库：http://ianlunn.github.io/Hover/
CSS3百叶窗图片切换：http://www.html5cn.org/article-6860-1.html
字体下载和转换：http://www.dafont.com/ http://www.fontsquirrel.com/tools/webfont-generator
CSS3 UI 库：http://css3lib.alloyteam.com/
判断浏览器是否支持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;
}
background:rgba(0,0,0,0.5) //前面三个数值分别代表R，G，B数值，最后一个数值代表透明度，它和opacity属性的区别是：父容器的opacity会影响子元素的透明度，而rgba不会影响。
完美兼容各浏览器的办法：http://www.cnblogs.com/PeunZhang/p/4089894.html
box-flex //属性规定框的子元素是否可伸缩其尺寸。父元素添加display:box,定义两个可伸缩的 p 元素。如果父元素的总宽度是 300 像素，则 #p1 的宽度是 100 像素，而 #p2 的宽度是 200 像素
border-radius(圆角)：水平半径 垂直半径（如果要画圆，盒子必须宽度=高度，半径：宽度/2）
box-shadow(阴影)：水平 垂直 半径(阴影扩散) 颜色
transform-style:preserve-3D(子元素将保留其3D位置)/flat（子元素将不保留3D位置）;
perspective:1000px;//设置从何处查看一个元素的角度,即定义3D元素距眼睛的距离，以像素定义当为元素定义perspective属性时，其子元素获得透视效果，不是本身
backface-visibility:hidden;//当属性定义元素不面向屏幕时是否可见，即不显示元素背面
@keyframes 规则:from{}to{}//使 div 元素匀速向下移动,从哪到哪
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，出现滚动条。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
