如何為帶有偽元素的子div建立邊框覆蓋？

為子Div 建立邊框覆蓋層

問題：

問題：

您需要設計一個覆蓋子div 內容的邊框，類似於提供的圖像。

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

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

HTML 和CSS 程式碼：

解：

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 創建時尚的邊框疊加，增強網站的視覺吸引力。

以上是如何為帶有偽元素的子div建立邊框覆蓋？的詳細內容。更多資訊請關注PHP中文網其他相關文章！