TShopping

 找回密碼
 註冊
搜索
查看: 2637|回復: 2

[教學] css box-shadow 產生陰影效果或光暈效果的特性

  [複製鏈接]
發表於 2014-8-22 17:17:55 | 顯示全部樓層 |閱讀模式
 
Push to Facebook Push to Plurk Push to Twitter 
說明:元素 (elements) 的 box 呈現陰影或光暈的效果。可指定陰影的位移距離、顏色、模糊程度、擴散程度,也支援內陰影,甚至多層次堆疊的陰影。運用這個 css level 3 (css 3) 的特性 (css property) ,讓我們可以很輕鬆就能呈現迷人的視覺效果,而不需要煩瑣地一張一張製作圖片。更具意義的是,產生的陰影不會對版面編排造成影響。
適合:有 html 及 css 語法基礎概念者。
難度:等級1
更新:2011-06-16
支援: firefox, google chrome, opera, ie9 (至撰文時) 。
標準語法
  1. box-shadow: x y blur spread color inset;
複製代碼
說明◾共有 6 個特性值,每個值之間以至少一個半形空格間隔。預設值為 none (只有一個字) 。
◾前面 4 個都是尺寸值 (length,不接受 %) ,依序表示水平位移距離 (x) 、垂直位移距離 (y) 、模糊強度 (blur) 、擴散強度 (spread) ,不可被其它的值插進其間。
◾產生陰影,前 2 個位移值 (x y) 為必要值,必須指定;其餘的值可不定義。
◾模糊 (blur) 及擴散 (spread) 強度預設值 (沒有定義時) 一般為 0 。模糊不能為負值。
◾第 5 個可指定陰影顏色 (color) , css 合法的顏色值表示法都可以,顏色值放在位移值前面也可以。沒有定義會使用 (或繼承) color 特性指定的顏色值。
◾第 6 個可指定為內陰影 (inset) ,改放在第 1 個位置也可以。沒有定義就是一般在外的陰影。
◾所有組合起來的值,可增加為多組,以 , (逗號) 分隔,依序表示由前至後堆疊的多層陰影。
◾適用元素:全部。
◾適用媒體: visual 。
◾不被繼承。
語法實例
  1. box-shadow:4px 4px 3px rgba(20%,20%,40%,0.5);
  2. box-shadow:2px 2px 1px rgba(20%,20%,40%,0.5) inset;
  3. box-shadow:2px 2px 2px rgba(20%,20%,40%,0.6),4px 4px 6px rgba(20%,20%,40%,0.4),6px 6px 12px rgba(20%,20%,40%,0.4);
複製代碼
接下來會有更多例子討論。


思考 - css box-shadow 輕鬆呈現質感好、多變化的陰影效果或光暈效果。

外陰影 (或外光暈) 會依據 border-box 來計算尺寸及位移,而內陰影 (或內光暈) 則依據 padding-box 來計算。

稍後會看到範例的語法,都有增加了前兩段廠商專屬擴充特性,提供給部分瀏覽器未正式支援標準語法之前的較舊版本使用,加不加這段應視網站的適用領域,並不影響較新版瀏覽器,語法中以較淡色呈現。
◾前面有 -moz- 的:適用 firefox 等較舊版 Gecko 系列。
◾前面有 -webkit- 的:適用 safari, google chrome 等較舊版 webkit 系列。
每個範例的 css 都有指定相同的背景顏色、相同的
  1. border 。background:#def;
  2. border:1px solid silver;
  3. display:inline-block;
  4. padding:0.5em 0.75em;
複製代碼
以下範例的每項主題都有加了對應的 css 效果,沒看到應該有的效果? 1.png

至少需要 2 個尺寸值,先後表示陰影的「水平」 (x) 「垂直」 (y) 位移距離, 0 值表示沒有位移 (就是 box 的位置) 。
  1. -moz-box-shadow:4px 4px rgba(20%,20%,40%,0.5);
  2. -webkit-box-shadow:4px 4px rgba(20%,20%,40%,0.5);
複製代碼
2.png

增加第 3 個尺寸值表示陰影的模糊強度 (blur) ,當然增加模糊度也會造成陰影更透明。
  1. -moz-box-shadow:4px 4px 3px rgba(20%,20%,40%,0.5);
  2. -webkit-box-shadow:4px 4px 3px rgba(20%,20%,40%,0.5);
  3. box-shadow:4px 4px 3px rgba(20%,20%,40%,0.5);
複製代碼
3.png
使用負數位移值,呈現不同方向的陰影。
  1. -moz-box-shadow:-4px -4px 3px rgba(20%,20%,40%,0.5);
  2. -webkit-box-shadow:-4px -4px 3px rgba(20%,20%,40%,0.5);
  3. box-shadow:-4px -4px 3px rgba(20%,20%,40%,0.5);
複製代碼
4.png

加第 4 個尺寸值,表示陰影的擴散強度 (spread) ,也可以強化像光暈的效果。
  1. -moz-box-shadow:4px 4px 12px 4px rgba(20%,20%,40%,0.5);
  2. -webkit-box-shadow:4px 4px 12px 4px rgba(20%,20%,40%,0.5);
  3. box-shadow:4px 4px 12px 4px rgba(20%,20%,40%,0.5);
複製代碼
5.png
使用負數 spread 值,像似縮減陰影周圍。
  1. -moz-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5);
  2. -webkit-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5);
  3. box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5);
複製代碼
6.png
在最前或最尾加 inset 變成內陰影,可呈現凹入的視覺。
  1. -moz-box-shadow:inset 3px 3px 3px rgba(20%,20%,40%,0.5);
  2. -webkit-box-shadow:inset 3px 3px 3px rgba(20%,20%,40%,0.5);
  3. box-shadow:inset 3px 3px 3px rgba(20%,20%,40%,0.5);
