CSS3 notes and CSS practical tips

CSS/CSS3 Online Brochure: http://www.css119.com/book/css/   50 CSS Snippet Prerequisites : http://blog.csdn.net/holandstone/article/details/17613089   CSS specification and common module code snippet: http://nec.netease.com/   30 types of CSS selectors that must be memorized: http://bbs.html5cn.org/thread-85312-1-1.html   CSS Production Horizontal vertical center alignment all methods: Http://www.w3cplus.com/css/vertically-center-content-with-css   css Less with inheritance, multi-use combination: http://www.w3cfuns.com/blog-5459640-5403984.html   Adaptive margin Negative layout beauty: http://www.cnblogs.com/jscode/archive/2012/08/28/2660078.html   10 How to affect the speed of CSS rendering and suggestions: http://bbs.html5cn.org/thread-2395-1-1.html   If you want to make sure which properties also need to rely on prefixes to work, you can query by Caniuse : http://caniuse.com/ Detection of browser support for HTML5 and CSS3: Http://fmbip.com/litmus   conditional styles Override CSS Hacks scenario: http://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/   CSS3 Animation Practical Tips Tutorial: http://www.html5cn.org/article-7806-1.html   CSS clip-path cropping various shapes: http://bennettfeely.com/clippy/   CSS3 Gradient effect: http://www.w3cplus.com/content/css3-gradient   CSS Drawing basic graphics code: http://spion.blog.163.com/blog/static/187244272201272791123671/   CSS3 3D Rotation effect: http://www.w3cplus.com/css3/css3-3d-transform.html   CSS3 Loading Progress prompt effect: http://www.html5cn.org/article-6458-1.html   CSS3 Animation library: http://ianlunn.github.io/Hover/   CSS3 shutter picture switch: http://www.html5cn.org/article-6860-1.html   font download and conversion : http://www.dafont.com/ http://www.fontsquirrel.com/tools/ Webfont-generator   CSS3 UI Library: http://css3lib.alloyteam.com/  determine if the browser supports CSS3 propertiesvar 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)///previous three values represent r,g,b values, the last value represents transparency, and the difference between the Opacity property is that the opacity of the parent container affects the transparency of the child elements, and RGBA does not affect it. the best way to be compatible with each browser: http://www.cnblogs.com/PeunZhang/p/4089894.html the Box-flex//property specifies whether the child elements of the box can scale their dimensions. The parent element adds a display:box that defines two scalable p elements. If the total width of the parent element is 300 pixels, the width of the #p1 is 100 pixels, and the width of the #p2 is 200 pixels Border-radius (Fillet): Horizontal radius Vertical radius (if you want to draw a circle, the box must be width = height, radius: Width/2) Box-shadow (Shadow): Horizontal vertical radius (shadow spread) color transform-style:preserve-3d (the child element retains its 3D position)/flat (the child element will not retain the 3D position); perspective:1000px;//sets the angle from where to view an element, which defines the distance of the 3D element from the eye, defined in pixels when the perspective attribute is defined for an element, its child elements get a perspective, not itself backface-visibility:hidden;//If the property defines whether the element is visible when it is not facing the screen, the back of the element is not displayed @keyframes rule: from{}to{}//to keep div elements moving downward at a constant speed, from where to Animation: rule name, run time, run speed, number of runs, whether the animation plays backwards in the next cycle, specifies whether the animation is running or paused @keyframes-selector{from{}to{}}//default 0-100%,from (same as 0%) to (same as 100%) transition is concerned with the changes in CSS properties, animation acting on the elements themselves rather than on style properties. Under Chrome, a page flicker sometimes occurs when using the transition effect transition:-webkit-transform-style:preserve-3d; or-webkit-backface-visibility:hidden; Transform:scale (0.9);//scale element scale, 1 as default if the values of Overflow-x and overflow-y are different, one of the property values is assigned to visible, and the other property value is assigned to auto, scroll, hidden, then the visible will be reset to auto, and a scroll bar appears.

CSS3 notes and CSS practical tips