九宫格改进
Posted Abracadabra
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了九宫格改进相关的知识，希望对你有一定的参考价值。
刚做的九宫格不是圆角，将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>
以上是关于九宫格改进的主要内容，如果未能解决你的问题，请参考以下文章