최근에 저는 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
왜 이런 일이 발생하고 어떻게 해결할 수 있는지 아는 사람이 있습니까? 감사합니다!
다음은 테두리 문제없이 동일한 결과를 얻는 다른 아이디어입니다.
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] 삭제
몇 마디 만하겠습니다