首頁 > web前端 > css教學 > 如何為帶有偽元素的子div建立邊框覆蓋?

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

Barbara Streisand
發布: 2024-11-10 21:44:03
原創
860 人瀏覽過

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

為子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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板