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

ボーダー オーバーレイの子 Div の作成

子 Div のボーダー オーバーレイ効果を作成するには、疑似要素の利用を検討できます。このアプローチにはいくつかの利点があります。

• 追加のマークアップの必要性を回避します。
• 境界線の位置とサイズの制御を強化します。

実装例:

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 class="button">
  some text
</div>

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