疑似要素を含む子 Div の境界線オーバーレイを作成するにはどうすればよいですか?

子 Div の境界線オーバーレイの作成

問題:

画像と同様に、子 div のコンテンツをオーバーレイする境界線

HTML および CSS コード:

<div class="box-border box-border-participe">
  <div class="box-participe">
    <a>Participe</a>
  </div>
</div>

.box-participe {
  background-color: #94C120;
  padding: 10px 40px;
}

解決策:

擬似を使用してこれを実現するには要素で境界線を作成し、余分なマークアップを避けることができます。また、その位置とサイズを簡単に制御することもできます。

body {
  background: grey;
}

.button {
  background: #94c120;
  width: 200px;
  height: 50px;
  margin: 50px;
  position: relative;
}

.button:before {
  content: "";
  position: absolute;
  top: -15px;
  left: -15px;
  width: 100%;
  height: 100%;
  border: 5px solid #fff;
  box-sizing: border-box;
}

この方法を使用すると、子 div 用のスタイリッシュな境界線オーバーレイを簡単に作成でき、Web サイトの視覚的な魅力を高めることができます。

以上が疑似要素を含む子 Div の境界線オーバーレイを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。