서두에
불가사의한 border-image 문제로, 오래 생각���습니다. 다음과 같습니다:
손에 있는 기기가 Android 라면, 말풍선 테두리와 텍스트 사이의4 개의 얇은 선이 보일 것입니다. 만약 차이점을 찾는 데 능숙하다면, 말풍선 뾰족한 모서리 아래에 있는매우 얇은 가로선도 발견할 수 있습니다
해당 소스 코드는 다음과 같습니다:
<div style="background-color: silver; padding: 20px;">
<div style="border: 10px solid; border-image: url(http://www.ayqy.net/temp/popup-white.png) 20 fill repeat; width: 136px;">
<div style="padding: 15px;">귀여운 말풍선</div>
</div>
</div>
일.문제 재진술
border-image 를 적용하면, border box 와 content box 사이에 투명한 얇은 선이 한 바퀴 나타납니다. 어떤 경우에는 border box 바깥에도 투명한 얇은 선이 한 바퀴 나타납니다. 위의 효과와 같습니다
주의: iOS 에는 이 문제가 없는 것 같지만, 모든 Android 에 있는 것 같습니다. 적어도 Android 6.0 에는 있습니다. 다른 기기는 테스트 대기 중입니다. 만약 손에 있는 기기에 이 문제가 있다면, 댓글로 알려주세요. 감사합니다
border-image 와 관련된 부분은 다음과 같습니다:
border: 10px solid;
border-image: url(http://www.ayqy.net/temp/popup-white.png) 20 fill repeat;
2 배 이미지에서 20px 의 테두리를 한 바퀴 잘라내어 10px 의 border 로 축소합니다. 그렇다면, 이 한 바퀴의 얇은 선은 어디서 온 것일까요?
P.S. 버그가 도망가지 않도록, 스크린샷을 기록합니다:
[caption id="attachment_1194" align="alignnone" width="169"]
border-image 2 배 이미지[/caption]
[caption id="attachment_1195" align="alignnone" width="169"]
border-image 1 배 이미지[/caption]
이.원인 분석
또 zxx 의 타일 깔기 예시가 생각납니다:
这么比方吧，您从万科地产买了个 99.5m*99.5m 的毛坯房，地面要贴瓷砖，都是 1m*1m 的正方形瓷砖。如果是“平铺”，对不起，这 1m 边长的瓷砖不行，要处理！怎么处理法？很简单，每个瓷砖压成 0.995m*0.995m 的，这样就可以了，所以，平铺就是以完整的单元铺满整个区域。如果是重复，就直接把这 1m*1m 的瓷砖从一个角落一个一个的放置，放到头放不下了怎么办？直接把瓷砖从中间“咔”掉，于是最后会在房子的边角看到很多半截的瓷砖。
（인용 CSS3 border-image 详解、应用及 jQuery 插件？张鑫旭 - 鑫空间 - 鑫生活）
어떻게 깔더라도, 이론상으로는 이 4 개의 얇은 선이 존재해서는 안 됩니다. 하지만 계산은 항상 정밀도에 제한됩니다. 예를 들어 scale 로 인한 반 픽셀 오프셋 등입니다. 이 4 개의 선은 그것과 유사할 것입니다. 문제는 브라우저 구현, 혹은계산 정밀도 손실에서 옵니다
정밀도의 문제라면, 타일링 (round) 과 반복 (repeat) 은 모두 자르기 계산이 존재하며, 정밀도 손실이 심각할 수 있습니다. 반면, 늘리기 (stretch) 는 자르기 계산이 없고 보간 계산만 있으므로, 이론상 효과는 조금 더 좋을 것입니다. 아래에서 시도해 봅니다
삼.해결책
stretch 와 round 를 시도했습니다. 자세한 내용은http://www.ayqy.net/temp/border-image-pop.html를 참조하세요
Android 기기에서 stretch 를 사용하면 4 개의 얇은 선이 사라지는 것을 발견했습니다. 일시적으로 stretch 가 실행 가능한 해결책이라고 생각합니다
하지만 Chrome 기기 시뮬레이션에서는 얇은 선이 남아있는 것을 발견합니다 (Mac 의 Chrome 에서도 얇은 선이 보입니다). border-image-repeat 의 값이 늘리기, 타일링, 반복 중 어느 것이든 상관없이입니다
Mac Safari 에서는 일반 페이지든 '반응형 디자인 모드'든 얇은 선이 보이지 않습니다. iPhone 5s, iPhone 7 에서도 얇은 선이 보이지 않습니다. 또한, FF49 에는 이 문제가 있지만 Chrome 만큼 뚜렷하지 않습니다. IE11 은 전혀 이 문제가 없습니다. 그렇다면 일시적으로 이 문제는 Google 계열 고유하다고 생각합니다. Chrome 데스크톱 버전/모바일 버전과 Android 기본 브라우저 모두에 있으며, iOS 제품에는 없는 것 같습니다
또한, 직접 테스트한 결과, 얇은 선의 문제는 2 배 이미지, 1 배 이미지와 무관하며, 이미지 크기와도 무관하며, fill 유무와도 무관하며, 화면 PPI 와 관계가 있지만, 관계는 크지 않습니다. 자세한 내용은 아래를 참조하세요:
-
http://www.ayqy.net/temp/border-image-pop-try.html: 이미지 크기, 구버전
-webkit-,outline
stretch 일 때만 얇은 선이 나타나지 않으며, 다른 방식은 안 됩니다
P.S. 자식 요소의 outline 로 얇은 선을 덮는 것도 고려했습니다. 단색 불투명 배경은 확실히 효과적이지만, 반투명 배경에서는 outline 의 색 값을 정확히 설정하기 어렵습니다 (특히 디자인 시안이 몇 개의 반투명 레이어가 겹쳐 있을 때). 또한 outline 은 뾰족한 모서리 아래의 얇은 선을 해결할 수 없습니다 (부모 요소 outline: 2px solid transparent 는 물론 안 됩니다. 투명한데 어떻게 덮습니까)
이 문제는 다른 것도 증명합니다: repeat 와 round 는 모두 중심에서 양쪽으로 깔립니다 (그래서 4 개의 얇은 선이 있는 것입니다)
사.결론
border-image 는 강력한 속성이지만, 유감스럽게도, 현재 그 진정한 강력한 기능은 아직 사용할 수 없습니다. 몇 년이 지났지만요.
현재 (2016-10-22), 만약 사용해야 한다면, border-image-repeat: stretch 만 사용하는 것을 권장합니다. repeat/round 사용은 권장하지 않습니다. 얇은 선의 문제가 있기 때문입니다. 어느 날 Android 6.0 도 역사가 될 때까지는.
box-shadow, border, border-radius, transform 로 대부분의 테두리를 구현할 수 있지만, border-image 가 절대적으로 가장 단순하고 강력한 방법입니다. 기대할 가치가 있습니다.
아직 댓글이 없습니다