CSS로 0.5픽셀 테두리를 구현하는 방법에 대한 자세한 설명

이 글에서는 주로 CSS를 이용한 0.5픽셀 테두리 구현을 소개합니다. 자세한 코드는 여기에 정리되어 있어 실용적 가치가 매우 높습니다. 도움이 필요한 친구들이 참고할 수 있습니다.

회사 디자이너들은 디자인을 만들 때 iphone6(너비)를 사용합니다. 750개의 물리적 픽셀을 기준으로 설계되었습니다. iPhone 6의 기기 픽셀 비율(즉, 물리적 픽셀에 대한 CSS 픽셀의 비율)은 2이므로 디자이너가 테두리가 1px인 상자를 디자인하면 CSS 코드에 비해 0.5픽셀이 됩니다.

이 문제에 대해 가장 직관적인 방법은 CSS를 사용하여 테두리를 0.5px로 직접 설정하는 것입니다. 테스트 후 iPhone에서는 Android 기반의 거의 모든 브라우저에서 0.5를 0으로 인식하므로 테두리가 없는 상태입니다. 이 방법은 작동하지 않습니다

CSS3에는 이 속성을 사용하여 1px 테두리를 50% 줄여 이 기능을 구현할 수 있습니다. 구체적인 구현 코드는 다음과 같습니다

<p class="border3">

    <p class="content">伪类设置的边框</p>

</p>

css:

.border3{

     position: relative;          

 }

 

.border3:before{

       content: '';

       position: absolute;

       width: 200%;

       height: 200%;

       border: 1px solid red;

       -webkit-transform-origin: 0 0;

       -moz-transform-origin: 0 0;

       -ms-transform-origin: 0 0;

       -o-transform-origin: 0 0;

       transform-origin: 0 0;

       -webkit-transform: scale(0.5, 0.5);

       -ms-transform: scale(0.5, 0.5);

       -o-transform: scale(0.5, 0.5);

       transform: scale(0.5, 0.5);

       -webkit-box-sizing: border-box;

       -moz-box-sizing: border-box;

       box-sizing: border-box;

}

구현 아이디어:

1. 대상 요소의 참조 위치를 설정합니다

2. 대상 요소 앞이나 뒤에 의사 요소를 추가하고 절대 위치를 설정합니다.

3. element

4. border-box 속성은 테두리를 너비와 높이로 묶습니다.

5. 너비와 높이를 200%로 설정합니다.

6. 전체 상자 모델을 0.5로 줄입니다. 박스 모델의 위치를 ​​조정하고 왼쪽 상단을 기준으로 변형합니다. -origin: 0 0;

구현 결과는 iPhone에 다음과 같이 표시됩니다.

위 내용은 CSS로 0.5픽셀 테두리를 구현하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!