|
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <meta charset="utf-8" /> <title>html5</title> <style type="text/css"> /*<![CDATA[*/ #a1 { width:200px; height:200px; background:-webkit-linear-gradient:top rgba(255,255,255,0.7) rgba(0,0,255,1); border:5px rgba(255,0,0,0.7) solid; } #a2 { width:200px; height:200px; background:-webkit-linear-gradient:top rgba(255,255,255,0.7) rgba(0,0,255,1); border:5px rgba(255,0,0,0.7) solid; border-radius:50px; box-sizing:border-box;//盒子模型 } #a3 { width:200px; height:200px; background:-webkit-linear-gradient:top rgba(255,255,255,0.7) rgba(0,0,255,1); border:5px rgba(255,0,0,0.3) solid; border-radius:80px; box-sizing:border-box;//盒子模型 box-shadow:rgba(0,0,0,0.7) 30px 30px 10px;//盒子阴影 } #a4 { width:200px; height:200px; background:-webkit-linear-gradient:top rgba(255,255,255,0.7) rgba(0,0,255,1); border:5px rgba(255,0,0,0.3) solid; border-radius:100px; box-sizing:content-box;//盒子模型 box-shadow:rgba(0,0,0,0.7) 30px 30px 10px;//盒子阴影 } /*]]>*/ </style> </head> <body> <div id="a1"> <span>无盒子模型和盒子阴影</span> </div><br /> <div id="a2"> <span>有盒子模型:border-box</span> </div><br /> <div id="a3"> <span>有盒子模型:border-box和盒子阴影</span> </div><br /> <div id="a4"> <span>有盒子模型:content-box，盒子阴影和盒子倒影</span> </div><br /> </body> </html> |