1. 程式人生 > 其它 >css 邊框新增四個角效果

css 邊框新增四個角效果

1、html

  <div class="loginbody">
          <div class="border_corner border_corner_left_top"></div>
          <div class="border_corner border_corner_right_top"></div>
          <div class="border_corner border_corner_left_bottom"></div>
          <div class
="border_corner border_corner_right_bottom"></div>       <--other……………………--> </div>

2、css

      .loginbody{
        border: 1px solid #21a7e1;
        box-shadow: 5px 5px 10px 10px  rgba(24,68,124,0.4);
        padding-top:20px;
        border-radius: 6px;
        position: relative;
} /*四個角框*/ .border_corner{ z-index: 2500; position: absolute; width: 19px; height: 19px; background: rgba(0,0,0,0); border: 4px solid #1fa5f1; } .border_corner_left_top{ top: -2px; left: -2px; border-right: none; border-bottom: none; border-top-left-radius: 6px; } .border_corner_right_top{ top: -2px; right: -2px; border-left: none; border-bottom: none; border-top-right-radius: 6px; } .border_corner_left_bottom{ bottom: -2px; left: -2px; border-right: none; border-top: none; border-bottom-left-radius: 6px; } .border_corner_right_bottom{ bottom: -2px; right: -2px; border-left: none; border-top: none; border-bottom-right-radius: 6px; }