九宫格改进

刚做的九宫格不是圆角，将border-radius设置为2px是看不出来的，要改为25px就有效果了，还一直以为border-radius没效果，我的锅

  1 <!DOCTYPE HTML>
  2 <meta charset="UTF-8">
  3 <head>
  4     <title>
  5         九宫格绘制
  6     </title>
  7     <style type="text/css">
  8         #box{
  9             padding-left: 460px;
 10             padding-top:140px;
 11             width:400px;
 12         }
 13         #block1{
 14             float:left;
 15             background-color: orange;
 16             border:2px;
 17             border-radius: 25px;
 18             height:100px;
 19             width:100px;
 20             margin-left: 2px;
 21         }
 22         #block2{
 23             float:left;
 24             background-color: orange;
 25             border-radius: 25px;
 26             height:100px;
 27             width:100px;
 28             margin-left:2px;
 29         }
 30         #block3{
 31             float:left;
 32             background-color: orange;
 33             border-radius: 25px;
 34             height:100px;
 35             width:100px;
 36             margin-left:2px;
 37         }
 38         #block4{
 39             float:left;
 40             background-color: orange;
 41             border-radius: 25px;
 42             height:100px;
 43             width:100px;
 44             margin-left:2px;
 45             margin-top: 2px;
 46         }
 47         #block5{
 48             float:left;
 49             background-color: orange;
 50             border-radius: 25px;
 51             height:100px;
 52             width:100px;
 53             margin-left:2px;
 54             margin-top: 2px;
 55         }
 56         #block6{
 57             float:left;
 58             background-color: orange;
 59             border-radius: 25px;
 60             height:100px;
 61             width:100px;
 62             margin-left:2px;
 63             margin-top: 2px;
 64         }
 65         #block7{
 66             float:left;
 67             background-color: orange;
 68             border-radius: 25px;
 69             height:100px;
 70             width:100px;
 71             margin-left:2px;
 72             margin-top: 2px;
 73         }
 74         #block8{
 75             float:left;
 76             background-color: orange;
 77             border-radius: 25px;
 78             height:100px;
 79             width:100px;
 80             margin-left:2px;
 81             margin-top: 2px;
 82         }
 83         #block9{
 84             float:left;
 85             background-color: orange;
 86             border-radius: 25px;
 87             height:100px;
 88             width:100px;
 89             margin-left:2px;
 90             margin-top: 2px;
 91         }
 92 
 93     </style>
 94 </head>
 95 <body>
 96     <div id="box">
 97             <div id="block1">
 98             </div>
 99             <div id="block2">
100             </div>
101             <div id="block3">
102             </div>
103             <div id="block4">
104             </div>
105             <div id="block5">
106             </div>
107             <div id="block6">
108             </div>
109             <div id="block7">
110             </div>
111             <div id="block8">
112             </div>
113             <div id="block9">
114             </div>
115     </div>
116 </body>
117 </html>

 

posted @ 2016-03-13 15:09  Abracadabra  阅读(318)  评论(0)  编辑  收藏  举报