<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf8" /> <link rel="stylesheet" type="text/css" href="/static/demo/html/css/cc.css" /> <script type="text/javascript" src="/static/demo/html/css/cs.js"></script> <script type="text/javascript"> <!-- function test_demo_val(strValue) { var strId="MyDIV" document.getElementById(strId).style.boxShadow=strValue; document.getElementById(strId).style.WebkitBoxShadow=strValue; document.getElementById(strId).style.MozBoxShadow=strValue; document.getElementById("CodeValue").innerHTML=strValue; } //--> </script> <style> div#MyDIV { background-color:yellow; width:200px; height:100px; box-shadow:10px 10px black; } </style> </head> <body> <!--wrapper--> <div id="wrapper"> <div id="SelArea"> <h2>CSS 属性:</h2> <h3>box-shadow:</h3> <form action="javascript:return false;"> <ul> <input type="hidden" id="PreSelectedValue" value="" /> <li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_1" value="10px 10px black" checked="checked" />10px 10px black</li> <li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_2" value="50px 50px black" />50px 50px black</li> <li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_3" value="50px 50px 5px black" />50px 50px 5px black</li> <li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_4" value="50px 50px 10px black" />50px 50px 10px black</li> <li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_5" value="50px 50px 20px black" />50px 50px 20px black</li> <li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_6" value="50px 50px 50px black" />50px 50px 50px black</li> <li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_7" value="50px 50px 50px 5px black" />50px 50px 50px 5px black</li> <li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_8" value="50px 50px 50px 10px black" />50px 50px 50px 10px black</li> <li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_9" value="50px 50px 50px 20px black" />50px 50px 50px 20px black</li> <li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_10" value="50px 50px 50px 20px red" />50px 50px 50px 20px red</li> <li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_11" value="50px 50px 50px 20px blue" />50px 50px 50px 20px blue</li> <li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_12" value="50px 50px 50px 20px pink" />50px 50px 50px 20px pink</li> <li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_13" value="40px 40px 50px 20px pink" />40px 40px 50px 20px pink</li> <li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_14" value="20px 20px 50px 20px pink" />20px 20px 50px 20px pink</li> <li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_15" value="10px 10px 50px 20px pink inset" />10px 10px 50px 20px pink inset</li> <li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_16" value="10px 10px 30px 20px pink inset" />10px 10px 30px 20px pink inset</li> <li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_17" value="10px 10px 5px 20px pink inset" />10px 10px 5px 20px pink inset</li> <li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_18" value="10px 10px 5px 10px pink inset" />10px 10px 5px 10px pink inset</li> <li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_19" value="10px 10px 5px 5px pink inset" />10px 10px 5px 5px pink inset</li> </ul> </form> </div> <div id="result"> <h2>结果:</h2> <div id="DemoArea"> <div id="MyDIV"></div> </div> <h2>CSS 代码:</h2> <pre id="CodeArea"> div#MyDIV { background-color:yellow; width:200px; height:100px; box-shadow:<span id="CodeValue">10px 10px black</span>; } </pre> </div> </div><!--wrapper End--> </body> <script type="text/javascript">tiy_onload()</script> </html>