CSS3 로 하프 픽셀 테두리 구현

일. 발상

일반적인 1px 검은색 실선 테두리:

border: 1px solid #000;

하프 픽셀 테두리는 물론 1px 를 0.5px 로 바꾸기만 하면 되는 것이 아니다 (테스트해 보지는 않았지만, 1 또는 0 으로 파싱될 수 있다). border-width 의 값은 자연수만 가능하다

비슷하게, outline, box-shadow 등도 0.5px 의 가는 선을 그릴 수 없다

일반적인 발상은 불가능하므로, 의사 요소 + 스케일을 사용하여 교묘하게 구현할 수 있다. 구체적인 단계는 다음과 같다:

대상 요소를 위치 기준으로 설정

.thinner-border {
    position: relative; /* 기본값 static 이 아니면 됨 */
}

대상 요소에 before 또는 after 의사 요소를 추가하고 절대 위치 설정
```
.thinner-border:before {
    content: '';
    position: absolute;
}
```
의사 요소에 1px 테두리 추가
```
border: 1px solid red;
```
의사 요소의 너비와 높이를 대상 요소의 2 배로 설정
```
width: 200%;
height: 200%;
```

0.5 배 축소 (대상 요소 크기로 돌아감)

transform-origin: 0 0;
transform: scale(0.5, 0.5);

테두리 포함
```
box-sizing: border-box;
```

간단히 말하면 먼저 확대한 후 축소하는 것이다. border-box 가 핵심이며, 그렇지 않으면 테두리가 함께 스케일되지 않는다

이. 구체적인 구현

위에서 이미 단계를 명확히 설명했으므로, 합치면 완전한 구현이 된다:

.thinner-border {
    position: relative;
}

.thinner-border:before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    border: 1px solid #000;
    -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;
}

기능은 class 값에 thinner-border 를 지정한block 및 inline-block 요소에 하프 픽셀 테두리를 추가하는 것이다. inline 요소의 width 와 height 에는 몇 가지 제한이 있으므로, 의사 요소가 가져오는 200% 는 실제 값보다 작아지고, 테두리의 너비와 높이도 기대보다 작아진다

삼. Demo

.ib { display: inline-block; } .bx { display: block; } .bd { border: 1px solid #000; } .thinner-border { position: relative; } .thinner-border:before { content: ''; position: absolute; width: 200%; height: 200%; border: 1px solid #000; -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; } .one-fourth:before{ width: 400%; height: 400%; -webkit-transform: scale(0.25, 0.25); -ms-transform: scale(0.25, 0.25); -o-transform: scale(0.25, 0.25); transform: scale(0.25, 0.25); }

1 픽셀 테두리, block

하프 픽셀 테두리, block

1 픽셀 테두리, inline 하프 픽셀 테두리, inline-block 하프 픽셀 테두리, inline, 테두리가 너무 좁음

1/4 픽셀 테두리

테두리 효과는 모바일 브라우저에서 보는 것이 더 명확하다. 변하는 것은 선의 너비이지 색상이 아니다

주의: 이론적으로는 테두리를 임의로 가늘게 할 수 있지만 (1/n px), 정밀도 문제 (정밀도가 테두리의 너비와 높이에 영향) 가 존재하므로 하프 픽셀 테두리가 가장 실용적인 의미가 있다. 하지만 문제도 존재한다: 너비와 높이가 홀수이면 테두리 위치가 0.5px 어긋난다. 실제 응용에서는 수용 가능하다

일. 발상

이. 구체적인 구현

삼. Demo

댓글

댓글 작성