相容各種主流瀏覽器的CSS陰影效果

2021-07-14 03:24:17 字數 820 閱讀 8406

css陰影效果(box shadows)應用在web頁面設計上已經有了一段時間了。之前在css2階段陰影效果還不是很有效之時,大部分的這種效果都是使用photoshop實現的,但對於一些缺乏這些繪圖技巧的人來說,比如我,學習photoshop是件討厭的事情。但隨著瀏覽器技術的進步,不會使用photoshop繪圖技術也不能阻擋我們使用陰影效果了。就在不僅之前,我找出一段**,它能在相容各種主流瀏覽器的情況下用css3實現陰影效果(box shadows)。下面就是解決方案。

**演示

也許你會產生懷疑,像ie這種老古董瀏覽器,如何讓它也支援css陰影效果呢。是的,也能實現,只是它的語法和其它現代瀏覽器的語法很是不同。

div

.shadow

這段css**中,我給-box-shadow的屬性設定了4種值:x軸偏移 y軸偏移,模糊程度(blur-radius),擴散程度(spread-radius), 以及顏色。如果我們將inset關鍵字放在這四個引數之前,陰影效果會出現在元素內部,也就是陰影效果向內擴充套件。 針對ie的語法**是有點醜陋和繁瑣,但它也是有效的。

css圓角效果css漸進色效果css動畫效果等現代瀏覽器css3新技術,給我們web程式開發者帶來了更廣闊的程式藝術創作空間。css陰影效果(box shadows)漂亮、實用——我非常喜歡,你呢?

原文摘錄:

主流瀏覽器相容HACK

propertyname value和單位 9 僅ie8識別 propertyname value 單位 selector ie7識別 propertyname value 單位 ie6識別 safari和 chrome 使用 media screen and webkit min device p...

CSS全面相容主流瀏覽器的寫法彙總

指定檔案相容性模式 要為你的網頁指定檔案模式,需要在你的網頁中使用meta元素放入x ua compatible http equiv 標頭。以下是指定為emulate ie7 mode 相容性之範例。content goes here.其內容隨著指定的頁面模式而更改,當要模擬ie7時,指定ie e...

瀏覽器CSS相容

一 important 在ie6及ff中的使用 box1 box1 important是說這個設定有優先順序,ie碰到 important不會出錯只是忽略他的功能,假如後面又設定了width,ie會以最後設定的 width為準,假如後面再沒有其它設定,則會用當前這個值,也就是前面的 importan...