하위 Div에 대한 테두리 오버레이 만들기
문제:
이미지와 유사하게 하위 div의 콘텐츠를 오버레이하는 테두리 제공됩니다.
HTML 및 CSS 코드:
<div class="box-border box-border-participe"> <div class="box-participe"> <a>Participe</a> </div> </div>
.box-participe { background-color: #94C120; padding: 10px 40px; }
해결책:
이를 달성하려면 의사 요소를 사용하면 테두리를 만들고 추가 마크업을 피할 수 있습니다. 또한 위치와 크기를 쉽게 제어할 수 있습니다.
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!