02-CSS基础与进阶-day5_2018-09-03-21-25-22-优快云博客

盒子模型（重点）
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>