Home > Developer > Web Develop
1 CSS3 Code: 2 3 -webkit-border-radius:10px; 4 -moz-border-radius:10px; 5 border-radius:10px; 6 background-color: #666; 7 width:200px;height:100px;
Firefox,chrome Google,safari and other browsers display the effect 0-0:
Figure 0-0
But IE this heterogeneous does not support CSS3 this attribute, the display effect under the IE9 0-1:
Figure 0-1
But don't let it go, or find a way to solve this compatibility problem.
Solution: In the CSS file through the Behavior property-this property can only be recognized by IE, introduced an HTC file, IE-CSS3.HTC
This is a HTC file written by Remiz Rahnas using VML to provide corner support for IE browser.
1 Div{2 -webkit-border-radius:10p;3 -moz-border-radius:10px;4 Border-radius:10px;5 Background-color:#666;6 width:200px;7 Height:100px;8 Color:#fff;9 Behavior:URL (ie-css3.htc);Ten}
Cut two pictures to see the effect, one from IE6, one from IE9:
Box-shadow to achieve shadow effectsNote: First, the server side needs to introduce an HTC file, after gzip compression on the server side and client side performance should not be too much impact; second, it will make your CSS validation is not legal; In addition, this script has some problems on IE8, it will make Z-ind The ex value becomes negative. It is therefore necessary to use caution.
1 <!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd ">2 <HTMLxmlns= "http://www.w3.org/1999/xhtml"Xml:lang= "en">3 <Head>4 <Metahttp-equiv= "Content-type"content= "Text/html;charset=utf-8" />5 <title></title>6 <styletype= "Text/css">7 div img{8 Background-color:#fff;9 -webkit-box-shadow:5px 5px 5px #000;Ten -moz-box-shadow:5px 5px 5px #000; One Box-shadow:5px 5px 5px #000; A width:295px; - Height:300px; - /*For IE 8*/ the -ms-filter:"Progid:DXImageTransform.Microsoft.Shadow (strength=8, direction=135, color= ' #000000 ')"; - /*For IE 5.5-7*/ - Filter:Progid:DXImageTransform.Microsoft.Shadow (strength=8, direction=135, color= ' #000000 '); - } + </style> - </Head> + <Body> A <Div> at <imgsrc= "Beautiful.jpg"> - </Div> - </Body> - </HTML>
The effect under CHROME,FIREFOX,IE9 shows:
The next thing to do, presumably reader friends know, compatible with ie6-8. First think of the IE filter. Let's take a look at the effect.
1 Add the code snippet after the filter:2 3 Div img{4 background-color: #fff;5 -webkit-box-shadow:5px 5px 5px #000;6 -moz-box-shadow:5px 5px 5px #000;7 box-shadow:5px 5px 5px #000;8 width:295px;9 height:300px;Ten / * for IE 8 * / One -ms-filter: "Progid:DXImageTransform.Microsoft.Shadow (Strength=8, direction=135, color= ' #000000 ')"; A / * for IE 5.5-7 * / - Filter:progid:DXImageTransform.Microsoft.Shadow (strength=8, direction=135, color= ' #000000 '); -}
The results after the test are IE5.5-IE8, respectively:
Although it is passable, it is used. If a friend knows how to do otherwise, can you tell a sound, and make progress together! ^_^
Opacity achieve transparency effects1 2 width:295px; 3 height:300px; 4 -webkit-opacity:0.3; 5 -moz-opacity:0.3; 6 opacity:0.3; 7 /*for IE 6,7,8*/ 8 filter:alpha (opacity=30); 9 border:1px solid #ccc; Ten }
Compatible with IE 6,7,8. Effect (from IE6):
Transform:rotate (degrees) rotate an element by X-degree1 <!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd ">2 <HTMLxmlns= "http://www.w3.org/1999/xhtml"Xml:lang= "en">3 <Head>4 <Metahttp-equiv= "Content-type"content= "Text/html;charset=utf-8" />5 <title></title>6 <styletype= "Text/css">7 Div{8 9 width:150px;Ten Height:50px; One margin:50px; A -webkit-transform:Rotate (7deg); - -moz-transform:Rotate (7deg); - -ms-transform:Rotate (7deg); the -o-transform:Rotate (7deg); - Transform:Rotate (7deg); - Border:1px solid #ccc; - } + </style> - </Head> + <Body> A <Div> at - </Div> - </Body> - </HTML>
Let's go and see Transform compatibility:
The above code has implemented support for the above browsers and their versions, but what about ie6,7,8? As the saying goes, soldiers to will block, punches, the hermit's own ingenious plan, but this ingenious idea is borrowed.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
