認識區塊陰影 CSS box-shadow

Box Shadow 範例

區塊陰影 CSS box-shadow 語法範例

<HEAD>
<style type="text/css">

</style>
</HEAD>
<BODY>

<div class="boxshadow">區塊陰影 CSS box-shadow 語法範例</div>

換成圖片

語法解說：
在 CSS 檔內或在 <HEAD> ... </HEAD>標籤內加上 CSS 定義。
Syntax box-shadow: [x offset] [y offset] [blur radius] [color] ，語法值分別為 X 軸 Y 軸柔邊長度顏色。
陰影可以加上兩個或更多，用半型逗號分隔即可；X、Y 和柔邊可以是負值。
柔邊長度，單位為 px ，預設為 0px。
這裡的顏色值是 HEX 值，可以使用 RGBA 值，RGBA 值的好處是，它多了一個 Alpha 透明值，以控制陰影的透明度。
-moz-box-shadow: 5px 5px 10px red; /* 此為 Firefox 專用語法 */
-webkit-box-shadow: 5px 5px 10px red; /* 此為 Safari 和 Chrome 專用語法 */
box-shadow: 5px 5px 10px red; /* 此為 Opera 10.5 + 專用語法 */
在需要建立陰影的物件上加上 class="boxshadow" 即可，如上範例。
注意：目前所有 IE 瀏覽器都不支援 box-shadow 語法，解決辦法本篇第肆項介紹。

CSS box-shadow 可設的常用值： GO。
本篇報導所有範例，我使用的測試瀏覽器與版本可能與你不同，請自己參考看看 GO。
測試各種不同瀏覽器是否支源 box-shadow 區塊陰影語法或觀看顯示結果：CSS3 box shadow
本篇報導參考資料來源： GO。

本報導內容或資料，因限人力、時間，非教學會員，不接受任何使用上的教學與指導，敬請見諒。

如果你喜歡這篇辛苦蒐集整理出來的報導資料，歡迎原文轉載及註明出處，請勿直接盜用，謝謝你的合作。

如果你願意於貴站或部落格中介紹本站，歡迎使用複製網頁研習室連結語法，再次感謝你的支持與愛護。