1. ホーム
  2. Web制作
  3. CSS

[CSSチュートリアル】 css border add four corners コード

2022-01-21 14:55:44

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;
      }

      /* four corner boxes*/
      .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;
      }

cssのボーダーは4つの角を追加する効果について、この記事はこれに導入され、より関連するcssのボーダーは4つの角を追加する内容は、スクリプトハウス以前の記事を検索するか、次の関連記事を閲覧を続けてください、あなたは将来的に多くのスクリプトハウスをサポートして願っています!.