집 >웹 프론트엔드 >CSS 튜토리얼 >CSS를 사용하여 0.5픽셀 테두리를 구현하는 샘플 코드

CSS를 사용하여 0.5픽셀 테두리를 구현하는 샘플 코드

小云云원래의: 2017-12-05 15:51:231928검색

저희 회사 디자이너들은 디자인 도면을 작성할 때 항상 iPhone 6(폭은 물리적 픽셀 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: &#39;&#39;;

       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. 의사 요소

4. 상자 사용 - sizing: border-box 속성은 테두리를 너비와 높이로 래핑합니다.

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

6. 전체 상자 모델을 0.5로 줄입니다. 7. 박스 모델의 위치를 조정하고 왼쪽 상단을 Benchmark 변환 원본: 0 0;

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

위 내용은 샘플 코드입니다. CSS에 0.5픽셀 테두리를 구현해 보세요. 모든 사람에게 도움이 되기를 바랍니다.

CSS를 사용하여 0.5픽셀 테두리를 구현하는 샘플 코드

관련 기사