CSS에서 백분율 기반 테두리를 어떻게 만들 수 있나요?

백분율로 테두리 두께를 설정하는 방법

백분율을 사용하여 테두리 너비를 설정하는 것은 CSS에서 직접 지원되지 않습니다. . 그러나 CSS 기술의 조합을 사용하여 이 동작을 시뮬레이션할 수 있습니다.

테두리를 추가하려는 요소를 래퍼에 래핑할 수 있습니다. 다음 속성을 가진 요소:

• 래퍼 요소의 배경색을 원하는 테두리 색상으로 설정합니다.


• 테두리 너비를 시뮬레이션하려면 래퍼 요소의 패딩을 백분율로 설정합니다.


• 내부 요소의 배경색을 원하는 색상으로 변경합니다. border.

이 기술은 패딩과 배경색을 사용하여 테두리 비율의 환상을 만듭니다.

예 Code

<br>.faux-borders {<br> background-color: #f00;<br> padding: 1px 25%; /<em> 측면에 25% 테두리 시뮬레이션 </em>/<br>}<p>.content {<br> background-color: #fff;<br>}</p><p>&lt ;div> <div class="content"></p><pre class="brush:php;toolbar:false">This element has simulated percentage borders.