疑似要素を含む子 Div の境界線オーバーレイを作成するにはどうすればよいですか?-CSSチュートリアル-php.cn

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

Mary-Kate Olsen

リリース： 2024-11-20 18:15:16

オリジナル

476 人が閲覧しました

How to Create a Border Overlay for a Child Div with Pseudo Elements?

ボーダーオーバーレイの子 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 サイトの他の関連記事を参照してください。