CSS에서 0.5픽셀 선을 만드는 방법

이번에는 CSS로 0.5픽셀 선을 만드는 방법과 CSS로 0.5픽셀 선을 만들 때 주의사항에 대해 알려드리겠습니다.

저희 회사 디자이너들은 디자인 도면을 작성할 때 항상 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: '';
       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을 설정합니다. 의사 요소에 1px 테두리를 추가합니다.

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

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

6. 전체

박스 모델을 0.5

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

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

케이스를 읽으신 후 방법을 마스터하셨으리라 믿습니다. 이 기사에서 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

css3의 포인터 이벤트 사용에 대한 자세한 설명

focus-within
사용에 대한 자세한 설명

위 내용은 CSS에서 0.5픽셀 선을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!