0502边界边框

--边界边框

-----外边距：margin 上 top 右 left 下 bottom 左 right

-----内边距：padding 上 top 右 left 下 bottom 左 right

-----边框：border

----------------------------------透明 transparent

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #first{
                width: 200px;
                height: 200px;
                background-color: red;
                margin: 30px 40px 50px 60px;
            }
            #second{
                width: 200px;
                height: 200px;
                background-color: red;
            }
            #third{
                /* 200px;*/
                width: 170px;
                height: 200px;
                background-color: orange;
                padding-left: 30px;
            }
            #forth{
                width: 300px;
                height: 200px;
                /*border-right: 1px solid black;*/
                border-top: 10px solid red;
                border-right: 10px solid red;
                
            }
            #fifth{
                width: 0px;
                height: 0px;
                border-top: 100px solid red;
                border-left: 100px solid transparent;
                border-bottom: 100px solid transparent;
                border-right: 100px solid transparent;
            }
            #sixth{
                width: 200px;
                height: 200px;
                background-color: red;
                transform: rotate(45deg);
            }
        </style>
    </head>
    <body>
        <div id="first">
            
        </div>
        <div id="second">
            
        </div>
        <div id="third">
            
        </div>
        <div id="forth">
            
        </div>
        <div id="fifth">
            
        </div>
        <div id="sixth">
            
        </div>
    </body>
</html>