html5盒子

最新推荐文章于 2023-02-26 19:20:18 发布

kaitaow

最新推荐文章于 2023-02-26 19:20:18 发布

阅读量417

点赞数

本文链接：https://blog.csdn.net/foreverkoking/article/details/9419569

版权

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

kaitaow

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5盒子

xmlns="http://www.w3.org/1999/xhtml"> charset="utf-8" /> html5 type="text/css">/*![CDATA[*/ #a1 { width:200px; height:200px; background:-webkit-linear-gradient:top rgba
复制链接

扫一扫