의사 요소를 사용하여 테두리 오버레이를 만드는 방법은 무엇입니까?

테두리 오버레이 만들기

제공된 이미지와 같이 테두리 오버레이 효과를 얻으려면 다음 기술을 사용할 수 있습니다.

의사 사용 요소

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