의사 요소를 사용하여 하위 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!