IE瀏覽器是很多網民所熟知的瀏覽器之一,但它的CSS特效卻一直受到許多網站設計師和開發者的詬病。由于IE瀏覽器的瀏覽效果與其他瀏覽器有所不同,例如Chrome和Firefox等,因此CSS代碼的實現也轉為復雜。本文將介紹幾種CSS特效在IE瀏覽器中的實現方式。
/* 1. 文字陰影 */ text-shadow: 2px 2px #000; /* IE瀏覽器實現方式 */ filter: dropshadow(color=#000, offx=2, offy=2); /* 2. 線性漸變 */ background: linear-gradient(to bottom, #ffffff, #000000); /* IE瀏覽器實現方式 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000', gradientType='0'); /* 3. 圓角框 */ border-radius: 10px; /* IE瀏覽器實現方式 */ border-radius: 10px; -ms-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; /* 4. 旋轉變形 */ transform: rotate(45deg); /* IE瀏覽器實現方式 */ -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); /* 5. 按鈕陰影效果 */ box-shadow: 2px 2px #000; /* IE瀏覽器實現方式 */ filter: progid:DXImageTransform.Microsoft.Shadow(color=#000, Direction=135, Strength=2);
通過以上例子,我們可以看到,IE瀏覽器實現CSS特效的方式與其他瀏覽器有所不同,需要通過filter和-ms-前綴實現。在實現特效時,我們需要在CSS代碼中添加IE瀏覽器的標識,從而保證在IE瀏覽器中正常運行。