box-shadow 陰影
語法：
box-shadow：none | <shadow> [,<shadow>]* box-shadow：none /* 設置none是表示沒有陰影 */
舉例說明：
例：box-shadow：10px 10px 5px 5px red inset;
box-shadow的參數有六個：X軸偏移 Y軸偏移 陰影模糊半徑 陰影擴展半徑 陰影顏色 陰影類型。
例1：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS3 box-shadow屬性</title> <style type="text/css"> #div1 { width:200px; height:100px; border:1px solid silver; box-shadow:5px 5px 8px red; } </style> </head> <body> <div id="div1"> </div> </body> </html>
例2：水平陰影位置x-shadow和垂直陰影位置y-shadow 水平陰影位置x-shadow和垂直陰影位置y-shadow的屬性 取值，單位可以是px、em或百分比等，允許負值。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS3 box-shadow屬性</title> <style type="text/css"> #div1 { width:200px; height:100px; border:1px solid silver; box-shadow:-5px -5px 8px red; } </style> </head> <body> <div id="div1"> </div> </body> </html>
例3： JQuery 觀察變化：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS3 box-shadow屬性</title> <style type="text/css"> #div1 { width:200px; height:100px; border:1px solid silver; box-shadow:5px 5px 0px red; } </style> <script src="../App_js/jquery-1.11.3.min.js" type="text/javascript"></script> <script type='text/javascript'> $(function () { $("#range").change(function () { var num = $(this).val(); $("#value").text(num); $("#div1").css("box-shadow", "5px 5px " + num + "px red"); }); }) </script> </head> <body> <input id="range" type="range" min="0" max="25" value="0"/> <span id="value">0</span> <div id="div1"></div> </body> </html>
外陰影outset與內陰影
inset box-shadow屬性最后一個參數用於設置陰影
是否是內陰影，還是外陰影； 取值有2種： （1）outset：默認值，外陰影； （2）inset：內陰影；
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS3 box-shadow屬性</title> <style type="text/css"> div { width:100px; height:100px; line-height:100px; text-align:center; } #div1{box-shadow:0 0 12px red;} #div2{box-shadow:0 0 12px red inset;} </style> </head> <body> <div id="div1">外陰影</div> <div id="div2">內陰影</div> </body> </html>
分析： 默認情況下，邊框陰影是外陰影效果，設置最后一個屬性值 為inset時，邊框陰影為內陰影效果。
這里注意一個技巧：當水平陰影位置x-shadow和垂直陰影位 置y-shadow都為0時，陰影都向外發散或者都向內發散。
邊框陰影
四條邊框獨立樣式 box-shadow屬性可以為邊框的4條邊的設置獨立樣 式。
其中，每條邊的陰影屬性值之間用英文逗號隔開 即可。
語法： box-shadow: 左邊陰影,頂部陰影,底部陰影,右邊陰影;
說明： 注意偏移半徑的正負。
例1：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS3 box-shadow屬性</title> <style type="text/css"> #div1 { width:100px; height:100px; line-height:100px; text-align:center; box-shadow:-5px 0 12px red,0 -5px 12px yellow,0 5px 12px blue,5px 0 12px green; } </style> </head> <body> <div id="div1">外陰影</div> </body> </html>
分析： 仔細觀察水平陰影位置x-shadow和垂直陰影位置yshadow這兩個取值是如何設置的。
拓展：
spread 改變陰影的大小——其值可以是正負值，如果值 為正，則整個陰影都延展擴大，反之值為負值是，則縮小。
border-image邊框圖像
一點點知識點 還是並進來吧：
語法：<border-image-source> || <border-image-slice> || <border-image-repeat>
● border-image-source 圖片路徑屬性
與CSS2中background-image屬性一樣，border-image的背景圖使用url()調用，
圖片可以是相對路徑或是絕對路徑，也可以不使用圖片，即border-image:none。
● border-image-slice 圖片裁剪位置
一般圖像的單元格的尺寸是多大，這個值給多大即可。
● border-image-repeat 重復性
repeat（重復），round（平鋪），stretch（拉伸）。其中，stretch是默認值。
例1：
假如我們要把右邊這張圖作為（90px×90px）元素邊框的背景圖片，應該怎么做呢？（下面每個小方塊30px×30px）
分析： 從上面預覽效果我們可以知道，位於4個角的數字1、3、7 、9還是乖乖地位於4個角，然后邊框會不斷平鋪。但是， 中部的數字5會平鋪填充。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS3 border-image屬性</title> <style type="text/css"> #div1 { width:210px; height:150px; border:30px solid gray; borderimage:url("../App_images/lesson/run_css3/border_img1.png") 30 repeat; -webkit-borderimage:url("../App_images/lesson/run_css3/border_img1.png") 30 repeat; -moz-borderimage:url("../App_images/lesson/run_css3/border_img1.png") 30 repeat; } </style> </head> <body> <div id="div1"> </div> </body> </html>
例2：
分析： 大家仔細研究這兩個例子，自己感性去理解一下。 從上面兩個例子，使用border-image屬性為邊框添加背景 時候，如果想要達到預期效果，我們需要注意以下2點：
（1）邊框的背景在制作時候， 應該制作4條邊，中間部分需要 挖空；
（2）邊框背景圖片的每條邊寬 度跟對應的邊框寬度（borderwdith）應該相同
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS3 border-image屬性</title> <style type="text/css"> #div1 { width:210px; height:150px; border:30px solid gray; borderimage:url("../App_images/lesson/run_css3/border_img2.png") 30 repeat; -webkit-borderimage:url("../App_images/lesson/run_css3/border_img2.png") 30 repeat; -moz-borderimage:url("../App_images/lesson/run_css3/border_img2.png") 30 repeat; } </style> </head> <body> <div id="div1"> </div> </body> </html>
