本主題將向你介紹如何使用 windows internet explorer 9 和 cascading style sheets, level 3 (css3) 向布局元素的外部或內部新增投影。你甚至可以為使用 internet explorer 9 中新提供的圓角支援所建立的圓角曲線新增陰影。本主題包含下列部分：
投影通過 box-shadow 屬性啟用。像圓角一樣，internet explorer 9 中的投影功能非常強大；你有多個可以指定的選項。box-shadow 屬性中值的順序如下所示：
box-shadow: hoff voff bd sd color inset;這裡，
hoff 指示水平偏移，
voff 指示垂直偏移，
bd 指示模糊距離，
sd 指示擴散距離，
color 指示陰影的顏色，inset是乙個關鍵字，在使用時指示陰影是內部陰影，而不是外部陰影。前兩個值是屬性工作所必需的值，所有值都必須按照列出的順序指定。如果未指定顏色，則 internet explorer 9 使用黑色作為陰影顏色。
此處定義了每個值：
在我們完成如何使用 css3 新增圓角之中的工作後，headerid 選擇器的級聯樣式表 (css) 如下所示：
#header
footerid 選擇器的 css 如下所示：
#footer讓我們新增乙個陰影，它具有 5 畫素的垂直和水平偏移，再加上 5 畫素的輕微模糊，無擴散。對於顏色，我們將指定淺灰色。為此，我們向兩個選擇器新增以下行：
box-shadow: 5px 5px 5px lightgray;記住，如果不指定 box-shadow 屬性的第四個值，則是在有效地指定不應有擴散。這樣，前一行與下面這行相同：
box-shadow: 5px 5px 5px 0px lightgray;在兩個方框上指定投影後，頁首的右部將如下所示：
例如，讓我們看一下如何使用 css3 新增圓角主題中的咖啡公司示例的產品縮圖。product_thumb類選擇器的 css 是：
.product_thumb讓我們向該方框新增投影，但將兩個偏移值保留為零。我們將向它新增輕微模糊、輕微擴充套件（通過將陰影從原始邊框延伸開來使模糊變得更加明顯），並將其設定為赭色以增強咖啡豆的顏色：
box-shadow: 0 0 5px 5px sienna;這將使縮圖如下所示：
sidebarid 選擇器的 css 是：
#sidebar讓我們更改邊框的顏色和樣式，以更好的與新投影協調。我們將 border-style 屬性更改為純色，將 border-color 屬性更改為 #663300 以與導航欄鏈結和其他介面元素匹配，並使陰影顏色與頁首和頁尾背景 (#ffffcc) 匹配，以獲得某些視覺一致性。這樣，新選擇器為：
#sidebar新邊欄如下所示。（影象大小已經減小。）
要確保與其他瀏覽器或舊版其他瀏覽器的向後相容性，最好的方法是參考相應瀏覽器**商的**。根據瀏覽器和版本，你只需複製帶相應的特定於**商的字首的 box-shadow 屬性。例如，對於最後一節的邊欄示例，以下選擇器在大多數常用瀏覽器中將會產生類似的結果：
#sidebar為確保對 box-shadow 的支援和行為，請諮詢相應的瀏覽器**商的**：
internet explorer 9 中現在支援 box-shadow 屬性。若要向布局新增投影，以便 windows internet explorer 8 和更低版本的使用者可以檢視它們，你可利用 web 上提供的備用解決方案之一。
CSS3新增屬性用法整理CSS3新增屬性用法整理
css3新增屬性用法整理 css3新增屬性用法整理 1 box shadow 陰影效果 2 border color 為邊框設定多種顏色 3 border image 邊框 4 text shadow 文字陰影 5 text overflow 文字截斷 6 word wrap 自動換行 7 bord...
CSS3新增屬性（3）
1.定義動畫 用keyframes 定義動畫 類似定義類選擇器 keyframes 動畫名稱 100 動畫序列 0 是動畫的開始，100 是動畫的完成，這樣的規則就是動畫序列。在 keyframes 中規定某項css樣式，就能建立由當前樣式逐漸改為新樣式的動畫效果。動畫是使元素從一種樣式逐漸變化為另...
css3新動 css3新增動畫
1 transiition過渡 樣式改變就會執行transition 1 格式 transiition 1s width linear,2s 1s height 2 引數 transition property 要運動的樣式 all attr none transition duration 運動時...