한쪽의 곡선 테두리는 배경이 투명한 경우에도 여전히 다른쪽에가는 선을 보여줍니다. 모바일에서만 가능합니다. 왜 이런 일이 발생합니까?

알렉사 라드

최근에 저는 CSS 아트를 만들기 시작했고 CSS 테두리에 대해 이해할 수없는 것을 발견했습니다.

투명한 배경으로 둥글게 할 요소의 스타일을 지정하고 한쪽에만 테두리를 설정하면 모바일에만 표시되는 다른 모든면에 여전히 희미한 선이 있습니다.

<div></div>

div {
  width: 300px;
  height: 150px;
  background: transparent;
  border-top: 5px solid purple;
  border-radius: 50%;
}

PC와 휴대폰의 다음 CodePen을 비교하여 무슨 의미인지 확인하십시오.

https://codepen.io/aradevich/pen/mdrLvqx

스크린 샷 : 5px 상단 테두리가있는 타원

이 효과는 모바일의 눈과 같이 CSS 아트의 얼굴 특징을 왜곡 할 때 특히 귀찮습니다. https://codepen.io/aradevich/pen/qBaxQye?editors=1100

왜 이런 일이 발생하고 어떻게 해결할 수 있는지 아는 사람이 있습니까? 감사합니다!

Afif 동반

다음은 테두리 문제없이 동일한 결과를 얻는 다른 아이디어입니다.

div.box {
  width: 300px;
  height: 150px;
  background: 
    /*  150 = width/2   70 = height/2 - 5px of border */
    radial-gradient(151px 70px at bottom, transparent 98%,purple) 
    top/100% 50% no-repeat;
  border-radius: 50% 50% 0 0;
}
<div class="box"></div>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

Related 관련 기사

뜨겁다태그

보관