html5盒子-CSDN博客

<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>

转载于:https://www.cnblogs.com/java20130725/p/3215826.html