CSS3是一款用于網頁樣式設計的技術,它擁有很多先進的功能和特效。然而,在微信瀏覽器中,CSS3的兼容性問題卻很嚴重,特別是在Android系統下。
/* 在微信中使用CSS3樣式時需要注意以下幾點: */
/* 1.使用前綴 */
#div {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
/* 2.避免使用opacity和transition */
#div {
filter: alpha(opacity=50); /* IE */
opacity: 0.5; /* 非IE */
}
#div:hover {
-webkit-transform: scale(1.5); /* 非IE */
transform: scale(1.5); /* IE */
transition: all 1s; /* 非IE */
}
/* 3.使用動畫代替transition */
@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
#div {
-webkit-animation: fadeIn 1s;
}
/* 4.避免使用box-shadow和border-radius */
#div {
-webkit-box-shadow: 0px 0px 10px #000000; /* 非IE */
box-shadow: 0px 0px 10px #000000; /* IE */
-webkit-border-radius: 10px; /* 非IE */
border-radius: 10px; /* IE */
}
/* 總結:在微信瀏覽器中使用CSS3樣式時,需要遵循規范,使用前綴和動畫代替transition,盡量避免使用不兼容的樣式屬性。 */