盒子模型（重点）
1 HTML的元素可以看成一个矩形的盒子，每个盒子都是由内容、内边距、
外边距、边框组成
网页布局的本质-----很多矩形盒子组合而成
2 Box Model
width 内容的宽
height 内容的高
border 边框
css3关于边框多了一属性 border-radius 圆角边框
padding 内边距
05圆角边框.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div { width: 180px; height: 180px; border: 1px solid red; } div:first-child { border-radius: 10px; /*表示4个角是相同的10p弧度*/ } div:nth-child(2) { /* border-radius: 90px; */ border-radius: 50%; } div:nth-child(3) { border-radius: 10px 30px; /* 左上角 右下角 是10px 右上角 左下角是30px*/ } div:nth-child(4) { border-radius: 10px 30px 60px; /* 左上角 10px 右上角 左下角是30px 右下角是60px*/ } div:nth-child(5) { border-radius: 10px 20px 30px 40px; /* 左上角 10px 右上角 20px 右下角是30px 左下角是40px*/ } div:nth-child(6) { border-radius: 90px; height: 100px; } div:last-child { border-radius: 100px 0; } </style> </head> <body> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </body> </html>