Home > Developer > JavaScript
Border-radius to achieve rounded Corner Effect
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;
The Display Effect of Firefox, Chrome Google, Safari and other browsers is 0-0:
Figure 0-0
However, IE does not support this attribute of CSS3. The display effect in IE9 is 0-1:
Figure 0-1
However, you cannot leave it alone, or find a solution to this compatibility problem.
Solution: In the CSS file through the behavior property-this property can only be recognized by IE, introducing an htc file, ie-css3.htc
This is an HTC file written by Remiz Rahnas using VML, which provides support for Corner effects for IE browsers.
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);10 }
Take two screenshots to see the effect, one from IE6 and the other from IE9:
Box-shadow implements shadow effectNote: First, you need to introduce an HTC file on the Server. After gzip compression, the performance of the server and client should not be significantly affected. Second, it will make your CSS verification invalid; in addition, this script has some problems on IE8, it will change the z-index value to a negative number. Therefore, you must be careful when using it.
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2The results in Chrome, Firefox, and IE9 are as follows:
The next thing to do, presumably readers know, compatible with IE6-8. First Thought of the IE filter. Let's see the effect.
1. code snippet after the filter is added: 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; 10/* For IE 8 */11-ms-filter: "progid: DXImageTransform. microsoft. shadow (Strength = 8, ction = 135, Color = '# 000000') "; 12/* For IE 000000-7 */13 filter: progid: DXImageTransform. microsoft. shadow (Strength = 8, Direction = 135, Color = '#000000'); 14}After the test effect, are IE5.5-IE8:
Although unsatisfactory, it is useful. If you know other methods, can you tell me how to make progress together! Pai_^
Opacity achieves transparency1 div img{ 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;10 }Compatible with IE 6, 7, and 8. Effect (from IE6 ):
Transform: rotate (degree) to rotate the element X degrees1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2Let's go to W3C to see the compatibility of transform:
The above code has implemented support for the above browsers and their versions, but what about IE6, 7,8? As the saying goes, there is a lot of water to hide, and mountain people have their own tricks, but this trick 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
