疑似要素を使用して境界線オーバーレイを作成するには?

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

提供された画像に示すように、境界線オーバーレイ効果を実現するには、次の手法を使用できます。

疑似の使用要素

::before や ::after などの疑似要素は、余分なマークアップを追加せずに境界線オーバーレイを作成する便利な方法を提供します。位置とサイズを簡単に制御できます:

CSS:

.box-border {
  background: #94C120;
  width: 200px;
  height: 50px;
  margin: 50px;
  position: relative;
}

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

HTML:

<div>

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