??? ?? - ??? (2)
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>CSS3屬性：box-shadow測試</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.boxshadow.js"></script>
<style type="text/css">
.box-shadow-1{
-webkit-box-shadow: 3px 3px 3px;
-moz-box-shadow: 3px 3px 3px;
box-shadow: 3px 3px 3px;
}
.box-shadow-2{
-webkit-box-shadow:0 0 10px #0CC;
-moz-box-shadow:0 0 10px #0CC;
box-shadow:0 0 10px #0CC;
}
.box-shadow-3{
-webkit-box-shadow:0 0 10px rgba(0, 204, 204, .5);
-moz-box-shadow:0 0 10px rgba(0, 204, 204, .5);
box-shadow:0 0 10px rgba(0, 204, 204, .5);
}
.box-shadow-4{
-webkit-box-shadow:0 0 10px 15px #0CC;
-moz-box-shadow:0 0 10px 15px #0CC;
box-shadow:0 0 10px 15px #0CC;
}
.box-shadow-5{
-webkit-box-shadow:inset 0 0 10px #0CC;
-moz-box-shadow:inset 0 0 10px #0CC;
box-shadow:inset 0 0 10px #0CC;
}
.box-shadow-6{
box-shadow:-10px 0 10px red, /*左邊陰影*/
10px 0 10px yellow, /*右邊陰影*/
0 -10px 10px blue, /*頂部陰影*/
0 10px 10px green; /*底邊陰影*/
}
.box-shadow-7{
box-shadow:0 0 10px 5px black,
0 0 10px 20px red;
}
.box-shadow-8{
box-shadow:0 0 10px 20px red,
0 0 10px 5px black;
}
.box-shadow-9{
box-shadow: 0 0 0 1px red;
}
.obj{
width:100px;
height:100px;
margin:50px auto;
background:#eee;
}
.outer{
width: 100px;
height: 100px;
border: 1px solid red;
}
.inner{
width: 60px;
height: 60px;
background-color: red;
-webkit-box-shadow: 50px 50px blue;
-moz-box-shadow: 50px 50px blue;
box-shadow: 50px 50px blue;
}
</style>
</head>
<body>
<div class="obj box-shadow-1"></div>
<div class="outer">
<div class="inner"></div>
</div>
<div class="obj box-shadow-2" ></div>
<div class="obj box-shadow-3" ></div>
<div class="obj box-shadow-4" ></div>
<div class="obj box-shadow-5" ></div>
<div class="obj box-shadow-6" ></div>
<div class="obj box-shadow-7" ></div>
<div class="obj box-shadow-8" ></div>
<div class="obj box-shadow-9" ></div>
<script type="text/javascript">
$(document).ready(function(){
if($.browser.msie) {
$('.obj').boxShadow(-10,-10,5,"#0cc"); //obj元素使用了box-shadow
}
});
</script>
</body>
</html>box-shadow? ??? ?? ???? ???? ?? ?? ??? ???? ? ? ???? ???????.
??:
1) .box-shadow-1? ???? ??? ?? ??? ???? ??? ???? ?? ??? Safari ? Chrome ?????? ????? ??? ?? ? ????. kernel ??? ???? Firefox/Opera??? ????? ?????.
2) ?? ? ?? div ??? ???? box-shadow? ???? ?? ?? ????? ??? ?? ?????. ?? ???? ?? ???? ?????. ??? ????? ?? ??? ??? ?????. W3C ??? ?????? ???? box-shadow? ??? ??? ?????.
???? ??? ??? ? ????. ???? ?? ??- ??, ??? ?? ??, ??? ?? ?? ? ??? ?? ???? ??? ???. border-radius? 0? ?? ?? ??? ??? ??? ??? ???? border-image? ?? ???? ??? ?? ????. ; ?? ???? ?? ??? ??? ??? ???, ?? ???? ?? ?? ??? ??, ?? ???? ??? ??? ?? ?? ????. ??? ????? ?? ???? ??? ?? ??? ?? ?? ????. ??? ?? ?? ??? ???>?? ???>?? ???>???>?? ??????.
3) .box-shadow-2?? .box-shadow-5??? ??? ?? box-shadow ?? ??? ??? ? ????. <… >
??? box-shadow-3? box-shadow-2? ??? ???? rgba ?? ?? ???? box-shadow ???? ??? ????? ??? ????. ??. ??: 
. box-shadow-4? box-shadow-2 ??? ???? 15px? ??? ?? ??? ?????. 
.box-shadow-5? box-shadow-2? ??? ???? ?? ???? ?? ???? ?????. 
4).box-shadow-6 ??? ?? ???? ???? ?? ???? ??? ?????. ??? ? ?? ??? ??? ????? x-???? y-???? ?? ?? ?? ?? ???? ?? ?????. x-???? ?? ?? ?? ?? ???? ?????. . ?? ??? ??? ???? ?????. ?? ?? ??? ???? ???? ?? ?? ?? ???? ?????. ??? ?? ??? 0?? ?????. 0?? ???? ??? ?? ? ??? ???? ????. ??? ?????!
? ?? ?????? ?????: {box-shadow:-10px 0 10px red, box-shadow:10px 0 10px blue ,box-shadow:0 -10px 10px yellow,box-shadow:0 10px 10px green}
???? ?? ??? ?? ??? ????. ??? ??? ?? ??? ??? ???? ?? ??? ???? ???. ?? ?? box-shadow-7? ?? ?? ??? ?????.
. box-shadow-7{
box-shadow:0 0 10px 5px ??,
0 0 10px 20px ??;
}
visible ??? ??? ??:
? ?? ??? ??? ???? ?? ??? ?? ?????.
. box-shadow-8{
box-shadow:0 0 10px 20px ???,
0 0 10px 5px ???;
}
? show ??? ??? ??? ??? ??? ???? ? ?? ?? ?? ??? ?? ? ?? ?? ?? ???? ??? ???? ?????.
??: ? ???? ?? ?? ? ???? ?? ??? ??? ? ???? ?? ?????. ? ???? ?? ?? ? ???? ?? ??? ?? ? ???? ? ??? ??? ?? ???.
4) ??? ?? ??? ??(??? ?? ??? ??? ??? ??)
.box-shadow-9 ? boder? ?? ?????. : 1px ??? ??? ????? ?? ???? ?? ??? ??? ??? ??? ????. ?? ??? ???? ??? ?? ??? 1?? ???. ??? ???? ???? ????? ??? ??? ???, ?? Firebug ??? ???? ?????? ?? ??? ? ????.
