CSS3 part of the property compatibility awkward writing (because a lot of I call him awkward, hoping to fully support CSS3 early)

/*fillet class, the element that needs to be rounded, plus the class name*/. RoundedCorners{-webkit-border-radius:10px;/*WebKit Kernel Browser*/-moz-border-radius:10px;/*Moz Kernel Browser*/Border-radius:20px;/*browsers that support CSS3 fillet properties directly (such as IE10)*/}/*use with JS*//*transparency class, the element that needs to set the transparency plus the class name*/. Transparent{-webkit-opacity:0.3;-moz-opacity:0.3;Opacity:0.3;Filter:Alpha (opacity=30);/*For IE 6,7,8*/}/*box Shadow class, you need to set the element of the shadow plus the class name (note: IE9 on the fillet display has a source, IE8 on the fillet and transparency properties will be invalid, IE7 the Transparency property will not be valid)*/. Boxshadow{-webkit-box-shadow:5px 5px 5px #000;-moz-box-shadow:5px 5px 5px #000;Box-shadow:5px 5px 5px #000;Filter:Progid:DXImageTransform.Microsoft.Shadow (strength=8, direction=135, color= ' #000000 ');/*For ie6,7,8*/}/*CSS3 Font Extension compatible notation **/@font-face{font-family:' Yourwebfontname ';src:url (' Yourwebfontname.eot ');/*IE9 Compat Modes*/src:url (' yourwebfontname.eot #iefix ') format (' Embedded-opentype '),/*IE6-IE8*/url (' yourwebfontname.woff ') format (' Woff '),/*Modern Browsers*/url (' yourwebfontname.ttf ') format (' TrueType '),/*Safari, Android, IOS*/url (' yourwebfontname.svg#yourwebfontname ') format (' SVG ');/*Legacy IOS*/}/*CSS3 2D convert rotation rotate () method: The element rotates the given angle clockwise. Negative values are allowed, and the elements rotate counterclockwise. (Rotate by center) * Does not support IE9 below*/. Transformrotate{Transform:Rotate (30deg);-ms-transform:Rotate (30deg);/*IE 9*/-webkit-transform:Rotate (30deg);/*Safari and Chrome*/-o-transform:Rotate (30deg);/*Opera*/-moz-transform:Rotate (30deg);/*Firefox*/}/*CSS3 2D convert Move translate () method: The element moves from its current position, depending on the given left (x-coordinate) and top (y-coordinate) position parameters * does not support IE9 following*/. Transformtranslate{Transform:Translate (50px,100px);-ms-transform:Translate (50px,100px);/*IE 9*/-webkit-transform:Translate (50px,100px);/*Safari and Chrome*/-o-transform:Translate (50px,100px);/*Opera*/-moz-transform:Translate (50px,100px);/*Firefox*/}/*CSS3 2D Conversion Zoom Scale () method: The dimension of the element will increase or decrease, depending on the given width (X axis) and height (Y axis) parameter * does not support IE9 following*/. Transformscale{Transform:Scale (2,4);-ms-transform:Scale (2,4);/*IE 9*/-webkit-transform:Scale (2,4);/*Safari and Chrome*/-o-transform:Scale (2,4);/*Opera*/-moz-transform:Scale (2,4);/*Firefox*/}/*CSS3 2D Conversion Combination Matrix () method: The Matrix () method combines all 2D conversion methods. The *matrix () method requires six parameters, including mathematical functions that allow you to: rotate, scale, move, and skew elements. * IE9 below is not supported*/. Transformmatrix{Transform:Matrix (0.866,0.5,-0.5,0.866,0,0);-ms-transform:Matrix (0.866,0.5,-0.5,0.866,0,0);/*IE 9*/-moz-transform:Matrix (0.866,0.5,-0.5,0.866,0,0);/*Firefox*/-webkit-transform:Matrix (0.866,0.5,-0.5,0.866,0,0);/*Safari and Chrome*/-o-transform:Matrix (0.866,0.5,-0.5,0.866,0,0);/*Opera*/}

There is a very detailed note, there is a point to say that the CSS is not only the corner of the CSS properties, as well as the JS section, the following is the explanation

The remarks on the cooperation JS principle is as follows

Introducing in your HTML page

<script type= "Text/javascript" src= "Assets/plugins/curvycorners.js" ></script><!--compatible with fillet properties above IE6-- >

Curvycorners.js online Check it out, there is no link!
Again in your JS file to write:

$(function() {addevent (window,' Load ', initcorners);/*CSS3 Fillet Property compatible code IE9 and below*/    functioninitcorners () {varsetting ={tl: {radius:20}, tr: {radius:20}, BL: {radius:20}, br: {radius:20}, AntiAlias:true} curvycorners (setting,". RoundedCorners");/*binding elements that require fillets to be generated*/    }})

If you want to bind multiple elements, you can write this:

Curvycorners (setting, ". RoundedCorners1");

Curvycorners (setting, ". RoundedCorners2");

Curvycorners (setting, ". RoundedCorners3");

Make IE low version compatible with CSS3 pseudo tags:

<!--[if (GTE IE 6) & (LTE IE 8)]>    <Scripttype= "Text/javascript"src= "Bower_components/selectivizr/selectivizr.js"></Script><!--compatible with IE support for CSS3 pseudo-class and attribute selectors (for a detailed support list see explanation/description Images/selectivizr Spinner list. png) -    <!--<noscript><link rel= "stylesheet" href= "[Fallback CSS]"/></noscript>&lt;! &ndash; css file path when the browser does not support scripting &ndash;&gt; -    <![endif]-->

Its supported pseudo-tags:

Same file yourself Baidu Bar!

Let IE support HTML5 defined tags:

 <!-[if IE]>    <Scriptsrc= "Assets/plugins/html5.js"></Script>    <![endif]->    <!--Network connection Html5.js address http://html5shiv.googlecode.com/svn/trunk/html5.js simplified version html5.js file content 
     -

CSS3 part of the property compatibility awkward writing (because a lot of I call him awkward, hoping to fully support CSS3 early)