css剪輯路徑在Opera和Internet Explorer中不起作用

我需要使用剪輯來實現具有對角右邊緣的類進度條元素，並且css3剪輯路徑似乎是最佳選項。css剪輯路徑在Opera和Internet Explorer中不起作用

我可以很輕鬆地找到一個解決方案，火狐和Chrome的工作，但試驗了幾個小時之後我無法取得任何進展的Internet Explorer或歌劇：他們似乎根本無視夾路徑！

我更好地學習了Opera，它支持剪輯路徑（而-o-clip-path似乎不存在），因爲它的版本很少。

這裏是我完整的html文件，包括css和所有，準備複製/粘貼和運行，任何人有任何提示？提前致謝。

<!DOCTYPE html> 
<html> 
<head> 
    <title>Prova Clipping</title> 

    <svg> 
    <defs> 
     <clipPath id="prova_clip"> 
     <polygon points="10 0, 1000 0, 1000 50, 0 50"/> 
     </clipPath> 
    </defs> 
    </svg> 

    <style type="text/css"> 
    body { 
    color: purple; 
    background-color: blue; 
    } 
    #barra { 
    position: relative; 
    margin: 50px; 
    width:300px; 

    -moz-transform: rotate(180deg);  
    -webkit-transform: rotate(180deg);  
    -o-transform: rotate(180deg);  
    -ms-transform: rotate(180deg);  
    } 
    .barra { 
    position: absolute; 
    height: 50px; 
    } 
    #barra_sfondo { 
    width: 20%; 
    background: linear-gradient(grey, black); 

    -moz-transform: rotate(180deg);  
    -webkit-transform: rotate(180deg);  
    -o-transform: rotate(180deg);  
    -ms-transform: rotate(180deg);  

    -webkit-clip-path: url(#prova_clip); 
    -ms-clip-path: url(#prova_clip); 
    clip-path: url(#prova_clip); 
    } 
    #barra_colore { 
    width: 100%; 
    background: linear-gradient(to right, yellow, red); 
    } 
    </style> 
</head> 

<body> 
    <div id="barra"> 
     <svg class="barra" id="barra_colore"> 
      <polygon points="0 0, 100% 0, 100% 100%, 0 100%"/> 
     </svg> 
     <svg class="barra" id="barra_sfondo"> 
      <polygon points="0 0, 100% 0, 100% 100%, 0 100%"/> 
     </svg> 
    </div> 
</body> 
</html>

來源

2014-01-22 swK

-3

請使用CSS的以下參考。

/選擇黑客 */

/* IE6 and below */ 
* html #div { 
height: 300px; 
} 

/* IE7 */ 
*+html #div { 
height: 300px; 
} 

/* IE8 */ 
#div { 
height: 300px\0/; 
} 

/*IE7 & IE8*/ 
#div { 
height: 300px\9; 
} 

/*Hide from IE6 and LOWER*/ 
#div { 
height/**/: 300px; 
}

來源

2014-02-01 06:47:31 Jaymin

這有什麼好做的問題。 – BrianFreud

對於大多數跨瀏覽器的支持，這是代碼，您需要：

-webkit-mask: url(#prova_clip); // Opera and Chrome 
mask: url(#prova_clip); 
clip-path: url(#prova_clip); // Firefox

mask-image歡迎使用屬性是currenty WebKit中唯一支持瀏覽器在前綴下，而Firefox則識別前綴不明的clip-path屬性。我不知道爲什麼，但似乎-webkit-clip-path在Opera中不起作用。

的Internet Explorer目前不支持也不面罩或夾路徑屬性。

參考鏈接：
http://caniuse.com/#search=clip-path
http://caniuse.com/#search=mask

來源

2014-11-07 12:24:04

css剪輯路徑在Opera和Internet Explorer中不起作用

回答

相關問題