上周闲来无事，研究了一下盒模型，乱捣鼓还真弄出了一些有意思的东西，下面跟大家分析一下，也希望能提升一下大家对于盒模型的理解。
1、
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <style type="text/css"> * { margin: 0; } .box { width: 150px; height: 150px; background-color: black; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; border-width: 0 100px 100px 100px; border-style: solid; border-color: black grey; border-radius: 50%; } </style> </head> <body> <div class="box"></div> </body> </html>
2、
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <style type="text/css"> * { margin: 0; } .box { width: 150px; height: 150px; background-color: blue; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; border-width: 100px 0; border-style: solid; border-color: black transparent; border-radius: 50%; transform: rotate(45deg); } </style> </head> <body> <div class="box"></div> </body> </html>3、
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <style type="text/css"> * { margin: 0; } .box { width: 0; height: 0; margin: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-width: 100px; border-style: solid; border-color: black transparent; border-radius: 50%; transform: rotate(45deg); } </style> </head> <body> <div class="box"></div> </body> </html>看完了上面的图案，是不是对盒模型的理解又深了一些呢。