複製代碼
7.png

內陰影加 spread 值,加強凹入的真實感。
  1. -moz-box-shadow:1px 1px 3px 2px rgba(20%,20%,40%,0.5) inset;
  2. -webkit-box-shadow:1px 1px 3px 2px rgba(20%,20%,40%,0.5) inset;
  3. box-shadow:1px 1px 3px 2px rgba(20%,20%,40%,0.5) inset;
複製代碼
8.png
更逼真、更有深度感的陰影。
多層次陰影:一組以上數值,產生由前至後層疊的陰影,以 , (逗號) 分隔。當然陰影的透明顏色是會堆疊顏色的。
  1. -moz-box-shadow:2px 2px 2px rgba(20%,20%,40%,0.6),4px 4px 6px rgba(20%,20%,40%,0.4),6px 6px 12px rgba(20%,20%,40%,0.4);
  2. -webkit-box-shadow:2px 2px 2px rgba(20%,20%,40%,0.6),4px 4px 6px rgba(20%,20%,40%,0.4),6px 6px 12px rgba(20%,20%,40%,0.4);
  3. box-shadow:2px 2px 2px rgba(20%,20%,40%,0.6),4px 4px 6px rgba(20%,20%,40%,0.4),6px 6px 12px rgba(20%,20%,40%,0.4);
複製代碼
1.png

有透明區域的圖片 (img 元素) 定義 box-shadow ,當然會在整個 img 元素的 box (包括透明區域) 產生陰影。這個例子除了圖片加陰影,它的外層元素也指定了 inset 陰影,呈現更立體的視覺,語法內沒有寫出,請自行試試嘍。
  1. -moz-box-shadow:2px 2px 2px rgba(20%,20%,40%,0.6),4px 4px 6px rgba(20%,20%,40%,0.4),6px 6px 12px rgba(20%,20%,40%,0.4);
  2. -webkit-box-shadow:2px 2px 2px rgba(20%,20%,40%,0.6),4px 4px 6px rgba(20%,20%,40%,0.4),6px 6px 12px rgba(20%,20%,40%,0.4);
  3. box-shadow:2px 2px 2px rgba(20%,20%,40%,0.6),4px 4px 6px rgba(20%,20%,40%,0.4),6px 6px 12px rgba(20%,20%,40%,0.4);
複製代碼
9.png

不同顏色交錯相疊的背影。
不同顏色的陰影,指定交錯的位移,也能呈現特別的視覺。陰影跨越到下方的元素也不會移動排版。
  1. -moz-box-shadow:8px 24px 2px rgba(100%,0%,0%,0.4),16px -4px 2px rgba(0%,100%,0%,0.4),24px 12px 2px rgba(0%,0%,100%,0.4);
  2. -webkit-box-shadow:8px 24px 2px rgba(100%,0%,0%,0.4),16px -4px 2px rgba(0%,100%,0%,0.4),24px 12px 2px rgba(0%,0%,100%,0.4);
  3. box-shadow:8px 24px 2px rgba(100%,0%,0%,0.4),16px -4px 2px rgba(0%,100%,0%,0.4),24px 12px 2px rgba(0%,0%,100%,0.4);
複製代碼
10.png
內、外都加陰影,同一個元素就可以搞定。
  1. -moz-box-shadow:6px 6px 6px rgba(20%,20%,40%,0.5),inset 1px 1px 4px 2px rgba(20%,20%,40%,0.5);
  2. -webkit-box-shadow:6px 6px 6px rgba(20%,20%,40%,0.5),inset 1px 1px 4px 2px rgba(20%,20%,40%,0.5);
  3. box-shadow:6px 6px 6px rgba(20%,20%,40%,0.5),inset 1px 1px 4px 2px rgba(20%,20%,40%,0.5);
複製代碼
將 box-shadow 運用在像 :hover, :focus 之類具有使用者互動的指標 (selectors) ,也會有更多趣味的效果呈現,可以自行多嚐試嘍!

表格或表單控制元件在部分瀏覽器異常呈現
截至撰文時, safari 5 尚未支援 box-shadow 標準語法,必須使用前面提到的 -webkit- 語法。

雖說 box-shadow 可適用在全部元素,不過部分較特別的元素,如表格類、表單控制元件 (controls) ,在瀏覽器上會有不太正常的處理現象。撰文時,特別測試了一些提出來討論。
表格類◾表格儲存格 (如 th, td) :如果在外層 table 元素指定了 border-collapse:collapse; 特性 (儲存格間沒空隙) ,在 ie 陰影沒效。
◾表格列 (如 tr) :在 google chrome, oprea 陰影沒效;在 ie 陰影呈現在儲存格上。
表單控制元件 (controls)瀏覽器有預設背景色的控制元件 (如 button, input) ,在 ie, google chrome 須指定新的背景色,或背景透明才會有效。在 google chrome 需指定 box-shadow 的 color 值才會有效。


 

臉書網友討論
發表於 2014-9-1 08:05:27 | 顯示全部樓層
感謝板主熱心分享

版主招募中

發表於 2015-6-11 07:16:17 | 顯示全部樓層



  知道了 ~~~


您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



Archiver|手機版|小黑屋|免責聲明|TShopping

GMT+8, 2016-12-4 01:49 , Processed in 0.069593 second(s), 25 queries .

本論壇言論純屬發表者個人意見,與 TShopping綜合論壇 立場無關 如有意見侵犯了您的權益 請寫信聯絡我們。

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表