포함된 Div 너비보다 작은 CSS 테두리를 만들려면 어떻게 해야 합니까?-CSS 튜토리얼-php.cn

포함된 Div 너비보다 작은 CSS 테두리를 만들려면 어떻게 해야 합니까?

Patricia Arquette

풀어 주다： 2024-12-12 11:52:10

원래의

114명이 탐색했습니다.

How Can I Create a CSS Border Smaller Than Its Containing Div's Width?

Div 너비보다 작은 테두리 만들기

CSS에서 테두리 너비는 일반적으로 요소의 너비에 따라 결정됩니다. 주변. 테두리를 컨테이너 요소의 너비보다 작게 만들고 싶다면 의사 요소를 사용할 수 있습니다. 방법은 다음과 같습니다.

 너비: 200px;<br> 높이: 50px;   <br> 위치: 상대;<br> z-색인: 1;<br> 배경: #eee;<br>}</p><p>div: 이전 {<br> 콘텐츠: "";<br> 위치 : 절대;<br> 왼쪽: 0;<br> 아래쪽: 0;<br> 높이: 1px;<br> 너비: 50%;  /<em> 또는 100px </em>/<br> border-bottom: 1px 단색 마젠타;<br>}

<div>Item 2</div>

이 예에서는 :before 의사 요소를 사용하여 너비의 절반에 불과한 테두리를 만듭니다. 컨테이너 div. :before 요소의 너비 속성을 50% 또는 원하는 너비(예: 100px)로 설정하여 이를 수행합니다. 또한 position:absolute 속성을 사용하여 컨테이너 div 내에서 :before 요소를 절대적으로 배치합니다.

z-index 속성은 :before 요소가 컨테이너 div의 콘텐츠 위에 배치되도록 합니다. 이렇게 하면 테두리가 콘텐츠 뒤에 숨겨지는 것을 방지할 수 있습니다.

의사 요소를 사용하면 컨테이너 요소와 너비와 위치가 다른 테두리를 만들 수 있습니다. 이러한 유연성을 통해 사용자 정의 시각 효과를 만들고 웹 페이지 디자인을 향상시킬 수 있습니다.

위 내용은 포함된 Div 너비보다 작은 CSS 테두리를 만들려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!