優雅降級box shadow到border

2022-09-13 16:51:08 字數 510 閱讀 3496

box-shadow盒陰影 ie8瀏覽器不支援

ie9+瀏覽器使用box-shadow陰影 ie7,ie8瀏覽器使用border線框

ie9+瀏覽器沒有邊框其實很簡單  border所有瀏覽器都識別,但是rgba色值確實ie9+瀏覽器才支援

可以巧妙利用ie8-瀏覽器不識別rgba色值這一特性,實現我們的向下相容處理。

ie8瀏覽器不認識rgba顏色表示,因此,在ie8眼中,下面這種寫法就是不合法的,就會被忽略

如果在sass中寫出border: 0 rgba(0,0,0,0);,則會被sass自以為是地編譯成border: 0 transparent

然看表現rgba(0,0,0,0)和transparent是乙個東西,都是透明,但是,對於border屬性而言,rgba(0,0,0,0) ie9+瀏覽器才能識別,transparent從ie7瀏覽器就開始識別

於是,ie7,ie8瀏覽器下,本要出現的邊框就這樣直接被乾掉了,bug!為了規避這個讓人無語的問題,使用了rgba(0,0,0,.2)。

漸進增強 優雅降級

何為漸進增強 優雅降級 常用兩種策略 要麼優雅降級 graceful degradation,一開始就構建站點的完整功能,然後針對瀏覽器測試和修復 要麼漸進增強 progressive enhancement,一開始只構建站點的最少特性,然後不斷針對各瀏覽器追加功能。兩者間的 微妙 差別 萬一你正撓...

優雅降級元(CSS JS)

原來在自學前端的時候,聽到過乙個詞叫做 優雅降級 原來也沒怎麼弄懂什麼意思,現開竅分享如下 因某些新發布的css樣式或html標籤在老的瀏覽器上不相容,而在寫 時做的了一定的處理,確保在瀏覽器不相容時,也能夠達到原效果或部分原效果,例如 width 如html5標籤 這裡面有三個嵌入標籤 是為ie準...

漸進增強 VS 優雅降級

一圖勝千言 印象中,漸進增強和優雅降級這兩個概念是在 css3 出現之後火起來的。由於低階瀏覽器不支援 css3,但是 css3 特效太優秀不忍放棄,所以在高階瀏覽器中使用css3,而在低階瀏覽器只保證最基本的功能。二者的目的都是關注不同瀏覽器下的不同體驗,但是它們側重點不同,所以導致了工作流程上的...