css 四个角

<style>

    .outter {

      position: relative;

      padding: 5px;

      height: 50px; 

       300px;

    }

    .outter::before {

      position: absolute;

      content: '';

      height: 10px;

       10px;

      right: 0;

      top: 0;

      border-right: 1px solid #00E8FF;

      border-top: 1px solid #00E8FF;

    }

    .outter::after {

        position: absolute;

        content: '';

        height: 10px;

         10px;

        left: 0;

        bottom: 0;

        border-left: 1px solid #00E8FF;

        border-bottom: 1px solid #00E8FF;

    }

    .content {

        position: relative;

        height: 50px;

    }

    .content::before {

      position: absolute;

      content: '';

      height: 10px;

       10px;

        left: -5px;

        top: -5px;

        border-left: 1px solid #00E8FF;

        border-top: 1px solid #00E8FF;

    }

    .content::after {

      position: absolute;

      content: '';

      height: 10px;

       10px;

        right: -5px;

        bottom: 5px;

        border-right: 1px solid #00E8FF;

        border-bottom: 1px solid #00E8FF;

    }

   

  </style>

 

 

<div class="outter">

      <div class="content">

      </div>

      

  </div>