搜索

结合课程总结的边框线

原创 2019-04-16 12:46:09 267
摘要:<!DOCTYPE html> <html>   <head>     <meta charset="utf-8">     <title></title>   &nb
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      div{
        width: 500px;
        height: 500px;
        background: red;
        float: left;
        margin-right: 40px;
        margin-bottom: 40px;
      }
      div.box1{
        border: 5px solid green;
      }
      div.box2{
        border: 5px double blue;
      }
      div.box3{
        border: 5px dashed pink;
      }
      div.box4{
        border: 5px dotted #000;
      }
      div.box5{
        border-top: 5px solid #000;
        border-bottom: 5px dashed #000;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
  </body>
</html>

在本小节课程中,学习到关于盒模型加边框的知识,其中边框线可以分为border-left、border-top、border-right、border-bottom;边框线有实线、点划线、双边框线、虚线,在实际使用中,可以根据不同的需求使用不同的边框线、不同的上、下、左、右边框

批改老师:天蓬老师批改时间:2019-04-16 13:44:31
老师总结:边框的控制非常的灵活和复杂, 在设计 边框的时候, 不可以太炫的, 一定要风格统一, 简洁为主

发布手记

热门词条