刚做的九宫格不是圆角，将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>
时间： 2024-12-08 21:38:26