IE瀏覽器兼容CSS3新屬性border-radius

使用PIE對IE進行CSS3兼容介紹及渲染

重要功能實現：   可以使 IE6、7、8 、9 實現類似 chrome 和 firefox 

1.  更自然逼真的陰影效果，不再是以前那種醜陋的濾鏡效果。 

2.  實現很自然的圓角效果 

3.  實現部分 CSS3  的強悍效果，如 多背景圖，border-image，更強的背景漸變效果。 

4.  png 圖片透明效果   

使用方法：   1.  .htc 大概是瀏覽器補丁模式 css中使用behavior 來加載即可自動實現效果，  

.text_border_radius{
            width:100px;
            height:100px;
            background-color: #00A0E9;
            position: relative;
            z-index: 1000;
            -moz-border-radius:  50px ;
            -webkit-border-radius:  50px;
            border-radius: 50px;
            behavior: url(PIE-1.0.0/PIE.htc);
        }

注意路徑，最好是直接使用 URL 的絕對路徑，   如果無法顯示可能是 服務器端不支持該類型文件格式的解析，可以在服務器配置文件的   mime.types文件的末尾增加一行：text/x-component htc，運用該方法的時候一定要保證，該標籤的軸高度，所以z-index一定要設置，要想z-index有作用又必須，使元素脫離文檔流，所以就需要用到position,-moz-border-radius:  50px ;  -webkit-border-radius:  50px;一定要加防止別的瀏覽器版本太低。   

2.  .js 方式,很靈活,簡單   下載並解壓縮  http://css3pie.com/download-latest   使用  PIE.js  文件  

<script type="text/javascript" src="PIE.js"></script>
<script type="text/javascript">
PIE.attach(document.getElementById("test"));
</script>

<script type="text/javascript" src="PIE.js"></script>;
<script type="text/javascript">
PIE.attach(document.getElementById("test"));
</script>

最好放在 body 的最下面，這樣將其包含到 html 頁面後既可以使用

問題說明：    a.IE下這些CSS3效果實現是藉助於VML，由VML繪製圓角或是投影效果的容器元素，然後這個容器元素作爲目標元素的後兄弟節點插入，如果目標元素position:absolute 或是 position:relative，則這個css3-container元素將會設置與之一樣的z-index值，在DOM tree中，同級的元素總是後面的覆蓋前面的，所以這樣就實現了覆蓋，又避免了可能有其他元素正好插入其中。所以，問題來了，如果目前元素的position屬性爲static，也就是默認屬性，則z-index屬性是沒有用的，無覆蓋可言，所以此時IE瀏覽器下CSS3的渲染是不會成功的。要解決也很簡單，設置目標元素position:relative或是設置祖先元素position:relative並賦予一個z-index值（不可爲-1）。    b.IE瀏覽器的behavior 屬性是相對於HTML文檔而言的，與CSS其他的屬性不一樣，不是相對於CSS文檔而言的。這使得使用pie.htc文件不怎麼方變。如果絕對路徑於根目錄，則CSS文件不方便移動；如果相對路徑與HTML文檔，則pie.htc文件在不同HTML頁面見的重用性大大降低。同時，諸如border-image後面的URL屬性路徑也不好處理。    c.使用PIE實現IE下的CSS3渲染（其他方法也是一樣），只能使用縮寫的形式，例如圓角效果，我們可以設置border-top-left-radius表示左上圓角，但是PIE確實不支持這種寫法的，只能是老老實實的縮寫。   d. 要想讓IE瀏覽器支持htc文件，需要一個有着”text/x-component” 字樣的content-type 頭部，否則，會忽視behavior。絕大數web服務器提供了正確的content-type，但是還有一部分則有問題。   e.由於某種原因，您無法修改服務器配置（例如公用主機，或是空間服務商提供的服務器），您可以用一個PHP文件來間接調用htc文件。  

<?php  header( 'Content-type: text/x-component' );  include( 'pie.htc' );  ?>

  通過PHP文件來增加一個含有“text/x-component”字樣的Content-type頭，同時調用pie.htc文件。需要將pie.php和pie.htc放在同一個文件夾目錄下，同時CSS中的behavior寫法應該是：  behavior: url(pie.php);

  f.直接對執行過PIE兼容的當前容器進行透明度是沒有用的，因爲JS會新生成一個自定義標籤層疊在下面，可以用下面的步驟實現透明
 CSS 添加  

css3-container { filter:alpha(opacity=98); }

 JS 添加 

$(‘.test’).prev(‘css3-container’).css({‘filter’:’alpha(opacity=98)’, ‘opacity’:0.98});

注意一點這東西用的時候，儘量別用別的框架，否則就會導致沒有效果（本人在easy ui和 jsp 下反正是用不了）！！！

如果還是不行博主勸你直接來一張正方形的圖片，中間掏出一個空心的圓形，雖然有很多限制但是真的簡單的很多，但是真的簡單的很多，但是真的簡單的很多！！（重要的事情說三遍）。